mkdocs-material/docs/reference/code-blocks.md

template
overrides/main.html

Code blocks

Code blocks and examples are an essential part of technical project documentation. Material for MkDocs provides different ways to set up syntax highlighting for code blocks, either during build time using Pygments or during runtime using a JavaScript syntax highlighter.

Configuration

This configuration enables syntax highlighting on code blocks and inline code blocks, and allows to include source code directly from other files. Add the following lines to mkdocs.yml

markdown_extensions:
  - pymdownx.highlight
  - pymdownx.inlinehilite
  - pymdownx.superfences
  - pymdownx.snippets

See additional configuration options:

• Highlight

• InlineHilite

• SuperFences

• Snippets

Code annotations

:octicons-heart-fill-24:{ .mdx-heart } Insiders{ .mdx-insiders } · :octicons-beaker-24: Experimental · :octicons-tag-24: insiders-2.2.0 ... present

Code annotations offer a comfortable and friendly way to attach arbitrary content to specific sections of code blocks by adding numeric markers in block and inline comments in the language of the block. Add the following to mkdocs.yml to enable them globally:

theme:
  features:
    - content.code.annotate # (1)

1. :man_raising_hand: I'm a code annotation! I can contain code, formatted text, images, ... basically anything that can be expressed in Markdown.

??? info "Enabling code annotations only for specific code blocks"

If you don't want to enable code annotations globally, because you don't
like the automatic inlining behavior, you can enable them for a specific
code block by using a slightly different syntax based on the
[Attribute List] extension:

```` yaml
``` { .yaml .annotate }
# Code block content
```
````

Note that the language shortcode which has to come first must now also be 
prefixed by a `.`.

Usage

This section discusses how to use different syntax highlighting features with Pygments – the default highlighter – so they don't apply when using a JavaScript syntax highlighter.

Specifying the language

Code blocks must be enclosed with two separate lines containing three backticks. To add syntax highlighting to those blocks, add the language shortcode directly after the opening block. See the list of available lexers to find the shortcode for a given language.

Example:

``` python
import tensorflow as tf
```

Result:

import tensorflow as tf

Adding annotations

Code annotations can be placed anywhere in a code block where a comment for the language of the block can be placed, e.g. for JavaScript in #!js // ... and #!js /* ... */, for Yaml #!yaml # ..., etc.¹

Example:

``` yaml
theme:
  features:
    - content.code.annotate # (1)
```

1.  :man_raising_hand: I'm a code annotation! I can contain `code`, __formatted
    text__, images, ... basically anything that can be expressed in Markdown.

Result:

theme:
  features:
    - content.code.annotate # (1)

1. :man_raising_hand: I'm a code annotation! I can contain code, formatted text, images, ... basically anything that can be expressed in Markdown.

Adding line numbers

Line numbers can be added to a code block by using the linenums="<start>" option directly after the shortcode, whereas <start> represents the starting line number. A code block can start from a line number other than 1, which allows to split large code blocks for readability.

Example:

``` python linenums="1"
def bubble_sort(items):
    for i in range(len(items)):
        for j in range(len(items) - 1 - i):
            if items[j] > items[j + 1]:
                items[j], items[j + 1] = items[j + 1], items[j]
```

Result:

def bubble_sort(items):
    for i in range(len(items)):
        for j in range(len(items) - 1 - i):
            if items[j] > items[j + 1]:
                items[j], items[j + 1] = items[j + 1], items[j]

Highlighting specific lines

Specific lines can be highlighted by passing the line numbers to the hl_lines argument placed right after the language shortcode. Note that line counts start at 1, regardless of the starting line number specified as part of linenums.

=== "Line numbers"

_Example_:

```` markdown
``` python hl_lines="2 3"
def bubble_sort(items):
    for i in range(len(items)):
        for j in range(len(items) - 1 - i):
            if items[j] > items[j + 1]:
                items[j], items[j + 1] = items[j + 1], items[j]
```
````

_Result_:

