This repository has custom themes for code syntax highlighter in markdown files. It supports both light and dark mode:
Dark Mode:
Light Mode:
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
.
Modify your _config.yml
file to include the following settings:
# Markdown settings
markdown: kramdown
highlighter: rouge
kramdown:
input: GFM
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 }}">
To style your code, select a Rouge theme:
-
Visit this GitHub repository .
-
Copy the content of your preferred theme into
syntax.css
file.