Beautiful Hugo supports two syntax highlighting engines: Hugo’s built-in Chroma (default) and client-side Highlight.js. This page demonstrates Chroma, which is fast and built when the page renders.
Required Config
Beautiful Hugo supports two syntax highlighting engines: Hugo’s built-in Chroma (default) and client-side Highlight.js. See Configuration — Syntax Highlighting for the required hugo.toml settings for each engine.
Fenced Code Blocks
Use triple backticks with a language identifier, like this:
```json
{
"example": "code"
}
```
{
"example": "code"
}
# python
def fibonacci(n):
"""Return the nth Fibonacci number."""
if n <= 1:
return n
a, b = 0, 1
for _ in range(2, n + 1):
a, b = b, a + b
return b
// go
package main
import "fmt"
func main() {
ch := make(chan string)
go func() { ch <- "hello" }()
fmt.Println(<-ch)
}
// javascript
const greet = (name) => {
console.log(`Hello, ${name}!`);
};
greet("World");
# toml
[Params]
subtitle = "My Site"
colorScheme = "auto"
selfHosted = false
Line Numbers
Use Hugo’s highlight shortcode with linenos to add line numbers:
{{< highlight python "linenos=table" >}}
def quicksort(arr):
...
{{< /highlight >}}
| |
Inline line numbers:
{{< highlight go "linenos=inline" >}}
func reverse(s string) string {
...
{{< /highlight >}}
1func reverse(s string) string {
2 runes := []rune(s)
3 for i, j := 0, len(runes)-1; i < j; i, j = i+1, j-1 {
4 runes[i], runes[j] = runes[j], runes[i]
5 }
6 return string(runes)
7}Line Highlighting
Use hl_lines to emphasize specific lines:
{{< highlight python "linenos=table, hl_lines=3 4" >}}
def process(data):
result = []
for item in data: # highlighted
result.append(item) # highlighted
return result
{{< /highlight >}}
| |
Copy Button
Every code block automatically gets a copy-to-clipboard button in the top-right corner. Hover over any code block on this page to see it. The button strips line numbers before copying.
Including External Files
The include-code shortcode reads a source file from your project and renders it with syntax highlighting. It respects the same Chroma/HLJS setting as fenced code blocks.
{{< include-code file="hugo.toml" >}}
With explicit language and line options (Chroma only):
{{< include-code file="hugo.toml" language="toml" linenos="table" hl_lines="3-5" >}}
Live example
This page includes the example site’s own hugo.toml:
# This gets overridden when building for production
baseurl = "http://localhost:1313/"
DefaultContentLanguage = "en"
title = "Beautiful Hugo"
enableGitInfo = true
[[module.imports]]
path = "github.com/halogenica/beautifulhugo"
[pagination]
pagerSize = 5
[Services]
[Services.Disqus]
# Shortname = "XXX"
[Services.googleAnalytics]
# id = "XXX"
[taxonomies]
category = "categories"
tag = "tags"
[Params]
subtitle = "Build a beautiful and simple website in minutes"
mainSections = ["post", "recipe"]
logo = "/img/avatar-icon.png" # Expecting square dimensions
favicon = "/img/favicon.ico"
dateFormat = ":date_long"
commit = false
rss = true
readingTime = true
wordCount = true
colorScheme = "auto"
# mathEngine = "katex" # "katex" (default), "mathjax" (CDN only), or "none"
socialShare = true
delayDisqus = true
showRelatedPosts = true
disableFigureOverride = true
headerImgStyle = "narrow"
showSource = true
sourceRepo = "https://github.com/halogenica/beautifulhugo/blob/master/exampleSite/"
comment = "https://github.com/halogenica/beautifulhugo/commit/"
[Params.search]
provider = "fuse"
[[Params.bigimg]]
src = "/img/triangle.jpg"
desc = "Triangle"
[[Params.bigimg]]
src = "/img/sphere.jpg"
desc = "Sphere"
position = "center top"
[[Params.bigimg]]
src = "/img/hexagon.jpg"
desc = "Hexagon"
#[Params.AISearchSummary.Googlebot]
#summaryLimit = 150
#[Params.AISearchSummary.robots]
#summaryLimit = 300
[Params.author]
name = "Some Person"
website = "yourwebsite.com"
email = "youremail@domain.com"
github = "username"
twitter = "username"
linkedin = "in/username" # company/username
[markup.highlight]
noClasses = false
[markup.goldmark.parser.attribute]
block = true
[markup.goldmark.renderer]
unsafe = true
[[menu.main]]
identifier = "setup"
name = "Setup"
weight = 1
[[menu.main]]
parent = "setup"
name = "Configuration"
url = "page/configuration/"
weight = 1
[[menu.main]]
parent = "setup"
name = "Pages & Layouts"
url = "page/pages-and-layouts/"
weight = 2
[[menu.main]]
parent = "setup"
name = "Theming"
url = "page/theming/"
weight = 3
[[menu.main]]
parent = "setup"
name = "SEO & i18n"
url = "page/seo-and-i18n/"
weight = 4
[[menu.main]]
parent = "setup"
name = "Comments & Social"
url = "page/comments-and-social/"
weight = 5
[[menu.main]]
identifier = "features"
name = "Features"
weight = 2
[[menu.main]]
parent = "features"
name = "Shortcodes"
url = "page/shortcodes/"
weight = 1
[[menu.main]]
parent = "features"
name = "Code Blocks"
url = "page/code-blocks/"
weight = 2
[[menu.main]]
parent = "features"
name = "Markdown Extensions"
url = "page/markdown-extensions/"
weight = 3
[[menu.main]]
parent = "features"
name = "Figures & Galleries"
url = "page/figures-and-galleries/"
weight = 4
[[menu.main]]
parent = "features"
name = "Math & Diagrams"
url = "page/math-and-diagrams/"
weight = 5
[[menu.main]]
identifier = "blog"
name = "Blog"
weight = 3
[[menu.main]]
parent = "blog"
name = "Posts"
url = "post/"
weight = 1
[[menu.main]]
parent = "blog"
name = "Tags"
url = "tags/"
weight = 2
[[menu.main]]
parent = "blog"
name = "Categories"
url = "categories/"
weight = 3
[[menu.main]]
parent = "blog"
name = "Archives"
url = "archives/"
weight = 4
[[menu.main]]
name = "About"
url = "page/about/"
weight = 4
[outputs]
home = ["HTML", "RSS", "JSON"]
section = ["HTML", "RSS", "JSON"]
page = ["HTML"]
With line numbers and highlighted lines:
| |
The file path is relative to the Hugo project root. If language is omitted, it is auto-detected from the file extension. See Configuration for the full parameter reference.
Inline Code
Use backticks for inline code: hugo serve -D or console.log("hello").