# Customise highlight div

**URL:** <https://discourse.gohugo.io/t/customise-highlight-div/28016>\
**Category:** support\
**Created:** [September 4, 2020, 5:52pm UTC](https://discourse.gohugo.io/t/customise-highlight-div/28016 "2020-09-04T17:52:04Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![CBarrington](https://avatars.discourse-cdn.com/v4/letter/c/d6d6ee/32.png) [@CBarrington](https://discourse.gohugo.io/u/CBarrington)\
**Post date:** [September 4, 2020, 5:52pm UTC](https://discourse.gohugo.io/t/customise-highlight-div/28016/1 "2020-09-04T17:52:04Z")

</div>

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

```auto
<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](https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_collapsible))

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

```auto
<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

---

<div class="post-metadata">

**Author:** ![pointyfar](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/pointyfar/32/5797_2.png) [@pointyfar](https://discourse.gohugo.io/u/pointyfar)\
**Post date:** [September 5, 2020, 2:59am UTC](https://discourse.gohugo.io/t/customise-highlight-div/28016/2 "2020-09-05T02:59:52Z")

</div>

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](https://gohugo.io/content-management/syntax-highlighting/#highlight-shortcode)

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

---

<div class="post-metadata">

**Author:** ![CBarrington](https://avatars.discourse-cdn.com/v4/letter/c/d6d6ee/32.png) [@CBarrington](https://discourse.gohugo.io/u/CBarrington)\
**Post date:** [September 8, 2020, 12:32pm UTC](https://discourse.gohugo.io/t/customise-highlight-div/28016/3 "2020-09-08T12:32:01Z")

</div>

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.