<CH.Section>

Sometimes it is useful to reference code from a section of text. Since the code may be below or above the text, we need to wrap the text and the code inside an element: <CH.Section>.

With the <CH.Section> component you can reference code in two ways:

Inline code

With Code Hike, you have two options to render inline code:

  • You can use the standard markdown syntax where you wrap the code in backticks: `var x = 10`, which won't be syntax-highlighted.
  • Or use a special syntax where you wrap the code with underscores and backticks: _`var x = 10`_, which will be syntax-highlighted as var x = 10.

Usually, the syntax depends on the context and the language. If you use the special inline code inside a <CH.Section> component, Code Hike will copy the highlighting from the code to the text:

your.mdx

<CH.Section>
```python
def lorem(ipsum):
ipsum + 1
```
Something _`def lorem(ipsum)`_
</CH.Section>

Code mentions

Code mentions are a way to link code and text. We borrow the link syntax from markdown to create hoverable links to the code. It's easier to show than to explain:

your.mdx

<CH.Section>
```python
def lorem(ipsum):
ipsum + 1
```
Hello, [hover me](focus://1[5:16])
</CH.Section>

The syntax is the same as a markdown link, but instead of an URL, you use focus:// as the protocol, and then pass a focus string.

Code mentions are useful when you have more than one file. To specify the file, you prepend the name before the focus string and separate them with a #:

your.mdx

<CH.Section>
[lorem js](focus://two.js#1[10:21])
[lorem py](focus://one.py#1[5:16])
<CH.Code>
```python one.py
def lorem(ipsum):
ipsum + 1
```
```js two.js
function lorem(ipsum) {
return ipsum + 1
}
```
</CH.Code>
</CH.Section>