WordPress Syntax Highlighter – Use & Customize GISTs

I’ve used many syntax highlighters over the years for pasting and sharing code snippets. In that time I’ve never had any luck with WordPress ones that save the snippets save in post_content. In my experience with it, there seems to be this constant battle for the characters being escaped or not, especially when switching between the Visual/Text tabs frequently.

Until someone builds a module experience in the inline editor (like how the “Image Gallery” displays as a block in TinyMCE, and a lightbox for edit), external posting and embedding of snippets is the way to go.

I’ve done that on this site, using the king, Gist. I used this pluginΒ and a few edits in CSS, WordPress, and to the DOM to get things working how I want.

Anyways, here’s how I do it:

So to get the above, all I did was:

So, just like Youtube videos, a single line URL of a secret gist, and it’ll auto-embed. The post_content action replaces it with what’s required of the gist-embed plugin, you can configure the attributes there to fit your needs. I set a max-height and add a SHOW MORE trigger with basic jQuery and CSS.

You can show a single file of a multi-file gist by manually appending the sensitized filename to the url as an anchor, e.g. #your-file-name.html

UPDATE: This does work with Gutenberg – although GB will try to throw in in an “unknown embed” block, slight tweaking of the regex can still convert via the_content.

Leave a Reply