How to override the default code block to add clipboard.js button?

support
1

Hello, from what I read online, it’s a file that needs to be placed in the layouts/_default/_markup/ folder. I think its name is render-codeblock.html, but the problem is I can’t find the original file. I would like to add a button to all of my code blocks so I can use clipboard.js. I would be grateful for any suggestions.

2

https://discourse.gohugo.io/t/copy-to-clipboard-from-code-highlight-context/49633/4

1 Like
3

This question may sound silly, but does a fenced code block refer to the ones inserted using three backticks (```) ? If yes, then I guess clipboard.js doesn’t work with the highlight shortcode in Hugo.

4

Yes. The terminology is from the CommonMark specification.
https://spec.commonmark.org/0.31.2/#fenced-code-blocks

5

They can certainly work together, but the example above is about fenced code blocks.

A fenced code block is preferable to a shortcode because the resulting markdown is portable to other applications (e.g., GitHub, GitLab, Obsidian, Typora, VS Code, etc.).

1 Like
6

Thank you for the clarification. I didn’t know about this. I think I need to enable fenced code blocks in hugo.toml because it’s not activated. I only have pygmentsUseClasses enabled.

7

First, fenced code blocks are enabled by default.

Second, pygmentsUseClasses in the root of your site configuration doesn’t do anything.

This is the default syntax highlighting configuration:

https://gohugo.io/getting-started/configuration-markup/#highlight

8

If I don’t have pygmentsUseClasses set to true, then syntax.css is not used, I mean the css file generated with hugo gen chromastyles --style=monokai > syntax.css.

I think I need this instead if I want to use a separate css file:

[markup]
  [markup.highlight]
    noClasses = false

Am I right?

9

I’m not sure if code fences work in Org files. I need to check, but so far the code displays in a paragraph when backticks are inserted.

10

Correction. We’re still reading the legacy configuration keys…

https://github.com/gohugoio/hugo/blob/1e690c0f2311ae657fa024eae3f3b8a111e2e4c3/markup/highlight/config.go#L161-L189

…but you should use the current configuration keys instead:

Legacy config key New config key
pygmentsCodeFences markup.highlight.codeFences
pygmentsCodefencesGuessSyntax markup.highlight.guessSyntax
pygmentsStyle markup.highlight.style
pygmentsUseClasses markup.highlight.noClasses

Note that you must negate the boolean value with the last one.

1 Like
11

So… that little bit of information changes the entire discussion:

  1. You can’t use fenced code blocks in Org files.
  2. Render hooks are only applicable to Markdown.

In Org mode you would typically do something like this to highlight code:

#+begin_src go
fmt.Println("Hello world.")
#+end_src

Which is rendered to:

<div class="src src-go">
  <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-go" data-lang="go"><span style="display:flex;"><span><span style="color:#a6e22e">fmt</span>.<span style="color:#a6e22e">Println</span>(<span style="color:#e6db74">&#34;Hello world.&#34;</span>)</span></span></code></pre></div>
</div>

You would have to modify the JS to add a button to the DOM.

1 Like
12

Thank you. That makes sense. Then I will try to insert the button via the DOM.
At least I’m glad I learned something new. I wasn’t aware of the new syntax. I’ll modify hugo.toml and remove pygmentsUseClasses then.

13

You could also override Hugo’s embedded highlight shortcode to include a button element. Shortcodes are parsed regardless of content format (i.e., they work in Markdown, AsciiDoc, Org, etc.).

1 Like
14

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