使用prismjs实现Jekyll代码语法高亮并显示行号

在 jekyll 上设置代码语法高亮有好几种选择,然而要使代码能显示行号似乎有些困难,至少在百度上是很难找到满意的答案的。

其实,jekyll 本身是可以开启行号的,但是这样是不利于网页的美化的。由于我们无法控制 jekyll 输出的内容,当在页面使用其它语法高亮插件时,就会出现格式错误。那就只能让 jekyll 输出不带行号的代码块,直接让 js 插件生成行号。

prismjs 是一款轻量级可扩展的代码语法高亮库,它的使用非常简单,只需页面中引入 prism.css 和 prism.js 文件就能够轻易的将其整合进项目中使用:


<html>
<head>
    ...
    <link href="prism.css" rel="stylesheet" />
head>
<body>
    ...
    <script src="prism.js">script>
body>
html>

prismjs 的配置是直接官网下载页面进行的,它有其中主题样式,支持目前各种主流的语言,还有几十种插件。为了显示行号,一定要将“Line Numbers”这个插件勾上。

根据官方文档,还需要给 pre 标签的 class 属性添加“line-numbers”值,让其显示行号,给 style 属性添加 “white-space: pre-wrap”值,让其自动换行。由于我在页面中使用了 jQuery,可以直接使用下面的代码实现:

<script type="text/javascript">
  $('pre').addClass("line-numbers").css("white-space", "pre-wrap");
script>

参考资料:

Prism 官网

Line Numbers

GitHub

原文地址:
http://wanshicheng.org/jekyll/jekyll%E4%BB%A3%E7%A0%81%E5%9D%97%E9%AB%98%E4%BA%AE%E5%B9%B6%E8%AE%BE%E7%BD%AE%E8%A1%8C%E5%8F%B7.html

你可能感兴趣的:(jekyll)