Home
CH.Section
Learn how to use the CH.Section component from Code Hike in your documentation to link code and corresponding text together.
Add inline syntax highlighting like def lorem(ipsum) or inline mentions
like this that highlights part of a corresponding code block
when hovered.
Overview
CH.Section is used to reference pieces of code by grouping them with the
corresponding text in a section. Use CH.Section when you need to pair code
with descriptions, making it easier for readers to follow along with coding
tutorials or detailed code analysis.
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. Default is true |
Examples
Tip
To display code blocks as tabs or panels within CH.Section, wrap code blocks
in a CH.Code component. Refer to CH.Code for detailed
instructions and examples.
Code block with linked mentions
Code mentions link a piece of code to a corresponding piece of text. When the reader hovers or focuses on the linked text, the corresponding code will be highlighted in the code block.
def lorem(ipsum): ipsum + 1
Hover this text to highlight part of the code.
Inline code with syntax highlighting
When you use inline code in Markdown within a CH.Section component, adding
underscores (_) around it will apply the same syntax highlighting as other
code in that CH.Section.
def lorem(ipsum): ipsum + 1
This inline code has the same syntax applied as the code block:
def lorem(ipsum).