Provide hl_lines option in code fences

support
1

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!
2

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

3

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.

4

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.

5

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.

6

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.

7 
```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

8

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

9

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.