Highlighting

Hugo provides the ability for you to highlight source code from within your content. Highlighting is performed by an external python based program called pygments and is triggered via an embedded shortcode. If pygments is absent from the path, it will silently simply pass the content along unhighlighted.

Disclaimers

• Warning Pygments is relatively slow and our integration isn’t speed optimized. Expect much longer build times when using highlighting
• Languages available depends on your pygments installation.
• While pygments supports a few different output formats and options we currently only support output=html, style=monokai, noclasses=true, and encoding=utf-8.
• Styles are inline in order to be supported in syndicated content when references to style sheets are not carried over.
• We have sought to have the simplest interface possible, which consequently limits configuration. An ambitious user is encouraged to extend the current functionality to offer more customization.

Usage

Highlight takes exactly one required parameter of language and requires a closing shortcode.

Example

    {{% highlight html %}}
    <section id="main">
      <div>
       <h1 id="title">{{ .Title }}</h1>
        {{ range .Data.Pages }}
            {{ .Render "summary"}}
        {{ end }}
      </div>
    </section>
    {{% /highlight %}}

Example Output

<span style="color: #f92672"><section</span> <span style="color: #a6e22e">id=</span><span style="color: #e6db74">"main"</span><span style="color: #f92672">></span>
  <span style="color: #f92672"><div></span>
   <span style="color: #f92672"><h1</span> <span style="color: #a6e22e">id=</span><span style="color: #e6db74">"title"</span><span style="color: #f92672">></span>{{ .Title }}<span style="color: #f92672"></h1></span>
    {{ range .Data.Pages }}
        {{ .Render "summary"}}
    {{ end }}
  <span style="color: #f92672"></div></span>
<span style="color: #f92672"></section></span>