Introducing a Copy Code Button Plugin for TiddlyWiki: Enhancing Code Sharing and Efficiency

e0b66701-7b36-4f9a-90fe-b4d9fb3d84bc (1)

Link

This plugin is designed to add a copy code button to code blocks in TiddlyWiki, making it easier to copy code snippets with their formatting and indentation intact. In TiddlyWiki, code blocks are typically wrapped in the <pre> tag to preserve their formatting and indentation. However, copying the code manually can be inconvenient.

This plugin solves this problem by adding a “Copy Code” button next to the code block. Clicking the button copies the code to the clipboard, and the copied code is also displayed in a popup using the SweetAlert2 plugin, making it easy to verify that the code was copied successfully.

This plugin can greatly improve the efficiency and convenience of displaying and sharing code in TiddlyWiki, especially when you need to copy code frequently.

The only downside at the moment is that the copy button needs to be manually triggered for display.

3 Likes

You can also use the Motion plugin to show copy code button now, just need press g mshortcuts to toggle the display of the code copy button

Looks good but Where is it? It don’t seem to exist in your link

And Demo link in that site link to https://oeyoews.github.io/neotw/#: which don’t have any content other than comments…

Updated

21347e52-af56-4f2b-a661-531f1d01bc2b (2)

1 Like

Looks good, and does not require patching CodeBlock widget. While cravat is it requires additional click to show button. But idea is good.

Well done!

But a little bit much bling and external dependencies for my personal taste.

Those UI effects are optional,Of course, it can also be removed.

Well, I finally rewrote the codeblock widget. I didn’t want to manually trigger the button to start copying the code every time.

2 Likes

Icons basically support all language types recognized by highlight.js. If the language type is empty, tiddlywiki’s log will be used by default.

Thank you for the plugin @oeyoews. Am I right that it is the first plugin that does that?

Is the plugin supposed to be also usable independently of neotw or its components?

I tried it on an empty tw with the following results (without/with highlight.js plugin):
without-hjs with-hjs
The tiny button does work.

The styles are written using tailwindcss, and the icons are supported by iconify

tailwindcss plugin: tailwindcss plugin
iconify plugin: iconify

ps: It is completely possible not to rely on additional plug-ins, it just requires extra time, and I don’t plan to do so for the time being.