I’m trying to power-up the built-in Shortcode for highlighting code with Pygments. My plan is to generate something like this HTML:
<figure class="code">
<div class="highlight">
... like actual shortcode ...
</div>
<figcaption>
Listing COUNTER: CAPTION-TEXT
</figcaption>
</figure>
My last problem to solve: Is there a way to get the COUNTER
auto-generated as an integer by hugo?
The figure
-wrapping and the caption is not a problem at all I think, it should be just another parameter in the call of the new paired shortcode.
[update] Solved it using Scratch. Here is my new shortcode called “listing” line-breaks just for being readable:
<figure class="code">
{{ if .Get "config" }}
{{ highlight .Inner (.Get "lang") (.Get "config") }}
{{ else }}
{{ highlight .Inner (.Get "lang") "" }}
{{ end }}
{{ if .Get "caption" }}
<figcaption>
Listing
{{ .Page.Scratch.Add "count" 1 }}
{{ .Page.Scratch.Get "count" }}:
{{ .Get "caption" | markdownify }}
</figcaption>
{{ end }}
</figure>
Usage:
{{< listing lang="shell" config="linenos=inline" caption="Caption." >}}
Your code goes here
{{< / listing >}}