使用 GFM 在 Jekyll 中创建 Fenced 代码块的问题答案

【问题标题】：Issue Creating Fenced Code Blocks in Jekyll using GFM使用 GFM 在 Jekyll 中创建 Fenced 代码块的问题
【发布时间】：2017-10-04 22:53:55
【问题描述】：

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

但这是

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

【问题讨论】：

期望的输出是什么？你没有指定任何语言，也没有代码，所以我看不出任何问题
我希望代码有一个很好的围栏结构，但是（如图所示）我当前的设置就像是在行代码中，看起来很糟糕。
“漂亮的围栏结构”是什么意思？ 'fences' 是 source 中的 ~ 字符（或某些变体中的 ` 字符），而不是使用缩进代码的原始 Markdown 规范（有时可能有点尴尬用于复制/粘贴等）。
我已经更新了答案

标签： jekyll kramdown

【解决方案1】：

尝试使用三个反引号 ``` 而不是三个波浪号 ~~~ 创建围栏代码块

``` 这真的是在 GFM 中应该如何表示代码吗？答案 = 是的！！！ ```

【讨论】：

不，我已经尝试过使用 ``` 和 ~~~ 以及 redcarpet 以及没有 GFM 的 kramdown。所有结果都为我的代码逐行提供了相同的粗略。
如果 @marcanuy 的更新答案不能为您解决问题，您需要发布一个指向您的存储库的公共链接，以便可以尝试亲身重现这种情况。 . 否则这只是一个 XY 问题

【解决方案2】：

它没有显示源代码的围栏块，因为没有源代码。

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

<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

【讨论】：