In the pursuit of improving codeblocks for the website I learnt that Jekyll uses Rouge to handle syntax highlighting of code snippets! This is called that because it uses a programming language called Ruby - not named after the movie Moulin Rouge!

In the screenshots below - notice the lack of colour!

Before the updates to codeblocks, this is what the site looked like on the web:

and this is what it looked like on a cellphone (Notice how it runs off the screen):

With the fixes in place, codeblocks now look like this:

on website:

and on the phone:

Testing Codeblocks

On top of this, several codeblock coloring options should work out of the gate:

Python:

def func():
    print("Python colour is here")

Java:

public class Main {
    public static void main(String[] args) {
        // Java colouring is here
    }
}

Bash:

# Bash colouring is here
echo "hello"

YAML:

paginate: 3
paginate_path: "/posts/page:num/"
plugins:
  - jekyll-paginate

HTML:

<link rel="stylesheet" href="/assets/css/style.css">
<a href="/posts/">Posts</a>

CSS:

.highlighter-rouge {
    max-width: 100%;
    overflow-x: auto;
}

Ruby:

def self.site_title
  "ABsurdly Goud"
end

Diff:

- include_permalink=True
+ include_permalink=False

Mermaid:

NOTE - this Mermaid diagram styling should not work. Rouge does not support Mermaid by default

graph TD
    A[Vault] --> B[site_src]