2018-10-23 · Blog

给 Ghost 博客系统添加代码高亮

一个IT博客是少不了展示代码的时候,而 Ghost 博客系统默认是不支持代码高亮的,所以只能使用第三方的支持了。

对于代码高亮的库,最常用的就是 Prism.jshighlight.js

Prism.js

  1. 极致易用:引用 prism.css 和 prism.js,使用合适的 HTML5 标签(code.language-xxxx),搞定!
  2. 天生伶俐:语言的 CSS 类是可继承的,所以你只需定义一次就能应用到多个代码片段。
  3. 轻如鸿毛:代码压缩后只有 1.6KB。每添加一个语言平均增加 0.3-0.5KB,主题在 1KB 左右。
  4. 快如闪电:如果可能,支持通过 Web Workers 实现并行。
  5. 轻松扩展:定义新语言或扩展现有语法,或者新增功能都非常简单。
  6. 丰富样式:所有的样式通过 CSS 完成,并使用合理的类名如:.comment, .string, .property 等。
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.10.0/themes/prism-okaidia.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.10.0/prism.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.10.0/components/prism-java.min.js"></script>

prism-demo

  1. 不同语言对应的 Markdown 标签见: http://prismjs.com/#languages-list
  2. 要支持不同语言的时候,有的语言有对其他语言的依赖,这时候要把依赖也加上,依赖列表见: https://github.com/PrismJS/prism/blob/gh-pages/components.js

Highlight.js

  1. 支持 71 种编程语言的语法解析;拥有 44 种样式

  2. 自动检测编程语言

  3. 同时为多种编程语言代码高亮

  4. 可以在 node.js 平台上运行

  5. 支持各种标签

  6. 与任何 js 框架兼容

<link href="http://cdn.bootcss.com/highlight.js/8.0/styles/monokai_sublime.min.css" rel="stylesheet">  
<script src="http://cdn.bootcss.com/highlight.js/8.0/highlight.min.js"></script>  
<script >hljs.initHighlightingOnLoad();</script>  

highlight-demo

对应的 Markdown 标签见:https://github.com/highlightjs/highlight.js/tree/master/src/languages

<style>.post-full-content pre {font-size: 100%;}</style>

参考文档:

Ghost 给 Markdown 添加代码语法高亮

用 highlight.js 为文章中的代码添加语法高亮