Hugo Syntax Highlighting
The problem
I wanted to implement something similar to the look of the Admonitions in Hugo design for wrapping syntax highlighted code blocks.
Configuration
The first thing I did was configure a few things in the configuration file:
config.toml
PygmentsCodeFences = true
pygmentsstyle = "borland"
Note
Note
Check out this Pygments style demo page
to determine the setting for the
pygmentsstyle option.The research
This time I created the shortcode file first.
layouts/shortcodes/hl.html
{{ $file := .Get "f" }}
{{ $title := .Get "t" }}
{{ $lang := .Get "l" }}
<div class="syntax-highlight">
{{ if and $title $file }}
<div class="title">{{- $title -}} [ {{- $file -}} ]</div>
{{ else if $title }}
<div class="title">{{- $title -}}</div>
{{ else if $file }}
<div class="title">{{- $file -}}</div>
{{ end }}
<div class="content">
{{- highlight .Inner $lang "" -}}
</div>
</div>
I used the sorce from the hugo website implementation of the code shortcode in which they used the highlight function inside the template.
The solution
In combination with the shortcode template above and implementation is very similar to the solution mentioned in the Admonitions in Hugo article, and only needs the follow styles.
static/css/syntax-highlight.css
.syntax-highlight {
border: 5px solid transparent;
border-left: 10px solid transparent;
border-color: #f9f9f9;
}
.syntax-highlight .title {
background-color: #f9f9f9;
padding-left: .5em;
border: 1px solid;
border-style: hidden hidden solid;
}
.syntax-highlight .content {
background-color: #ffffff;
padding-left: .1em;
padding-bottom: .1em;
}
.syntax-highlight pre {
background-color: #ffffff;
}
.syntax-highlight pre code {
background-color: #ffffff;
}
Then using the code:
{{< hl l="go" >}}
func(this *test) name(arg1 string) (string, error) {
return "", nil
}
{{< /hl >}}
Generates a code section like this:
func(this *test) name(arg1 string) (string, error) {
return "", nil
}
The variations
And the following show all the variations of this implementation.
with a title
Example go function
func(this *test) name(arg1 string) (string, error) {
return "", nil
}
with a file name
something.go
func(this *test) name(arg1 string) (string, error) {
return "", nil
}
with a title and filename
Example go function [ something.go ]
func(this *test) name(arg1 string) (string, error) {
return "", nil
}