<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?
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:
Thankfully since the plug-in itself has a page on GitHub I was able to report issue #5 to the maintainer. Looking at the changelog, I just now realize this library hasn’t required an update in 5 years, and still works out of the box ! Being a wordpress plug in that loads content with a github API, both sides of these dependencies have remained stable enough over the last 5 years that old, useful software still works, cheers to that!