Hudocs uses Hugo’s fenced code blocks to display code examples. In addition to syntax highlighting, these blocks let you customize their presentation using different options.

This page covers some of the most useful options. To see all available options, check the official Hugo documentation.

File name #

You can display the file name at the top of a code block using filename.

const app = document.querySelector("#app");

app.textContent = "Hello, world!";

Line numbers #

You can display numbers next to each line of code.

1
2
3
4
5

<!-- Comments -->
<main class="hero">
  <h1>Welcome to Hudocs</h1>
  <p>Build beautiful documentation with Hugo.</p>
</main>

You can also display them inline inside the block using inline.

1.hero {
2  display: grid;
3  gap: 1rem;
4  max-width: 40rem;
5}

Highlight lines #

The hl_lines option lets you highlight specific lines in a block.

greeting = "Hello World"
name = "Daniel"

print(f"{greeting}, {name}")

You can also highlight a range of lines.

{
  "name": "hudocs",
  "version": "2.0.0",
  "license": "MIT"
}

Change the starting line #

When line numbers are shown, lineNoStart lets you set the number of the first line.

10
11
12
13

func main() {
    message := "Hello, world!"
    fmt.Println(message)
}

The block above starts at line 10.

Line anchors #

You can turn line numbers into anchors using anchorLineNos.

1
2

hugo new content/docs/getting-started.md
hugo server

lineAnchors lets you add a prefix to those identifiers. This is useful when a page contains multiple blocks with line numbers.

1
2
3
4
5

markup:
  highlight:
    noClasses: false
    lineNos: true
    lineNumbersInTable: true

Copy to clipboard #

Hudocs automatically injects a copy-to-clipboard button into all syntax-highlighted code blocks.

  • The button provides localized feedback (Copied! or Error) through tooltips.
  • When copying from blocks with line numbers enabled, line number prefixes (.ln) are automatically stripped, ensuring only clean code is copied.

Code theme #

Hudocs includes Duotone themes for code blocks. The theme is set in the site’s hugo.toml file and applies to all syntax-highlighted code generated by Hugo and Chroma.

[params]
  code_theme = "duotone-dark-sea"

The available themes are duotone-dark, duotone-dark-sky, duotone-dark-sea, duotone-dark-space, duotone-dark-earth, and duotone-dark-forest. The default is duotone-dark, which uses the Sky palette. An unknown value falls back to the default theme.

The code theme is independent of the site’s light or dark mode. It is a site configuration option, not a visitor-facing selector, and it does not modify Hugo’s highlighting engine or the code block options described above.

These are just some of the options available for code blocks. Check the Hugo syntax highlighting documentation to learn about the rest.