``` python hl_lines="2 3"
def bubble_sort(items):
    for i in range(len(items)):
        for j in range(len(items) - 1 - i):
            if items[j] > items[j + 1]:
                items[j], items[j + 1] = items[j + 1], items[j]
```

=== "Line ranges"

_Example_:

```` markdown
``` python hl_lines="2-5"
def bubble_sort(items):
    for i in range(len(items)):
        for j in range(len(items) - 1 - i):
            if items[j] > items[j + 1]:
                items[j], items[j + 1] = items[j + 1], items[j]
```
````

_Result_:

``` python hl_lines="2-5"
def bubble_sort(items):
    for i in range(len(items)):
        for j in range(len(items) - 1 - i):
            if items[j] > items[j + 1]:
                items[j], items[j + 1] = items[j + 1], items[j]
```

Highlighting inline code blocks

When InlineHilite is enabled, syntax highlighting can be applied to inline code blocks by prefixing them with a shebang, i.e. #!, directly followed by the corresponding language shortcode.

Example:

The `#!python range()` function is used to generate a sequence of numbers.

Result:

The #!python range() function is used to generate a sequence of numbers.

Embedding external files

When Snippets is enabled, content from other files can be embedded, which is particularly useful to reference and embed the contents of source files directly in a document without copying.

Example:

```
--8<--​ ".browserslistrc"
```

Result:

last 4 years

Customization

Custom syntax theme

:octicons-file-code-24: Source · :octicons-mortar-board-24: Difficulty: easy

If Pygments is used, Material for MkDocs provides the [styles for code blocks] Source, which are built with a custom and well-balanced palette that works equally well for both color schemes:

• :material-checkbox-blank-circle:{ style="color: var(--md-code-hl-number-color) " } --md-code-hl-number-color
• :material-checkbox-blank-circle:{ style="color: var(--md-code-hl-special-color) " } --md-code-hl-special-color
• :material-checkbox-blank-circle:{ style="color: var(--md-code-hl-function-color) " } --md-code-hl-function-color
• :material-checkbox-blank-circle:{ style="color: var(--md-code-hl-constant-color) " } --md-code-hl-constant-color
• :material-checkbox-blank-circle:{ style="color: var(--md-code-hl-keyword-color) " } --md-code-hl-keyword-color
• :material-checkbox-blank-circle:{ style="color: var(--md-code-hl-string-color) " } --md-code-hl-string-color
• :material-checkbox-blank-circle:{ style="color: var(--md-code-hl-name-color) " } --md-code-hl-name-color
• :material-checkbox-blank-circle:{ style="color: var(--md-code-hl-operator-color) " } --md-code-hl-operator-color
• :material-checkbox-blank-circle:{ style="color: var(--md-code-hl-punctuation-color) " } --md-code-hl-punctuation-color
• :material-checkbox-blank-circle:{ style="color: var(--md-code-hl-comment-color) " } --md-code-hl-comment-color
• :material-checkbox-blank-circle:{ style="color: var(--md-code-hl-generic-color) " } --md-code-hl-generic-color
• :material-checkbox-blank-circle:{ style="color: var(--md-code-hl-variable-color) " } --md-code-hl-variable-color

Code block foreground, background and line highlight colors are defined via:

• :material-checkbox-blank-circle:{ style="color: var(--md-code-fg-color) " } --md-code-fg-color
• :material-checkbox-blank-circle:{ style="color: var(--md-code-bg-color) " } --md-code-bg-color
• :material-checkbox-blank-circle:{ style="color: var(--md-code-hl-color) " } --md-code-hl-color

Let's say you want to change the color of #!js "strings". While there are several types of string tokens, they use the same color. You can assign a new color by using an additional stylesheet:

:root > * {
  --md-code-hl-string-color: #0FF1CE;
}

If you want to tweak a specific type of string, i.e. #!js `backticks` , you can lookup the specific class name in the syntax theme definition, and override it as part of your additional stylesheet:

.highlight .sb {
  color: #0FF1CE;
}

---

1. Code annotations require syntax highlighting with Pygments – they're currently not compatible with JavaScript syntax highlighters. Support will be added at a later point, allowing to always place code annotations at the end of lines. ↩︎