Customise highlight div

support
1

I have .md files and use the three backtick notation to format code blocks. When I run hugo the html created has

<div class="highlight">...</div>

I would like to modify the conversion from md to html so that I can add a “collapse this code” button (using this as a template)

So I would like to get the hugo-converted html to be:

<button type="button" class="collapsible">View code</button>
<div class="highlight">...</div>

I can add the <script> and css elements but I would have to include the <button> for every code block manually, and it would be nicer if it could be automated. Is the highlight div created by a shortcode (or something else) that I can overwrite? Is there a ‘correct’ way to do something like this?

(The linked example works with my site, but it is not generalised for all code blocks)

Thank you,

Chris

2

You could use a shortcode instead. This is the built in one, which you could override to do whatever you want: https://gohugo.io/content-management/syntax-highlighting/#highlight-shortcode

Highlighting using code fences (the backticks) is handled by the markdown renderer otherwise.

3

Thank you, yes I had seen this and it would be a straightforward change. The complication for most of my md files is that they are converted from Rmd to md via knitr/knit. So the backtick notation is produced by that package. I could edit the md file after knitr has written it to use the shortcode nomenclature though, which may not be too complicated.