Adding Line Numbers to Code Blocks in Hugo

When writing technical blog posts with Hugo, displaying line numbers in code blocks can enhance readability and make code examples more reference-friendly. This guide walks you through the process of enabling line numbers for your code blocks.

Standard Markdown Code Block

A typical code block in markdown looks like this:

print("Hello, World!")

Enabling Line Numbers

To add line numbers, modify the code block’s opening syntax by including the linenos=true option:

print("Hello, World!")

Configuration Considerations

• Line numbering is typically handled by Hugo’s syntax highlighter
• Ensure your Hugo theme supports line numbering
• Check your config.toml or config.yaml for syntax highlighting settings

Troubleshooting

• If line numbers don’t appear, verify:
  1. Your Hugo version supports the feature
  2. Syntax highlighting is enabled in your site configuration
  3. The code block syntax is correctly formatted

Adding line numbers to your Hugo code blocks is straightforward. With the {linenos=true} option, you can create more readable and professional-looking technical documentation.