Server-Side Rendering of Embedded Markdown Code Snippets in WordPress

Because I'm a grumpy old man, I don't use Gutenberg or Block themes on my WordPress. Instead, I write everything in Markdown.

When I write code snippets in Markdown, they look like this:

```php
$a = 1;
echo $a;
if ($a < 5) {
   // Do Something
   return thing( $a, true );
}
```

But I want to render that with code highlighting. I was using the Prismatic Plugin. It is excellent and very customisable. But it uses JavaScript to do the code highlighting. I want to respect my readers' time and battery life; so I'm trying to reduce my dependency on Client-Side rendering.

I've switched to a modified version of WP-GeSHi-Highlight. That turns the above Markdown into:

 PHP$a = 1;

echo $a;

if ($a < 5) {

   // Do Something

   return thing( $a, true );

}

Necessary Changes

When the JetPack Markdown pre-processor encounters a code block, it changes:

```php

into

<pre><code class="language-php">

This means the WP-GeSHi-Highlight detection needs to be changed.

Old version:

 PHPreturn preg_replace_callback(

    "/\s*<pre(?:lang=[\"']([\w-]+)[\"']|line=[\"'](\d*)[\"']"

   ."|escaped=[\"'](true|false)?[\"']|cssfile=[\"']([\S]+)[\"']|\s)+>".

    "(.*)<\/pre>\s*/siU",

   "wp_geshi_store_and_substitute",

   $s

);

New version:

 PHPreturn preg_replace_callback(

    "/\s*<code(?:class=[\"']language\-([\w-]+)[\"']|line=[\"'](\d*)[\"']"

   ."|escaped=[\"'](true|false)?[\"']|cssfile=[\"']([\S]+)[\"']|\s)+>".

    "(.*)<\/code>\s*/siU",

   "wp_geshi_store_and_substitute",

   $s

);

One of those matches looks for escaped= which can be true or false. I always want this to be true so, later in the code, I change a variable from:

 PHP$escaped = trim($match[3]);

To:

 PHP$escaped = true;

Style Changes

By default, everything looks pretty good - but there are a few changes I found necessary to make.

Firstly, there was something weird going on with the line-heights of my style, so I added this to my site's CSS:

 CSS/* GeSHI Highlighter Fixes */

pre:has(> .wp-geshi-highlight-wrap5) {

    line-height: 0;

    padding: 0;

    background: none;

    filter: invert(1);

}

The invert gives it a dark mode.

Secondly, in order to make any changes to the default styles of the highlighter, you need to add the bundled wp-geshi-highlight.css file into your style directory. The plugin will use that if it exists - so you can change font size and padding to be the same as your main theme.

Limitations

There are a few limitations with this approach.

No line-numbers. The plugin looks for something like line="13", but there's no way to add that in Markdown.

GeSHi hasn't received style updates on some languages for quite some time. It hasn't received any significant update since 2019. Which means bugs and security issues are likely.

Language definitions are quite strict. You can use javascript but not json.

The plugin doesn't have any options - nor an easy way to override its settings. So I've monkeypatched everything above. If the plugin updates, I'll need to change my code.

Demos

A few demos - just so you can see what it looks like.

Python

 Python 3#!/usr/bin/env python

from datetime import datetime, timedelta

from mastodon import Mastodon

from bs4 import BeautifulSoup



import config



#  Set up access

mastodon = Mastodon( api_base_url=config.instance, access_token=config.access_token )



#  Get user's info

me = mastodon.me()

my_id = me["id"]

year_joined = me["created_at"].year

Bash

 BASHif [ "$(basename $2)" = "Image.gz" ] || [ "$(basename $2)" = "vmlinuz.efi" ]

then

# Compressed install

  echo "Installing compressed kernel"

  base=vmlinuz

else

# Normal install

  echo "Installing normal kernel"

  base=vmlinux

fi



if [ -f $4/$base-$1 ]; then

  mv $4/$base-$1 $4/$base-$1.old

fi

Rust

 RUST// This is the main function.

fn main() {

    // Print text to the console.

    println!("Hello World!");

}

JavaScript

 JAVASCRIPTif (hour < 18) {

  greeting = "Good day";

  alert( greeting );

}