Question

我正在尝试在我的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!!!
~~~

但这是

请帮忙，我只想要很好的围栏代码结构谢谢！

Answer 1

它没有显示源代码的屏蔽块，因为没有源代码。

如果您没有指定任何内容，那么它将使用：

<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

Answer 2

尝试使用三重反引号```而不是三重波形~~~

创建围栏代码块

```
Is this really how code should be represented in GFM?

Answer = YEP!!!
```

问题使用GFM在Jekyll中创建受控代码块

2 个答案: