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.
If your Chromium browser doesn’t allow bookmarklets (like Arc), download the CodeCleaner extension version and follow the instructions here.
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.