Code Blocks
Display code with optional syntax highlighting
Basic Code Block
Use fenced code blocks by enclosing code in three backticks.
Syntax Highlighting
Put the name of your programming language after the three backticks to get syntax highlighting.
We use Prism for syntax highlighting. The Test Drive Prism page lists all supported languages.
Names
Add a title after the programming language to set the name of your code example. The text can be anything as long as it’s all on one line.
Line Highlighting
Highlight specific lines in your code blocks by adding a special comment after the language identifier. Use curly braces {}
and specify line numbers or ranges separated by commas.
Expandable
Add [expandable]
after your title to make a long code block collapsible.
Code Groups
Want to display multiple code examples in one code box? Check out the Code Group documentation:
Code Group
Read the reference for the Code Group component