Skip to content

Illuminate Documentation

Illuminate

Home

Code Blocks

Learn how to use Code Hike's features to customize and add interactivity to your code examples.

Overview

All code blocks in Illuminate are rendered with Code Hike. Code Hike extends the functionality of the typical fenced code blocks in Markdown so that annotations, file names, and language-specific syntax highlighting can be used to enhance the code within. For even more functionality and interactivity, standard Markdown code blocks can be wrapped with any Code Hike (CH) components.

Syntax highlighting

To apply syntax highlighting to a code block, specify the language immediately after the first set of backticks (```). Refer to the table below for a list of supported languages for syntax highlighting.

Example


// This is some Javascript code:
let x = 1;
if (x === 1) {
let x = 2;
}

code-block-with-syntax-highlighting.mdx

```js
// This is some Javascript code:
let x = 1;
if (x === 1) {
let x = 2;
}
```

File names

Adding file names to code blocks can help readers understand where the code is used within the project structure. File names can be added to any fenced code block, even if it is not inside of a CH component. To render a code block featuring a file name, add the file name after the specified programming language. Code blocks with a file name will have a different UI than code blocks without a file name.

Caution

Code blocks must have a programming language specified for syntax highlighting first to add a file name. If a language is not specified, the code block will render without syntax highlighting or a file name.

Example

python-example.py

print("Hello, world!")

code-block-with-file-name.mdx

```python python-example.py
print("Hello, world!")
```

Annotations

Annotations can be applied to any fenced code block, even if it is not inside of a CH component. Annotations are added as notes in the code block using either // or # commenting syntax, which will not appear in your rendered code block. The following annotations are available for code blocks in Illuminate:

  • focus: keep the targeted code bright while dimming the rest
  • mark: add a background color to the targeted code
  • withClass: add a CSS class to the targeted code
  • link: add links inside the code
  • from: include code from external files

For in-depth instructions on how to apply annotations to code blocks, refer to Code Hike's documentation.

Code Hike (CH) components

Code Hike has five different components to add more functionality and interactivity to code examples. The CH.Code and CH.Section components are currently the only stable components. CH.Scrollycoding, CH.Spotlight, and CH.Slideshow are available for experimental use to connect text and code examples for more engaging demonstrations. Refer to the corresponding component pages for detailed instructions on how to use each one in your documentation.

CH.Code

Use CH.Code to add standard Code Hike features and the ability to display multiple code examples in a single code block.

CH.Section

Use CH.Section to reference pieces of code by grouping them with the corresponding text in a section.

CH.Scrollycoding

Use CH.Scrollycoding to show the code and corresponding text side-by-side.

CH.Spotlight

Use CH.Spotlight to change the code view based on linked sections of text.

CH.Slideshow

Use CH.Slideshow to wrap text and code into separate slides with buttons to navigate between slides.

Built with by