Where does the <button> element come from in HTML exports?

Help
1

I notice that when I export an MD document that has code blocks to HTML the following element appears right next to the closing of the <code> element:

</code><button class="copy-code-button">Copy</button></pre>

I was under the assumption that this was added by the Pandoc plugin that I use to export as HTML. I had posted a question asking for help with this plugin but then while I was doing some research to solve that problem I found this: https://github.com/superDuperCyberTechno/obsidian-code-copy.

If you notice, it clearly says the following: " This functionality is now built into Obsidian itself so this repo is considered out-of-date". By “this functionality” it seems clear that what is meant is the possibility of adding a button to code blocks to copy the code within.

Now this is giving me a headache. The Pandoc plugin doesn’t seem to allow me to inject the javascript needed to make the buttons work. I’ve read the Pandoc documentation and it seems all I would need to do is to insert -H /CSS_JS/MyJS.js in the field called Extra Pandoc arguments provided in the configuration for the plugin. This is the path to the folder where I keep that .js file.

Now, since that didn’t work, I tried to use another really useful plugin called Obsidian Enhancing Export. This worked much better than the Pandoc plugin. This plugin also has an option to add extra arguments to the basic Pandoc template instruction. So I inserted -H /CSS_JS/MyJS.js and -H /CSS_JS/MyCSS.css in that field and everything seems to work fine. The HTML that is exported contains the custom .css and .js properly injected in the document.

The problem is, though, that this HTML document does not contain any buttons! The <button class="copy-code-button">Copy</button> elements that I see when I generate the HTML using the Pandoc plugin do not show up when the document is generated with the Obsidian Enhancing Export plugin.

I have inspected the json files and the javascript that come with the Pandoc plugin and I can’t see anything that tells me that it injects that button element.

So, the question is, where does this element come from? If it is true that this functionality is now built into Obsidian itself, why is this cancelled when I use the Obsidian Enhancing Export Plugin?

I would appreciate any help you guys can provide. The simplest solution would be perhaps to figure out how to get the Pandoc plugin to work with the Extra pandoc arguments option that is already built in. As I said, this is not working for me. Adding the path to my .js file as -H /CSS_JS/MyJS.js doesn’t generate any error messages but it doesn’t inject anything, either.

I have also been looking for ways to insert the <button class="copy-code-button">Copy</button> elements after every code block using the other plugin but I’m not sure how to do that. I suspect this gets done via javascript. I could do some research and find out how to do this via javascript but it seems to me that if this is already being done either by Obsidian itself or by the Pandoc plugin, I shouldn’t reinvent the wheel.

2

It may be that the plugin that includes the button considers it to be part of the document (or doesn’t think about it) and the one that excludes it considers it part of Obsidian’s interface.

3

That’s what it looks like. For the moment I opted for generating the buttons via JavaScript and using the Obsidian Enhancing Export plugin. The Pandoc plugin doesn’t seem to accept the path to the folder where I keep the JavaScript file. Which is odd because it is the same folder (and thus the same path) where I keep the CSS style sheet and that it doesn’t seem to have trouble finding.

1 Like
4

You can check out the plugin Webpage HTML Export. It is a plugin I develop, and it keeps all interactive elements, styles, and themes intact so you can be sure it will work exactly how it does in obsidian. You can also include an interactive document outline and a dynamic theme-changing toggle on the page.

(It does export the code copy button btw, and the code copy button works!)

It’s called Webpage HTML Export you can find it on Obsidian here or on GitHub here

5

The Button is part of the Obsidian markup for code blocks, and is the element used to present the Copy button when hovering over a code block.

Regarding why it’s cancelled, I’m just guessing, but could it be because that plugin is not hovering when exporting the code?

6

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