<CH.Code>

With <CH.Code> you can show code files in tabs or panels. You can also pass props to override configuration or customize styling.

Tabs

When you include more than one code blocks inside a <CH.Code>, Code Hike will show them as tabs.

your.mdx


<CH.Code>
```python one.py
print("Hello, one!")
```
```python two.py
print("Hello, two!")
```
</CH.Code>

Panels

You can also show two files at the same time in two panels. Use a divider --- to separate the top tabs from the bottom tabs.

your.mdx


<CH.Code>
```python one.py
print("Hello, one!")
```
---
```python two.py
print("Hello, two!")
```
</CH.Code>

Override configuration

You can override some of the configuration options by passing props to <CH.Code>.

your.mdx


<CH.Code lineNumbers={true}>
```python one.py
print("Hello, world!")
print("Hello, world!")
print("Hello, world!")
```
</CH.Code>

Styling props

Then there are the style and className props. You can use them to customize the styles of the component.

your.mdx


<CH.Code style={{height: 150}}>
```python one.py
print("Hello, world!")
print("Hello, world!")
print("Hello, world!")
```
</CH.Code>

Height

By default, <CH.Code> will take the height needed to fit all the lines of the given code. As we saw in the previous example, you can use CSS to set a fixed height.

Instead of setting the height with CSS, you can also use the rows prop. You pass the number of lines you want to show, and Code Hike will set the height accordingly.

your.mdx


<CH.Code rows={2}>
```python one.py focus=2
print("Hello, world 1!")
print("Hello, world 2!")
print("Hello, world 3!")
print("Hello, world 4!")
print("Hello, world 5!")
```
</CH.Code>

In addition to the number of lines, you can also pass "focus", then the height of the code will match the height of the focused lines.

your.mdx


<CH.Code rows="focus">
```python one.py focus=2:3
print("Hello, world 1!")
print("Hello, world 2!")
print("Hello, world 3!")
print("Hello, world 4!")
print("Hello, world 5!")
```
</CH.Code>