Adding a custom syntax-highlighting theme in jekyll and rouge

103 views Asked by At

I'm working on a static website and I'm using jekyll. I've managed to do almost everything I wanted, however I don't know how to add a css theme for syntax highlighting with rouge. I use jekyll version 3 or 4 so rouge, karmdown etc are set up by default.

I tried almost any method I could find on Google but nothing really works for me.

If I do something like this:

{% highlight python %}
x = 2 + 3
for i in range():
{% endhighlight %}

Result is

result1

And if I do:


```python
x = 2 + 3

Result is

result2

I also tried:

rougify style base16.solarized.dark > syntax.css

the I added this file to my project and included it in main.css file but it didn't work. I also tried to replace the style from syntax-highlighting.scss with the one I generated but it also didn't change anything. I can do whatever with the content of /home/username/gems/gems/minima-2.5.1/_sass/minima/_syntax-highlighting.scss like replace the content but it doesn't affect my website at all...

Every time the result is the same as on the screenshots I provided.

Here is my project: (maybe it will help somehow)

project layout

It would be awesome if someone could explain to me how I can add custom themes to my project because the default syntax highlighting is lame and light lol.

Thanks.

0

There are 0 answers