Adding code samples
You can add inline code snippets or code blocks. Code blocks support meta options for syntax highlighting, titles, line highlighting, icons, and more.Inline code
To denote aword or phrase as code, enclose it in backticks (`).
Code blocks
Use fenced code blocks by enclosing code in three backticks. Code blocks are copyable, and if you have the assistant enabled, users can ask AI to explain the code. Specify the programming language for syntax highlighting and to enable meta options. Add any meta options, like a title or icon, after the language.Code block options
You can add meta options to your code blocks to customize their appearance.You must specify a programming language for a code block before adding any other meta options.
Option syntax
- String and boolean options: Wrap with
"",'', or no quotes. - Expression options: Wrap with
{},"", or''.
Syntax highlighting
Enable syntax highlighting by specifying the programming language after the opening backticks of a code block. We use Shiki for syntax highlighting and support all available languages. See the full list of languages in Shiki’s documentation. Customize code block themes globally usingstyling.codeblocks in your docs.json file. Set simple themes like system or dark, or configure custom Shiki themes for light and dark modes. See Settings for configuration options.
Custom syntax highlighting theme
Custom syntax highlighting theme
For custom themes, set your theme in
docs.json to "css-variables" and override syntax highlighting colors using CSS variables with the --mint- prefix.The following variables are available:Basic colors--mint-color-text: Default text color--mint-color-background: Background color
--mint-token-constant: Constants and literals--mint-token-string: String values--mint-token-comment: Comments--mint-token-keyword: Keywords--mint-token-parameter: Function parameters--mint-token-function: Function names--mint-token-string-expression: String expressions--mint-token-punctuation: Punctuation marks--mint-token-link: Links
--mint-ansi-black,--mint-ansi-black-dim--mint-ansi-red,--mint-ansi-red-dim--mint-ansi-green,--mint-ansi-green-dim--mint-ansi-yellow,--mint-ansi-yellow-dim--mint-ansi-blue,--mint-ansi-blue-dim--mint-ansi-magenta,--mint-ansi-magenta-dim--mint-ansi-cyan,--mint-ansi-cyan-dim--mint-ansi-white,--mint-ansi-white-dim--mint-ansi-bright-black,--mint-ansi-bright-black-dim--mint-ansi-bright-red,--mint-ansi-bright-red-dim--mint-ansi-bright-green,--mint-ansi-bright-green-dim--mint-ansi-bright-yellow,--mint-ansi-bright-yellow-dim--mint-ansi-bright-blue,--mint-ansi-bright-blue-dim--mint-ansi-bright-magenta,--mint-ansi-bright-magenta-dim--mint-ansi-bright-cyan,--mint-ansi-bright-cyan-dim--mint-ansi-bright-white,--mint-ansi-bright-white-dim
Twoslash
In JavaScript and TypeScript code blocks, usetwoslash to enable interactive type information. Users can hover over variables, functions, and parameters to see types and errors like in an IDE.
Icon
Add an icon to your code block using theicon property. See Icons for all available options.
Line highlighting
Highlight specific lines in your code blocks usinghighlight with the line numbers or ranges you want to highlight.
Line focusing
Focus on specific lines in your code blocks usingfocus with line numbers or ranges.
Show line numbers
Display line numbers on the left side of your code block usinglines.
Expandable
Allow users to expand and collapse long code blocks usingexpandable.
Diff
Show a visual diff of added or removed lines in your code blocks. Added lines are highlighted in green and removed lines are highlighted in red. To create diffs, add these special comments at the end of lines in your code block:// [!code ++]: Mark a line as added (green highlight).// [!code --]: Mark a line as removed (red highlight).
// [!code ++:3]: Mark the current line plus the next two lines as added.// [!code --:5]: Mark the current line plus the next four lines as removed.
// for JavaScript or # for Python).