0

I am attempting to change the syntax highlighting for the code in my Jekyll website.

What I tried:

Step 1: I put my code inside Jekyll highlighter

{% highlight html %} // some code here {% endHighlight %}

Step 2: I downloaded monokai.css file from here: http://jwarby.github.io/jekyll-pygments-themes/languages/javascript.html and saved it into my /assets/monokai.css

Step 3: I imported the css via @import url(monokai.css); in my main.scss

What I expect:

enter image description here

What happens:

enter image description here

As you can see, it's not highlighting properly. There is a rectangle behind the code.

Why is this so? Any help is appreciated. Thanks!

sciffany
  • 380
  • 1
  • 4
  • 12

1 Answers1

0

I found out what's causing this by Inspecting the element and seeing what's causing the abnormal syntax highlighting.

In base.scss, there are a few lines that modify the code type.

pre,
code {
  background-color: #eef;
}

All I had to do was remove the line that changes background color, and things work as expected.

sciffany
  • 380
  • 1
  • 4
  • 12