Does Hugo now contain Chroma's HTML formatter?

support
1

Hi all,

I’m using the builtin Chroma as a code highlighter. I recently created a shortcode HTML for collapsing code blocks. It seems Hugo won’t render the styles of code that I put into the shortcode blocks. Is it because Hugo doesn’t include Chroma’s HTML formatter?

Thanks.

2

Can you provide more details? The source of the shortcode and an example of how you use it?

3

Sorry for not being clear. Here’s the part of code in shortcode HTML:

// Omit some irrelevant code...

<div class="code-collapse">
  <pre>{{ .Inner }}</pre>
</div>

And {{ .Inner }} in my-post.md was a block of code that I wanted to highlight:

{{< codecollapse >}}
     ```
     Here is the code block I want to highlight.
     ```
{{< /codecollapse >}}

Problem is, the {{ .Inner }} here will not be rendered by Chroma, unless I manually put the {{ .Inner }} content in my-post.md into {{< highlight css >}} {{< /highlight >}} section like this:

{{< codecollapse >}}
{{< highlight css >}} 
     ```
     Here is the code block I want to highlight.
     ```
{{< /highlight >}}
{{< /codecollapse >}}

It is obvious that Hugo will highlight code in post.md automatically. But does Hugo support highlight {{ .Inner }} through shortcode level automatically?

4

It seems like you need to pass the language somehow and call the highlight function.

Maybe this will help? I use a very similar thing in my own shortcode, but mine creates tabs for different languages rather than collapsing the content.

{{ $code := (strings.TrimPrefix "\n" .Inner) }} {{- /* Trim the empty line that's inserted at the top */ -}}
{{ $lang := .Get 0 }}
{{ $options := .Get 1}}
<div class="code-collapse">
{{ highlight $code $lang $options }}
</div>

If you know you’re never going to use options, you can replace that variable with "" - the highlight function expects 3 arguments.

And then you call it like this:

{{< codecollapse java >}}
public class Hello {
  public static void main(String[] args){
    System.out.print("Hello World");
  }
}
{{< /codecollapse >}}

Result:

image
image939×173 10.1 KB

(the code-collapse div is there)

5

Oh right, my bad, I completely forgot the highlighter is just for markdown and won’t recognize the raw content in HTML directly.

Now this will work. Thanks very much!