css formatting in jekyll

16 Feb 2023

In case you haven’t noticed, GitHub Pages (on which this blog is hosted) uses Jekyll under the hood. It’s pretty simple, yet powerful, especially given the amount of time one needs to spend to set it up. I dabbled with theming in the past and ended up sticking with Semantic UI. It’s a nice, clean and easy to use CSS framework which provides most of the functionality you can look for.

The problem with combining these two is that I couldn’t find a way to apply the CSS styles from Semantic into the HTML generated by the Markdown processor. The best example is probably the image class. If you try to insert the image into your post using default way:

    ![A kitten](https://placekitten.com/100/100)

You get something that looks like this:

In case of smaller images it looks fine, but isn’t really responsive and doesn’t utilize the cool Semantic image freatures.

After some digging it turned out that the solution is actually an extension in kramdown, the default Markdown engine used by Jekyll. The extension handles the extra CSS classes by adding a small block, for example:

    ![A kitten](https://placekitten.com/100/100){: .ui .medium .circular .image}

This is what you get:

Granted, the solution is a little troublesome - you still have to add the classes to every single element. I am still thinking if there is something I can do with SASS though.