Pegasus, now in technicolor

Last year I first wrote about how I wanted to improve the blog and then about how I forked and customised an existing Ghost theme.

My main issues at the time could be boiled down to: a lack of a good search functionality and the fact that one had to rebuild the theme in order to enable/disable dark mode.

I have been keeping my theme, Pegasus, up-to-date with the changes from its parent, Attila, so both issues have been addressed.

Pegasus is a bit more than just cosmetic changes, though. I have included a couple of new and improved features that not available in its parent theme.

Better Code Highlighting

Attila has a basic code highlighting system, which I replaced with Prism.js.

Here's an example of how that looks like:

int main (int argc, char *argv[])
{
    std::cout << "Hello World" << std::endl;
    return 0;
}

The main advantages of this library are its support for different colouring schemes and a wide range of plugins that I have included by default:

  • Line numbering and highlighting.
  • Display of the programming language of the code snippets.
  • A Copy to Clipboard button.
  • Highlighting in diff snippets.
  • Command line decorators.
  • Treeviews.

LaTeX support

This comes via KaTeX, a web library initially developed by the Khan Academy, which allows the use of mathematical notation. This is done via a language that is similar and compatible to LaTeX (not the full standard, though, just a subset).

KaTeX – The fastest math typesetting library for the web
Simple API, no dependencies – yet super fast on all major browsers.

Let's look at this code snippet for an example.

\( \sqrt{a^2 + b^2} \)
\[ \sqrt{a^2 + b^2} \]

That will produce \(  \sqrt{a^2 + b^2} \) and the following, respectively:

\[ \sqrt{a^2 + b^2} \]

For further examples of how it looks like, check my posts about Math.

I originally thought it wasn't compatible with Ghost's markdown blocks, but it turns out that the \ character had to be escaped for it to work.

My main concern right now about this is the that it isn't suitable for small screens. The math blocks just overflow and there's no way to move them via a slider or by sweeping it in a touch screen. This should be easy to sort out in the CSS, I just need to figure out how to do it properly.


There are some minor things that need a bit of improvement and some more experiments that I would like to make. For instance, I'm still figuring out what kind of font looks and reads good; or how much padding should I use for the different HTML elements. Also, the button to toggle dark mode is currently located at the bottom of the page; I'd like to either move it or make it also accessible from the top.

But I'm at a point where I feel happy with the theme and how this blog looks.