Highlighting Lines in Hugo Code Snippets

Hugo makes it quite simple to share code snippets with syntax highlighting on your site, but did you know you can highlight individual lines in code-snippets as well?

Note: Recent Hugo versions use a syntax highlighting engine called Chroma, whereas older Hugo versions used Pygments. However, whether you are using Chroma or Pygments, this feature still works.

When using markdown, the default/simplest approach for highlighting code is simply to use a fenced code block:

``` kotlin
class Person {
  var name: String = ""
  var age: Int = 0

  fun component1() = name
  fun component2() = age
}
```

This results in clean highlighted code with a minimum of ceremony.

class Person {
  var name: String = ""
  var age: Int = 0

  fun component1() = name
  fun component2() = age
}

However, these code fences only support language parameterization. Hugo also allows you to get to more specific features of the highlighter by using the “highlight” shortcode. Specifically, you can request that individual lines be highlighted:

{{< highlight kotlin "hl_lines=5-6" >}}
class Person {
  var name: String = ""
  var age: Int = 0

  fun component1() = name
  fun component2() = age
}
{{< /highlight >}}

This new syntax results in pretty line highlights targeting a code section of interest:

class Person {
  var name: String = ""
  var age: Int = 0

  fun component1() = name
  fun component2() = age
}