Bookmarklet: Clean highlighted code for copying

[Tweet : nvALT]

I made a little bookmarklet this morning for cleaning up highlighted code blocks in web pages for copying into my notes. You just click it on any web page and all pre>code blocks and table.highlight elements will be turned into plain text.

Once code blocks are cleaned, double-clicking anywhere in the block will select all the contents of the field.

If this would be of use to you, you can drag the bookmarklet below to your menu bar and try it out. It doesn’t currently work on GitHub in this form, but you can create a local bookmarklet from the source if needed. GitHub, of course, offers raw source easily, so it’s not really a concern.


It’s not heavily tested, so let me know if you see bugs. It also only handles the most common code highlighters, so there are more than likely code blocks it will fail on, but it serves my needs as is.

Side notes: By default it will add code fences (triple backticks), and try to detect the language. If a language is found in the pre or table element’s classes or data-language attribute (falling back to those of the parent div or code tag), it will be added to the opening fence. The source script allows these to be overridden with an options object passed to the main function (e.g. CC.cleaner({fence: false, detectLang: false}), but I don’t currently have that implemented in the bookmarklet version.