Code blocks Material

Syntax

Form	Syntax	Usage
Langage	fence `js`	Coloration syntaxique.
Title	fence `py title="app.py"`	File name.
Numbers	`linenums="1"`	Numbertation.
Surlignage	`hl_lines="2 4-6"`	Highlighted lines.
Attributes	fence `{ .yaml linenums="1" }`	Syntax Material.
Copie	`no-copy`	Copy button hidden.
Shell	fence `bash-root`	Root prompt.
Annotation	`# (1)` then `1. Explanation`	Code bubble.

Title

SyntaxResult

~~~ py title="bubble_sort.py"
def bubble_sort(items):
    return items
~~~

bubble_sort.py

def bubble_sort(items):
    return items

Line numbers and highlighting

SyntaxResult

~~~ py linenums="1" hl_lines="2 3"
def bubble_sort(items):
    for i in range(len(items)):
        print(i)
    return items
~~~

def bubble_sort(items):
    for i in range(len(items)):
        print(i)
    return items

Attributes in braces

SyntaxResult

~~~ { .yaml .copy title="config.yml" linenums="3" hl_lines="4" }
site_name: Demo
theme:
  name: material
~~~

config.yml

site_name: Demo
theme:
  name: material

No copy

SyntaxResult

~~~ { .bash .no-copy title="install.sh" }
npm install
npm run build
~~~

install.sh

npm install
npm run build

Bash root

SyntaxResult

~~~bash-root
apt update
apt install nginx
systemctl restart nginx
~~~

Super utilisateur

apt update
apt install nginx
systemctl restart nginx

File tabs

SyntaxResult

=== "app.py"

    ~~~ py title="app.py" linenums="1" hl_lines="4"
    from fastapi import FastAPI

    app = FastAPI()
    app.title = "Demo"
    ~~~

=== "config.yml"

    ~~~ yaml title="config.yml" linenums="1"
    site_name: Demo
    theme:
      name: material
    ~~~

=== "package.json"

    ~~~ json title="package.json" no-copy
    {
      "scripts": {
        "dev": "astro dev"
      }
    }
    ~~~

app.pyconfig.ymlpackage.json

from fastapi import FastAPI

app = FastAPI()
app.title = "Demo"

site_name: Demo
theme:
  name: material

{
  "scripts": {
    "dev": "astro dev"
  }
}

Annotations

SyntaxResult

~~~ yaml title="mkdocs.yml"
theme:
  name: material # (1)
  features:
    - content.code.copy # (2)
~~~

mkdocs.yml

theme:
  name: material # (1)
  features:
    - content.code.copy # (2)