技术笔记/

使用Prism.js实现漂亮的代码语法高亮并自动添加行号

使用Prism.js实现漂亮的代码语法高亮并自动添加行号

Prism.js

Prism 是一款轻量、可扩展的代码语法高亮库,使用现代化的 Web 标准构建。

使用 Prismjs 可以快速为网站添加代码高亮功能,支持超过113中编程语言,还支持多种插件,是简洁、高效的代码高亮解决方案。

为什么选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 等。

如何使用:

访问官网生成css和js文件

主要有三个选项:

  • 选择主题
  • 选择需要支持高亮的语言
  • 选择需要的插件

下载prism css和js文件

选择完毕之后,点击下面2个大按钮:Download JS Download CSS ,然后会下载得到两个文件:

prism.css
prism.js

你只需要在页面上引入 prism.css 和 prism.js 文件:

<!DOCTYPE html>
<html>
<head>
...
<link href="prism.css" rel="stylesheet" />
</head>
<body>
sungz.com
<script src="prism.js"></script>
</body>
</html>
遵循 HTML5 标准,Prism 使用语义化的 <pre> 元素和 <code> 元素来标记代码区块:
<pre><code class="language-css">p { color: red }</code></pre>

使用jQuery自动添加行号

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

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
  $('pre').addClass("line-numbers").css("white-space", "pre-wrap");
</script>