Codeblock Shortcode

The codeblock shortcode provides a fully styled code display with:

It is used to show clean code examples in your blog.

Usage

1
2
3
{{< codeblock lang="javascript" >}}
console.log("Hello World");
{{< /codeblock >}}

**Table:** Codeblock Parameters
Parameter	Required	Default	Description
lang	Yes	-	Programming language used for syntax highlighting
Inner content	Yes	-	The code to be displayed inside the block

The Sans theme uses the monokai highlighter by default. You can change the code highlighter and other params in hugo.toml.

1
2
3
4
  [markup.highlight]
    style = "monokai"
    lineNos = true
    lineNumbersInTable = true

1
2
3
4
5
6
{{< codeblock lang="javascript" >}}
function hello() {
  console.log("Hello World");
}
hello();
{{< /codeblock >}}

1
2
3
4
5
6
{{< codeblock lang="python" >}}
def greet(name):
    return f"Hello, {name}"

print(greet("World"))
{{< /codeblock >}}

1
2
3
4
5
{{< codeblock lang="html" >}}
<div class="card">
  <p>Hello!</p>
</div>
{{< /codeblock >}}

1
2
3
4
5
{{< codeblock lang="go" >}}
{{< admonition type="info" >}}
This is inside an admonition block.
{{< /admonition >}}
{{< /codeblock >}}