34

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

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

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

4

5 回答 5

35

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 %}
于 2011-07-08T00:42:40.997 回答
9

“ GitHub Pages 现在只支持 Rouge，一个纯 Ruby 语法高亮器”，所以你只需要更改'kramdown'语法高亮，以在你的_config.yml文件中使用'rouge' 。

markdown: kramdown
kramdown:
  input: GFM
  syntax_highlighter: rouge
于 2016-02-04T10:50:17.340 回答
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'
```
于 2014-03-11T21:29:44.173 回答
3

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

你必须把这个放在你身上_config.yml。这是来自_config.ymlBarry Clark 的 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");
}
```
于 2017-03-13T11:14:58.190 回答
3

默认的语法高亮是 rouge（相当于highlighter: rouge你的 _config.yml 文件）。使用 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。

于 2018-06-08T03:35:02.913 回答