Подсветка синтаксиса Jekyll не работает должным образом, вокруг текста отображается прямоугольник

Question

Я пытаюсь изменить подсветку синтаксиса для кода на моем веб-сайте Jekyll.

Что я пробовал:

Шаг 1. Я помещаю свой код в Jekyll Highlight

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

Шаг 2: Я загрузил файл monokai. css отсюда: http://jwarby.github.io/jekyll-pygments-themes/languages/javascript.html и сохранил его в моем /assets/monokai.css

Шаг 3: Я импортировал css через @import url(monokai.css); в свой main.scss

Что я ожидаю:

Что происходит:

Как видите, подсветка не выполняется должным образом. За кодом находится прямоугольник.

Почему это так? Любая помощь приветствуется. Спасибо!

Answer 1

Я выяснил причину этого, проверив элемент и посмотрев, что вызывает ненормальное выделение синтаксиса.

В base.scss есть несколько строк, которые изменяют тип code.

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

Все, что мне нужно было сделать, это удалить строку, меняющую цвет фона, и все заработало, как ожидалось.