Home

CH.Code

Learn how to use the CH.Code component from Code Hike in your documentation to enhance your code blocks.

python-sample.py

javascript-sample.js


print("Hello, world!")

Overview

Wrap Markdown code blocks in the CH.Code component to:

display multiple code blocks as tabs or panels.
override default options for showing line numbers and a copy button.
change their appearance with custom height and CSS styling.

CH.Code components can be nested inside of any other CH components to add the ability to display code blocks as tabs or panels.

Basic fenced code blocks in Markdown can be enhanced with syntax highlighting, titles, links, focus effects, and more, with or without CH.Code. For more detailed instructions on how to extend the functionality and appearance of basic code blocks, refer to the Code Blocks guide.

Properties

Name	Type	Description
`lineNumbers`	boolean	Option to show line numbers for each row of code. The default is `false`.
`rows`	integer or `focus`	Option to set a custom height for the code block based on either a specified number of rows or `focus` annotation.
`showCopyButton`	boolean	Option to show copy button on the code block. The default is `true`.
`style`	string	Option to apply CSS styling to the code block.

Examples

Simple code block

A markdown code block wrapped in a CH.Code component will render the code with syntax highlighting for the specified language in a simple UI with a copy button.


print("Hello, world!")

simple-code-block.mdx


<CH.Code>
```python
print("Hello, world!")
```
</CH.Code>

Code block with tabs

Tabs are used to show multiple code examples in a single code block, with only one example visible at a time. To show tabs in a code block, wrap multiple code examples within one CH.Code component.

python-sample.py

javascript-sample.js


print("Hello, world!")

code-block-with-tabs.mdx


<CH.Code>
```python python-sample.py
print("Hello, world!")
```
```js javascript-sample.js
console.log("Hello, world!");
```
</CH.Code>

A file name must be specified after the code language for each code block panel. If a file name is not specified, the tabs will render but will not be selectable.

Code block with panels

Panels are used to show multiple code examples in a single code block, with all examples visible at once. To show panels in a code block, wrap the code examples with CH.Code, and separate each example with a divider (---).

one.py


print("Hello, one!")

two.py


print("Hello, two!")

code-block-with-panels.mdx


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

A file name must be specified after the code language for each code block panel. If a file name is not specified, the page will not render.

Code block with line numbers


_10print("Hello, world!")
_10print("Hello, world!")
_10print("Hello, world!")

code-block-with-line-numbers.mdx


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

Code block with style applied

one.py


print("Hello, world!")
print("Hello, world!")
print("Hello, world!")

code-block-with-style-applied.mdx


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

Code block with height applied

Height by number of rows

hello.py


print("Hello, world 1!")
print("Hello, world 2!")
print("Hello, world 3!")

code-block-with-height-rows.mdx


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

Height by focus annotation