Create explanatory code blocks, more powerful than normal code blocks.

Syntax # 

{{< code >}}
...content
{{< /code >}}

Options #

  • id: Unique identifier. (optional)
  • class: Additional CSS classes. (optional)
  • hl: Highlighted lines. (optional)
  • lang: Language type. By default: html. (optional)
  • example: Interpret example code, only valid for html (mandatory in all cases), css and javascript: true, false. By default: false (optional)

Tab options #

  • Get 0: Language type. By default: html. (optional)
  • Get 1: File name. (optional)

Example # 

{{< code >}}
...content
{{< /code >}}

...content

Code with example # 

{{< code example=true >}}
A paragraph with a <strong>Bold</strong> and an <em>Italic</em>
{{< /code >}}
A paragraph with a Bold and an Italic 
A paragraph with a <strong>Bold</strong> and an <em>Italic</em>

Code explained # 

{{< code lang="js" >}}
document.querySelector("body");
<---->
This code is selecting the body of the document.
{{< /code >}}

document.querySelector("body");
This code is selecting the body of the document.

Code with tabs # 

{{< code >}}
{{< tab "html" >}}
...content
{{< /tab >}}
{{< tab "css" >}}
...content
{{< /tab >}}
{{< tab "js" "main.js" >}}
...content
{{< /tab >}}
{{< /code >}}

...content
...content
...content