[Html]Jekyll 代码高亮的几种选择

ゝ一纸荒年。 2022-08-18 15:29 172阅读 0赞

## 序 ##

新年第一炮，轻松加愉快的，来完成一些年前准备写的文章。Jekyll 中格式化代码有很多种方式，在这里说说几种的实现方式。

## Jekyll ##

Jekyll 是一种通过模版和数据编译为HTML的工具，说是工具，但是也可以说是服务，如果借助Github（搭建有Jekyll服务，可以实时编译）可以做出半动态网页；对于没有自己服务器的朋友来说是不错的选择。

一般情况下，使用Github＋Jekyll来搭建博客和一些说明性质的网页。

之前有发表WIN系统下搭建的文章：[\[环境搭建\]Windows下安装Ruby和Jekyll][Windows_Ruby_Jekyll]  
，至于Mac下就用命令行搞定了。

## 代码高亮 ##

代码高亮可以说是程序员必备，无论是搭建模块，或者是产品的说明网站都是需要展示代码的，而代码的样式直接的影响了阅读效果，一个好的代码高亮插件将会有好的体验。

### 官方说明 ###

[http://jekyllrb.com/docs/posts/\#highlighting-code-snippets][http_jekyllrb.com_docs_posts_highlighting-code-snippets]  
在官方文档中可以看见其代码是非常简单的：

{% highlight ruby %}
    def show
      @widget = Widget(params[:id])
      respond_to do |format|
        format.html # show.html.erb
        format.json { render json: @widget }
      end
    end
    {% endhighlight %}

得到的效果也就是：

![这里写图片描述][20160217152154475]

当然，不同的代码高亮插件也需要不同的编译代码。

其实高亮插件也就是JS查找HTML中特定的节点，并对特定节点赋予特定css，而css的结果也就是给代码上色；所以纯粹说代码高亮的话就与Jekyll无关了，在这里要说的是Jekyll＋MD文件＋CODE 的方式。

## Pygments ##

这个算是很多Jekyll 教程中使用的了，在大部分的高亮博客中基本都是使用的该高亮器。编译的时候需要先安装Python。

安装后我们执行命令：

gem install pygments.rb

安装好了后，我们需要修改Jekyll项目的**`**_config.yml**`** 文件，修改其中的 highlighter 为：

markdown: kramdown
    highlighter: pygments

然后重启Jekyll服务。

### Code ###

<head>
        <title>pygments</title>
        <link media="all" rel="stylesheet" type="text/css" href="../assets/pygments/pygments.css" />
    </head>
    
    <body>
        {% highlight ruby %}
        def show
        @widget = Widget(params[:id])
        respond_to do |format|
            format.html # show.html.erb
            format.json { render json: @widget }
        end
        end
        {% endhighlight %}
    </body>

很多人都不知道这个css文件从哪来；大部分都是拷贝拷贝再拷贝，而且都是6～7年前的了。

其实有多种办法得到：

*  第一种  
    命令行模式，太复杂了，详细见：  
    [http://pygments.org/docs/styles/][http_pygments.org_docs_styles]
 *  第二种  
    直接下载，打开网页：[http://pygments.org/demo/3666780/][http_pygments.org_demo_3666780] 右边可以选择样式，选择GO就可以看见效果，而此时打开浏览器调试，可以看见其中有一个 `pygments.css` 文件，下载即可。

### Show ###

![这里写图片描述][20160218155324716]

## Rouge ##

这个个人比较喜欢，上色比较纯净，看着舒服。比Pygments支持语言少一些，如果是使用的 Pygments ，哪么基本不用更改任何源码，只需要更改css引用就OK。当然rouge也是Jekyll默认的高亮编译。

开源项目地址：[https://github.com/jneen/rouge][https_github.com_jneen_rouge]

首先修改Jekyll项目的**`**_config.yml**`** 文件，修改其中的 highlighter 为：

markdown: kramdown
    highlighter: rouge

然后重启Jekyll服务。

### Code ###

<head>
        <title>Rouge</title>
        <link media="all" rel="stylesheet" type="text/css" href="../assets/rouge/rouge.css" />
        <style>
            pre{
                background: rgba(0, 0, 0, 0.95);
            }
        </style>
    </head>
    
    <body>
        {% highlight ruby %}
        def show
        @widget = Widget(params[:id])
        respond_to do |format|
            format.html # show.html.erb
            format.json { render json: @widget }
        end
        end
        {% endhighlight %}
    </body>

默认的 rouge 主题偏向于白色，所以我设置了背景为黑色。

这里也是需要 **`rouge.css`** 文件，此时我们使用命令行来得到：

rougify style monokai.sublime > rouge.css

这样就能生成一个默认的css文件，当然更多的主题生成详见开源项目说明。

### Show ###

![这里写图片描述][20160218161558803]

## Highlight JS ##

总的来说，Highlight算是比较广泛，使用用户量也挺高的了。效果不错，支持语言多。

Highlight 可以完美兼容 Rouge 与 Pygments ，所以不需要修改任何配置，只需要更改一下css与js引用就OK。

下载地址：[https://highlightjs.org/][https_highlightjs.org]

### Code ###

<head>
        <title>Highlight.js</title>
        <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.1.0/styles/default.min.css">
        <script src="http://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.1.0/highlight.min.js"></script>
        <script type="text/javascript">
            hljs.initHighlightingOnLoad();
        </script>
    </head>
    
    <body>
        {% highlight ruby %}
        def show
        @widget = Widget(params[:id])
        respond_to do |format|
            format.html # show.html.erb
            format.json { render json: @widget }
        end
        end
        {% endhighlight %}
    </body>

当然你也可以直接使用HTML在MD文档中：

### Show ###

![这里写图片描述][20160218150116265]

样式有多种，可以任意选择。

## SyntaxHighlighter ##

这算是比较老的一种代码高亮插件了，去年迁移了一次，现在在Github上维护，质量挺好的，V4版本不错。

官方地址：[https://github.com/syntaxhighlighter/syntaxhighlighter][https_github.com_syntaxhighlighter_syntaxhighlighter]

首先下载, 然后自己使用命令编译：

[https://github.com/syntaxhighlighter/syntaxhighlighter/releases][https_github.com_syntaxhighlighter_syntaxhighlighter_releases]

[https://github.com/syntaxhighlighter/syntaxhighlighter/wiki/Building][https_github.com_syntaxhighlighter_syntaxhighlighter_wiki_Building]

编译后可以得到 js 与 css 文件；当然使用命令不同样式可以有几种可以选择。

### Code ###

<head>
        <title>SyntaxHighlighter</title>
        <link media="all" rel="stylesheet" type="text/css" href="../assets/syntax/theme.css" />
        <script type="text/javascript" src="../assets/syntax/syntaxhighlighter.js"></script>
    </head>
    
    <body>
       <pre class="brush: ruby">
        def show
        @widget = Widget(params[:id])
        respond_to do |format|
            format.html # show.html.erb
            format.json { render json: @widget }
        end
        end
        </pre>
    </body>

在这里并没有使用 Jekyll 进行code编译，而是保留原样式，在页面上使用 js 进行解析。

### Show ###

## Prismjs ##

prismjs 算是比较优良的作品了，生成代码不多余，颜色适用于大部分网站；主题有几种；支持的语言挺多；不过细节部分没有完善有些情况下样式显示不是很好，像XML代码不支持 xx.xx.xxx 的样式；目前谷歌的使用挺多。

主页与下载地址：[http://prismjs.com/][http_prismjs.com]

Jekyll 并不能直接支持他，需要下载 ***prism.rb*** 插件来使用。下载后拷贝到项目“**`_plugins`**“ 文件夹中。

![这里写图片描述][20160218165736256]

prismjs 中并不能直接使用 `{% highlight %}` 命令，而需要使用 `{% prism %}` 命令。

### Code ###

<head>
        <title>Prismjs</title>
        <link media="all" rel="stylesheet" type="text/css" href="../assets/prism/prism.css" />
    </head>
    
    <body>
        {% prism ruby %}
        def show
        @widget = Widget(params[:id])
        respond_to do |format|
            format.html # show.html.erb
            format.json { render json: @widget }
        end
        end
        {% endprism %}
    
        <script src="../assets/prism/prism.js" ></script>
    </body>

### Show ###

![这里写图片描述][20160218170815636]

## 总结 ##

目前这几种算是比较优秀的代码高亮了；各位看官就按照自己喜好使用就好。

全部的代码和文件都提交到了GITHUB上了，文件地址:

[https://github.com/qiujuer/BeFoot/tree/master/blog/sample/Highlight][https_github.com_qiujuer_BeFoot_tree_master_blog_sample_Highlight]

========================================================  
作者：qiujuer  
博客：[blog.csdn.net/qiujuer][blog.csdn.net_qiujuer]  
网站：[www.qiujuer.net][]  
开源库：[github.com/qiujuer/Genius-Android][github.com_qiujuer_Genius-Android]  
开源库：[github.com/qiujuer/Blink][github.com_qiujuer_Blink]  
转载请注明出处：[http://blog.csdn.net/qiujuer/article/details/50419279][http_blog.csdn.net_qiujuer_article_details_50419279]  
—— 学之开源，用于开源；初学者的心态，与君共勉！

========================================================

[Windows_Ruby_Jekyll]: http://blog.csdn.net/qiujuer/article/details/44620019
[http_jekyllrb.com_docs_posts_highlighting-code-snippets]: http://jekyllrb.com/docs/posts/#highlighting-code-snippets
[20160217152154475]: /images/20220731/e78a18ba75d8443f9c063b8c5b4a7f24.png
[http_pygments.org_docs_styles]: http://pygments.org/docs/styles/
[http_pygments.org_demo_3666780]: http://pygments.org/demo/3666780/
[20160218155324716]: /images/20220731/4c9ee462cc804096ba0413681856def7.png
[https_github.com_jneen_rouge]: https://github.com/jneen/rouge
[20160218161558803]: /images/20220731/8529febc3cf642f49574fc60abc66e21.png
[https_highlightjs.org]: https://highlightjs.org/
[20160218150116265]: /images/20220731/ed92ca0158624a5b808f018337143169.png
[https_github.com_syntaxhighlighter_syntaxhighlighter]: https://github.com/syntaxhighlighter/syntaxhighlighter
[https_github.com_syntaxhighlighter_syntaxhighlighter_releases]: https://github.com/syntaxhighlighter/syntaxhighlighter/releases
[https_github.com_syntaxhighlighter_syntaxhighlighter_wiki_Building]: https://github.com/syntaxhighlighter/syntaxhighlighter/wiki/Building
[http_prismjs.com]: http://prismjs.com/
[20160218165736256]: /images/20220731/47f684306bb44df0b5b7e97f594e36ed.png
[20160218170815636]: /images/20220731/6ba9852039344a6d9444948daabd2563.png
[https_github.com_qiujuer_BeFoot_tree_master_blog_sample_Highlight]: https://github.com/qiujuer/BeFoot/tree/master/blog/sample/Highlight
[blog.csdn.net_qiujuer]: http://blog.csdn.net/qiujuer
[www.qiujuer.net]: http://www.qiujuer.net/
[github.com_qiujuer_Genius-Android]: https://github.com/qiujuer/Genius-Android
[github.com_qiujuer_Blink]: https://github.com/qiujuer/Blink
[http_blog.csdn.net_qiujuer_article_details_50419279]: http://blog.csdn.net/qiujuer/article/details/50419279