为gh-pages添加语法高亮功能

Question

是否有一种简单的方法，可以使用github的Pygments向我的各种插件的gh-pages添加语法高亮？

我知道每个页面都会通过Jekyll引擎运行并提供语法高亮（ref）。但我不想安装博客。我只想将语法高亮应用于我的gh-pages中的代码块。

我猜我可以随时在我的gh-pages中包含一个不同的插件...

- Mottie

Answer 1

Pages已经支持Pygments，无需安装。只需要使用即可！

---
layout: default
title: Something with codes
---

Happy fun highlighting. 
[More details](https://github.com/mojombo/jekyll/wiki/liquid-extensions)

{% highlight ruby %}
def foo
  puts 'foo'
end
{% endhighlight %}

- Tekkub

---

嗯，好的，我尝试使用它来突出显示JavaScript代码，但没有起作用。我需要像pre标签这样的其他东西来包装代码吗？ - Mottie

你有yaml前置元数据吗？如果没有，jekyll不会对文件进行处理。 - Tekkub

哦，谢谢，我现在明白了...我没意识到那也是必需的 :P - Mottie

你从哪里获取实际进行着色的CSS？ - kentor

你需要自己生成类似这样的内容： pygmentize -S monokai -f html > css/pygments/monokai.css 其中，“pygmentize”是一个命令，用于生成代码高亮的样式表。上述命令中，“-S monokai”指定了使用“monokai”主题，“-f html”指定输出为HTML格式，“> css/pygments/monokai.css”则将结果输出到名为“monokai.css”的文件中，路径为“css/pygments/”。 - baltazar

@kentor 如果您有兴趣，我们在我们的GitHub Dark Stylish存储库中拥有一系列漂亮的pygment主题；这里有一个演示展示它们的外观。如果您需要，我还保留了所有转换后的Python文件。 - Mottie

Answer 2

"GitHub Pages现在仅支持Rouge，一个纯Ruby语法高亮器"，因此您只需要在您的_config.yml文件中将'kramdown'语法高亮器更改为使用'rouge'。

markdown: kramdown
kramdown:
  input: GFM
  syntax_highlighter: rouge

- David Douglas

---

请将代码放置在"```java"和"```"之间，实际上没有双引号，并且语言代码来自https://github.com/jneen/rouge/wiki/List-of-supported-languages-and-lexers。 - frank

Answer 3

默认的语法高亮器是rouge（等同于在您的_config.yml文件中写入highlighter：rouge）。使用rouge，如果您在markdown中编写如下代码块：

~~~js
let z = 26;
~~~

您可以期望获得类似于以下的HTML块：

<div class="language-js highlighter-rouge">
 <div class="highlight">
  <pre class="highlight"><code>
   <span class="kd">let</span> <span class="nx">z</span> <span class="o">=</span> <span class="mi">26</span><span class="p">;</span>
  </code></pre>
 </div>
</div>

然后你只需要一个CSS文件（如果你使用GitHub Pages主题，将自动获取CSS）。我不确定CSS应该来自哪里，但是：

• 这里有一个浅色背景的CSS文件
• 这里有一个黑色圆角矩形代码的CSS文件（网站的其余部分可能使用浅色或深色背景）。

随意自定义css。

- Qwertie

---

请注意：我正在使用默认主题，但我的代码高亮功能无法正常工作。通过自己添加一个 syntax.css 文件解决了这个问题。同时，我还需要使用小写的语言名称来进行代码高亮。 - Rob Bos

Answer 4

在尝试解决语法高亮问题时，我发现了这个线程，并且找到了更简单的方法，我想和大家分享。只需在围栏代码块后面输入您要突出显示的语言名称（参考），无需生成任何css或使用yaml。

This is regular text

```ruby
# This is highlighted code
def foo
  puts 'foo'
end
```
```python
# Here is some in python
def foo():
  print 'foo'
```

- Brent

---

这个问题涉及到 Github 的 gh-pages，你需要使用 yaml 和/或 _config.yml 设置来包含 Pygments。 - Mottie

我正在使用Github的自动生成器制作gh-pages页面。没有意识到问题是针对手动方式的。看起来生成器确实会在幕后为Pygments生成大量CSS代码。 - Brent

Answer 5

正如 @David Douglas 指出的那样，"GitHub Pages 现在只支持 Rouge，一个纯 Ruby 语法高亮器"

你需要将这个放在你的 _config.yml 中。这是来自 Barry Clark 的 Jekyll Now 的 _config.yml。

# Jekyll 3 now only supports Kramdown for Markdown
kramdown:
    # Use GitHub flavored markdown, including triple backtick fenced code blocks
    input: GFM
    # Jekyll 3 and GitHub Pages now only support rouge for syntax highlighting
    syntax_highlighter: rouge
    syntax_highlighter_opts:
        # Use existing pygments syntax highlighting css
        css_class: 'highlight'

---

对于代码高亮部分...

Rouge支持的语言别名列表在这里：https://github.com/jneen/rouge/wiki/List-of-supported-languages-and-lexers

它使用全小写字母。

例如，JavaScript的别名为：

``` javascript
function test() {
    console.log("test");
}
```

- Jeremiah Flaga