Question

有没有一种简单的方法可以使用github的Pygments为我的各种插件的gh页面添加语法高亮？

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

我想我总是可以在我的gh页面中添加一个不同的插件......

Answer 1

页面已经有了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 now only supports Rouge, a pure-Ruby syntax highlighter”因此您只需更改'kramdown'语法高亮显示器即可在<<>中使用'rouge' strong> _config.yml 文件。

markdown: kramdown
kramdown:
  input: GFM
  syntax_highlighter: rouge

Answer 3

在尝试找出语法突出显示时发现这个帖子是第一个命中，我找到了一个更简单的方法，我认为我会分享。只需在受屏蔽的代码块（reference）之后添加要突出显示的语言的名称。无需生成任何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中。这来自_config.yml of Barry 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的langauge别名列表：https://github.com/jneen/rouge/wiki/List-of-supported-languages-and-lexers

它使用全小写的latters。

例如，对于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 file for a light background
这里是CSS file for code in a dark rounded rect（网站的其余部分可能使用浅色或深色背景）。

随意根据自己的喜好自定义CSS。

添加语法突出显示到gh页面

5 个答案: