How to enable code syntax highlighter in Jekyll!

While customizing my own Jekyll theme instead of using the default Minima, I noticed that syntax highlighting stopped working. This guide walks through the solution.

Solution

Step 1: Install the Rouge Gem

Ensure you’re in your project directory by running the following command in your terminal:

cd your_project

Then, install the Rouge gem:

gem install rouge.

Step 2: Update _config.yml

Modify your _config.yml file to include the following settings:

    # Markdown settings

    markdown: kramdown
    highlighter: rouge
    kramdown:
    input: GFM

Step 3: Add a Syntax Stylesheet

In your assets/css directory create a new css file named syntax.css. Link this file in your main layout (_layouts/default.html or equivalent) by adding:

    <link rel="stylesheet" href="/dario_blog/assets/css/syntax.css">

Step 4. Choose a syntax Theme

To style your code, select a Rouge theme:

1. Visit this GitHub repository .

2. Navigate to the css directory.

3. Copy the content of your preferred theme into syntax.css file.

Alternatively, you can use my custom theme here.

Step 5: Verify with Code Examples

To ensure your syntax highlighting works correctly, add some sample code to a post or page.

Java Example:

    public class HelloTheme {
        public static void main(String[] args) {
            System.out.println("Hello, Theme!");
        }
    }

TypeScript Example:

    function greet(name: string): string {
        return `Hello, ${name}!`;
    }
    const name: string = "Theme"

    console.log(greet(name));

Now, syntax highlighting should work properly in your Jekyll project. If you want to create your own theme, follow my tutorial.