Syntax highlighting on vanilla Middleman 4 init and Casper theme

I have a site currently on Ghost and I am evaluating static engines as potential replacements.

I have a site up and running but I cannot get syntax highlighting to work consistently. I have been using the casper blogging theme because I can compare it with my current site. I have also tried using the vanilla site produced with middleman init.

TL;DR: what is the correct way to configure Kramdown syntax highlighting for the Casper theme ?

Given I only started doing this in the last few days everything is operating with the latest versions.

What I’ve worked out is that the CSS instructions don’t work for Middleman 4. I have fixed that so that it works but I find that it only works with redcarpet rather than the default kramdown. I want to use kramdown because it has other features that I need and I guess it’s default with good reason.

When it works, I find that it only works in fenced code blocks. I’d like it, if possible, to work in indented code blocks (because most of my existing content uses indents).

This first example of the Casper theme is Redcarpet without line numbers. This is the best-looking rendering that I’ve been able to achieve but it does not work for indented blocks:

Adding line numbers also introduces an unsightly border (I guess it’s also there in the vanilla example above, but less pronounced).

Next is Kramdown without line numbers. The fenced blocks render each line separately.

Using Kramdown with line numbers - they only appear for an indented block along with the unsightly border.

So nothing works in indented blocks but fenced blocks only work with Redcarpet.

Thanks for reading this far :slight_smile:

I originally wrote this question to include a number of screen shots to help describe the problems but was only allowed to post one. So I posted the full Question on Stack Overflow which contains all of the screenshots I wanted to include here.