Moving from Medium to self hosting wordpress, I was missing one great feature I learned to love: pasting a github url into my blog and having syntax highlighting, line numbers, and automatic updating ‘just work’ — as opposed to using a javascript library that can perform highlighting from markdown, or just pasting source code in <code> blocks without any syntax highlighting.
Worse than that is having to log into wordpress and edit a blog post to make adjustments to the code — once code has been pasted into a blog, when will you notice that it has a typo?
Keeping code snippets as github gists gives me shareable revision history and an easy interface to grab plain text source code, so I can actually use the code that I’m embedding in my blog, and update it all in one place. (One caveat: neither Medium nor this Plugin render anything without javascript enabled — GitHub.com works like a charm without javascript so it would be nice if they could at least fallback on an iframe inside a noscript, but GitHub doesn’t allow gists to appear in iframes, sending a X-Frame-Options: deny header, so it would have to be server-side.)
I was happy to find the WordPress 5 compatible plug in called Gist Github Shortcode. I’m surprised it only has a few hundred active installations because it works great except for one thing, the styling on line numbers was broken! The line number is a :before pseudo element, and the gutter that is supposed to contain it is table data (<td>) , but the psuedo element got painted outside of the layout “flow” and gets clobbered by the source code which is painted right on top.
After fiddling with the display rules for a while I found that applying display: flex to the table row expanded the gutter to almost fit the number, I then had to apply position: relative; right: 0.5em; to shift the number back to the center.
I added this CSS snippet to the “Additional CSS” form on Dashboard -> Customize Your Site and was good to go, here’s a live embedding of the gist shortcode with the style applied: