[Html]Jekyll 代码高亮的几种选择_html/css_WEB-ITnose-html教學-PHP中文網

首頁

web前端

html教學

[Html]Jekyll 代码高亮的几种选择_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:26 AM

序

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

Jekyll

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

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

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

代码高亮

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

官方说明

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 }  endend{% endhighlight %}

得到的效果也就是：

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

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

Pygments

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

安装后我们执行命令：

gem install pygments.rb

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

markdown: kramdownhighlighter: 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/demo/3666780/ 右边可以选择样式，选择GO就可以看见效果，而此时打开浏览器调试，可以看见其中有一个 pygments.css 文件，下载即可。

Show

Rouge

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

开源项目地址：https://github.com/jneen/rouge

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

markdown: kramdownhighlighter: 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

Highlight JS

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

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

下载地址：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文档中：

<pre class='brush:html;toolbar:false;'>...

Show

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

SyntaxHighlighter

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

官方地址：https://github.com/syntaxhighlighter/syntaxhighlighter

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

https://github.com/syntaxhighlighter/syntaxhighlighter/releases

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

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

HTML標籤的目的是什麼？Apr 28, 2025 am 12:02 AM

htmltagsareessentialforsenteringwebpages，增強輔助性，seo，and Performance.1）他們areAnclosedInanglebracketSandInpairStocrateAteAhierArchical.2）samantictagsictagsagtagslikleicereperreveuseerexperienceandseo.3）

什麼是自我關閉標籤？舉一個例子。Apr 27, 2025 am 12:04 AM

self-closingtagsinhtmlandxmlaretagsthatclosethem hexptneedneedingAseparateClosingTag，SightifyingmarkupStrupupStrupureAndenHancingCodingsigy.1）shemesessientInsentialInxmlforelementswithcontentsswithcontent content content content content content content content content contentcontent，確保wellwell-formedDocuments.2）Inhtmlible5，inhtmlibut forfix

超越HTML：網絡開發的基本技術Apr 26, 2025 am 12:04 AM

要構建一個功能強大且用戶體驗良好的網站，僅靠HTML是不夠的，還需要以下技術：JavaScript賦予網頁動態和交互性，通過操作DOM實現實時變化。 CSS負責網頁的樣式和佈局，提升美觀度和用戶體驗。現代框架和庫如React、Vue.js和Angular，提高開發效率和代碼組織結構。

HTML中的布爾屬性是什麼？舉一些例子。Apr 25, 2025 am 12:01 AM

布爾屬性是HTML中的特殊屬性，不需要值即可激活。 1.布爾屬性通過存在與否控制元素行為，如disabled禁用輸入框。 2.它們的工作原理是瀏覽器解析時根據屬性的存在改變元素行為。 3.基本用法是直接添加屬性，高級用法可通過JavaScript動態控制。 4.常見錯誤是誤以為需要設置值，正確寫法應簡潔。 5.最佳實踐是保持代碼簡潔，合理使用布爾屬性以優化網頁性能和用戶體驗。

如何驗證您的HTML代碼？Apr 24, 2025 am 12:04 AM

HTML代碼可以通過在線驗證器、集成工具和自動化流程來確保其清潔度。 1)使用W3CMarkupValidationService在線驗證HTML代碼。 2)在VisualStudioCode中安裝並配置HTMLHint擴展進行實時驗證。 3)利用HTMLTidy在構建流程中自動驗證和清理HTML文件。

HTML與CSS和JavaScript：比較Web技術Apr 23, 2025 am 12:05 AM

HTML、CSS和JavaScript是構建現代網頁的核心技術：1.HTML定義網頁結構，2.CSS負責網頁外觀，3.JavaScript提供網頁動態和交互性，它們共同作用，打造出用戶體驗良好的網站。

HTML作為標記語言：其功能和目的Apr 22, 2025 am 12:02 AM

HTML的功能是定義網頁的結構和內容，其目的在於提供一種標準化的方式來展示信息。 1）HTML通過標籤和屬性組織網頁的各個部分，如標題和段落。 2）它支持內容與表現分離，提升維護效率。 3）HTML具有可擴展性，允許自定義標籤增強SEO。

HTML，CSS和JavaScript的未來：網絡開發趨勢Apr 19, 2025 am 12:02 AM

HTML的未來趨勢是語義化和Web組件，CSS的未來趨勢是CSS-in-JS和CSSHoudini，JavaScript的未來趨勢是WebAssembly和Serverless。 1.HTML的語義化提高可訪問性和SEO效果，Web組件提升開發效率但需注意瀏覽器兼容性。 2.CSS-in-JS增強樣式管理靈活性但可能增大文件體積，CSSHoudini允許直接操作CSS渲染。 3.WebAssembly優化瀏覽器應用性能但學習曲線陡，Serverless簡化開發但需優化冷啟動問題。

See all articles