Conditional Render Hook Code (CodeBlock)

I’m attempting to add Prism syntax highlighting as an option for a theme I’m building. But how would I go about making the layouts/_default/_markup/render-codeblock.html optional?

My first thought was to enclose my custom code in the render-codeblock.html file within a conditional if e.g.:

{{ if eq .Site.Params.prism true -}}
    custom Prism code
{{ end -}}

My (incorrect) assumption was that, if ‘empty’, Hugo would revert to its default highlighting.

But I see now that Hugo still looks to the file for a highlighting config even if empty. How do I replicate the default Chroma configuration inside my custom render-codeblock.html for when Prism is disabled?

My next guess it to use a form of the following:

...
{{ else }}
{{ $result := transform.HighlightCodeBlock . }}
Inner: |{{ $result.Inner | safeHTML }}
{{ end }}

But some advice on whether or not that’s a good idea would be helpful.

Thanks.

HI,
I used the render-codeblock mechanics to do some renderings

ex: for MathJax

```latex
\begin{align}{}_{n}A_{m}&=\int^{\beta}_\alpha (x-\alpha)^n(\beta-x)^mdx\\&=\frac{n}{m+1}\int^{\beta}_\alpha (x-\alpha)^{n-1}(\beta-x)^{m+1}dx\\&=\frac{n}{m+1}{}_{n-1}A_{m+1} \end{align}
```

ànd render-codeblock-latex.html

{{ $class := .Attributes.class | default ""    }}
<div class="latex {{ $class }}">
  $${{.Inner}}$$
</div>

-- add here all scripts

Should world with prism too

Thank you @ju52, but I’m looking more at how best to use Hugo’s default highlighting when I disable my own custom render-codeblock.html.

EDIT: I edit the question to hopefully make that clearer.

This is identical to the default behavior:

layouts/_default/_markup/render-codeblock.html

{{ $result := transform.HighlightCodeBlock . }}
{{ $result.Wrapped }}

@jmooring Awesome!

:pray: A special thank you since this is the umpteenth odd time you’ve helped me solve an issue.

1 Like

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