Skip to content

low-perry/my-jekyll-syntax-highlighter-theme

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

5 Commits
 
 
 
 
 
 
 
 

Repository files navigation

Jekyll syntax highlighter theme

This repository has custom themes for code syntax highlighter in markdown files. It supports both light and dark mode:

Dark Mode:

Dark Mode

Light Mode:

Light Mode

To Enable Syntax Highlighting

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="{{ '/assets/css/syntax.css' | relative_url }}">

Step 4. Choose a syntax Theme

To style your code, select a Rouge theme:

  1. Visit this GitHub repository .

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

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages