HUGO

Provide hl_lines option in code fences

I’m aware that Hugo allows the hl_lines option to be passed to Pygments using this syntax:

{{< highlight js "linenos=inline,hl_lines=2 3" >}}
console.log('hello');
alert('hello 1');
alert('hello 2');
{{< / highlight >}}

However, some systems allow code fences to also specify line numbers to highlight, like this:

 ```js{2,3}
console.log('hello');
alert('hello 1');
alert('hello 2');
For example, see https://zpao.com/posts/adding-line-highlights-to-markdown-code-fences/. This is the approach I'm using on one of my Jekyll sites at the moment.

Is there a way to achieve the same thing using Hugo? More concretely, is there a way to modify the built-in code fence handling to also allow highlighted line numbers to be passed in?

Thanks!

Are you trying to do this on the server or on the client? If using Hugo’s native Pygments support:

On the server.

I already mentioned that in my post. My question was around using the hl_lines option in conjunction with code fences, which is not explained in the documentation.

Oops. I saw “highlight js” and thought of highlight.js. Long day.

To my knowledge, this would be a feature request since the last modification to highlight is what we’ve both already now mentioned. Sorry can’t be of more help. Cheers.

The feature was requested in this issue: https://github.com/gohugoio/hugo/issues/6355

There is a Pull Request which addresses this: https://github.com/gohugoio/hugo/pull/6484

This adds Goldmark as the new default Markdown handler in Hugo. Goldmark supports the hl_lines attribute.

Please excuse the necro-threading here, but I appear to be missing something. Based on the above, with Goldmark I should be able to highlight a line in a code block like this, right?

```bash {hl_lines="3"}
A line
another line
A highlighted line
Ooh, that was neat.
Here, have a $var
```

In my testing, the only way I’ve been able to highlight a line is with a custom shortcode.

```bash {hl_lines=[3]}
A line
another line
A highlighted line
Ooh, that was neat.
Here, have a $var

https://gohugo.io/content-management/syntax-highlighting/#highlighting-in-code-fences

Unfortunately, simply changing "" to [] does not resolve this issue in my instance.

Then there is something different about your project.

git clone --single-branch -b hugo-forum-topic-5607 https://github.com/jmooring/hugo-testing hugo-forum-topic-5607
cd hugo-forum-topic-5607
hugo server

Feel free to share a link to the public repository for your project; perhaps we can find what’s different.