Is there a proper way to replace Chroma with Prism highlighting?

support
1

I want to replace Chroma highlighting with Prism. Having looked around on the net, I came stumbled upon this post

that suggests to set codeFences to false. However, if I do that, I can’t pass class="line-numbers" as an attribute to the code fence – that is, I can pass it, but it does not appear in the rendered HTML.

OTOH, if I turn on codeFences, the rendered HTML contains an inline style for the pre element that I not only do not want but also can’t really influence. I guess it comes from Chroma?

So, is there a recommended way to replace Chroma with Prism for highlighting while retaining the attributes passed to the code block?

2

try to change the style

3

Use codeblock render hooks:

4

Example

git clone --single-branch -b hugo-forum-topic-38309 https://github.com/jmooring/hugo-testing hugo-forum-topic-38309
cd hugo-forum-topic-38309
hugo server

Files of interest

  • layouts/_default/_markup/render-codeblock.html
  • layouts/_default/baseof.html

Note that nothing special is required in site configuration.

CSS and JS

Instead of linking to a bunch of separate CSS/JS files via CDN, you could consolidate and host locally using:
https://prismjs.com/download.html

Markdown

```bash {class="line-numbers" data-start="4" data-line="4-5,7"}
declare foo=bar
if [[ "${foo}" == "bar" ]]; then
  echo "${foo}"
fi
exit 0
```

If you have existing markdown with Chroma attributes…

You could add some logic to the code block render hook to translate Chroma attributes to Prism attribues. For example:

Chroma Prism
linenos=true class="line-numbers"
lineNoStart=4 data-start="4"
3 Likes
5

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