anchorLineNos = true for multiple code blocks

support
1

Hi.

Not sure if this has been covered before, but I just added multiple code blocks on the same page and have added anchorLineNos = true. This doesn’t generate unique IDs, thus always the first available line number is the one the browser scrolls to.

The only workaround I know around this is to specify line starting numbers for each of the code blocks and make sure they’re different. It can’t always be used especially if the code blocks are of different languages. Instead of this, it would be better if IDs are generated something like #count-of-codeblock-1 where count-of-codeblock could be replaced with the position of codeblock on page or maybe a custom name that we can specify.

Here’s an example of the problem: Hugo + FlexSearch.js | Hrishikesh Kokate

2

Use the shortcode instead of the three backticks should work or make it less complicated to adjust this. I made my own shortcode when I ran into the same (I think) issue, but can’t find it right now… probably for a customer. If I find it I’ll add a link here.

Take the code above and save in layouts/shortcodes/highlight.html and then add parameters. A random ID can be generated with the following snippet:

{{ $seed := printf "%s%s" site.Title now.Unix }}
{{ $random := delimit (shuffle (split (md5 $seed) "" )) "" }}
{{ $limit := .limit | default 12 }}
{{ return substr $random 0 $limit }}

put into layouts/partials/func/getRandomString.html and load via

{{- $random := partialCached "func/getRandomString" (dict "limit" 8) -}}
3

I had thought of using a custom shortcode, but didn’t know how to generate the IDs. Your solution is great as always!

P.S.: Can this be considered as a feature request so that in future versions, we don’t have to go around this using custom code?

4

My own opinion, I am not a Hugo developer: No. :wink: I am not a fan of these internal templates and shortcodes. If you look for issues with for instance the Instagram shortcode and now newly the Twitter shortcode and look for issues with Google Analytics and it’s new formats and tracking codes it becomes quite clear, that this is an immense amount of developer hours that has to go into adding, maintaining these snippets. And that’s not what Hugo is for. I sometimes feel like Hugo as a car manufacturer, that gives you for some of your “drive to targets” a driver and others it doesn’t. I never use internal templates… But as I wrote, that is only my opinion.

These internal layouts stem from a time, where Hugo was used by a small group of techies and everyone basically used the same features. It is more mature now and IMHO it’s much easier to create a sample layout somewhere that people can copy into their projects for things like this.

Last point: I would assume that Goldmark at some point starts adding ids, classes and so on to markdown, the same way as it now allows that for headers only. That would be the point where the circle closes, because then you can go back to the three backticks and just add your own ID.

1 Like
5

That does make a lot of sense. I never had to use other Hugo internal shortcodes till now, so didn’t really know about that part.

Hugo is great at what it does, so a little work on my end is no big deal and the of course, there’s this great community to help.

6

@davidsneighbour

I finally tried the solution you suggested but I can’t seem to get it work.

I did the following:

This is how my shortcodes/highlight.html looks:

{{- $random := partialCached "func/getRandomString" (dict "limit" 8) -}}
{{ if len .Params | eq 2 }}
	{{ highlight (trim .Inner "\n\r") (.Get 0) (.Get 1) }}
{{ else }}
	{{ highlight (trim .Inner "\n\r") (.Get 0) "" }}
{{ end }}

and this is how my partials/func/getRandomString.html looks:

{{ $seed := printf "%s%s" site.Title now.Unix }}
{{ $random := delimit (shuffle (split (md5 $seed) "" )) "" }}
{{ $limit := .limit | default 12 }}
{{ return substr $random 0 $limit }}

and changed all (```) to {{< highlight >}} but the IDs are still the same. What did I miss?

7

Allows for caching of partials that do not need to be re-rendered on every invocation

8

@ju52 I tried to change it to just partial, but that didn’t work either.

9

After some time of trying to understand the code, I think I might have realised what it’s doing. It’s just generating random values based on Site Title and current Unix time, I guess? Maybe I need to replace the original IDs with these randomly generated ones? If this part is correct, I still don’t know how to do it. :frowning:

10

Hmm… I thought that the highlight shortcode has some form of loop where you could add it. Let me get back to you with a template. Right now you don’t “hand over” $random to the shortcode creation.

11

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.