Проблема создания блоков изолированного кода в 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">&lt;html&gt;</span>
<span class="nt">&lt;body&gt;</span>
<span class="nt">&lt;p&gt;</span>Is this really how code should be represented?<span class="nt">&lt;/p&gt;</span>
<span class="nt">&lt;div&gt;</span>Answer = NO!!!<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/body&gt;</span>
<span class="nt">&lt;/html&gt;</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
Другие вопросы по тегам