为 gh-pages 添加语法高亮

Question

有没有一种简单的方法可以使用 github 的 Pygments 将语法突出显示添加到我的各种插件的 gh 页面？

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

我想我总是可以在我的 gh-pages 中包含一个不同的插件......

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 %}

Answer 2

“GitHub Pages 现在仅支持 Rouge，纯 Ruby 语法高亮器”，因此您只需更改 'kramdown' 语法高亮器即可在 _config 中使用 'rouge' .yml 文件。

markdown: kramdown
kramdown:
  input: GFM
  syntax_highlighter: rouge

Answer 3

在尝试找出语法突出显示时，发现此线程是第一个命中项，并且我发现了一种更简单的方法，我想我会分享。只需将您想要突出显示的语言名称放在受隔离的代码块后面即可（参考 ）。无需生成任何 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'
```

Answer 4

正如 @David Douglas 所指出的，“GitHub Pages 现在仅支持 Rouge，一种纯 Ruby 语法荧光笔”，

您必须将其放入 _config.yml 中。这是来自 Barry 的 _config.yml Clark's Jekyll Now

# 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");
}
```

Answer 5

默认语法荧光笔是 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 文件< /a> （网站的其余部分可能使用浅色或深色背景）。

您可以根据自己的喜好随意定制 css。