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 grate…

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.

[image] zoliky: does a fenced code block refer to the ones inserted using three backticks Yes. The terminology is from the CommonMark specification. https://spec.commonmark.org/0.31.2/#fenced-code-blocks

[image] zoliky: then I guess clipboard.js doesn’t work with the highlight shortcode in Hugo 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 (…

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.

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

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?

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.

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 pygmentsCodeFence…

[image] zoliky: Org files So… that little bit of information changes the entire discussion: You can’t use fenced code blocks in Org files. 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("He…

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.

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

support

jmooring September 21, 2024, 4:36pm 2

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

Topic		Replies	Views
How to add a copy-to-clipboard button to code blocks support	7	3430	May 6, 2024
Add Copy to clipboard button to each highlight code with JavaScript tips & tricks	0	2250	October 1, 2019
Copy button to allow copying the content support	15	7414	December 15, 2021
Highlight: how to not add 'Copy' button automatically support	2	1818	December 11, 2019
How do I put a code window like this in a Hugo post? support	4	198	September 5, 2024

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

Related topics