Проблема создания блоков изолированного кода в Jekyll с помощью GFM
Я пытаюсь создать в своем блоге gh-pages несколько изолированных блоков кода, но у меня возникли некоторые проблемы.
Это внутри моего _config.yml
#Stuff I have added
highlight: rouge
markdown: kramdown
kramdown:
input: GFM
highlighter: rouge
Сейчас я пытаюсь запустить этот код следующим образом,
~~~
Is this really how code should be represented?
Answer = NO!!!
~~~
но это
Пожалуйста, помогите, я просто хочу красивую структуру кода. Спасибо!
2 ответа
Попробуйте создать блоки с изолированным кодом с тройным обратным трюком ```
вместо тройной тильды ~~~
``` Это действительно, как код должен быть представлен в GFM? Ответ = ДА!!! ```
Он не показывает изолированный блок для исходного кода, потому что нет исходного кода.
Если вы ничего не указали, он будет использовать:
<div class="highlighter-rouge"><pre class="highlight"><code>
Is this really how code should be represented?
Answer = NO!!!
</code></pre>
</div>
У вас всегда есть возможность настроить вывод, используя сгенерированные классы, такие как highlighter-rouge
,
С другой стороны, если вы укажете язык:
~~~ html
<html>
<body>
<p>Is this really how code should be represented?</p>
<div>Answer = NO!!!</div>
</body>
</html>
~~~
тогда будет сформирован более специфический стиль:
<div class="language-html highlighter-rouge"><pre class="highlight"><code><span class="nt"><html></span>
<span class="nt"><body></span>
<span class="nt"><p></span>Is this really how code should be represented?<span class="nt"></p></span>
<span class="nt"><div></span>Answer = NO!!!<span class="nt"></div></span>
<span class="nt"></body></span>
<span class="nt"></html></span>
</code></pre>
</div>
Если вы по-прежнему не можете видеть подсветку синтаксиса по умолчанию, значит, отсутствует CSS, содержащий эти классы, как правило, Jekyll поставляется с _syntax-highlighting.scss
где он уже содержит их, но вы можете использовать желаемую цветовую схему, например, тема по умолчанию использует эту: https://github.com/jekyll/minima/blob/master/_sass/minima/_syntax-highlighting.scss
Или вы можете установить любую тему Rouge, какую пожелаете: https://github.com/jneen/rouge/tree/master/lib/rouge/themes
$ rougify foo.rb
$ rougify style monokai.sublime > syntax.css