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

Prism.js

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

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

为什么选Prism.js？

极致易用
引用 prism.css 和 prism.js，使用合适的 HTML5 标签（code.language-xxxx），搞定！
天生伶俐
语言的 CSS 类是可继承的，所以你只需定义一次就能应用到多个代码片段。
轻如鸿毛
代码压缩后只有 1.6KB。每添加一个语言平均增加 0.3-0.5KB，主题在 1KB 左右。
快如闪电
如果可能，支持通过 Web Workers 实现并行。
轻松扩展
定义新语言或扩展现有语法，或者新增功能都非常简单。
丰富样式
所有的样式通过 CSS 完成，并使用合理的类名如：.comment, .string, .property 等。

如何使用：

访问官网生成css和js文件

官方网站下载

主要有三个选项：

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

下载prism css和js文件

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

prism.css
prism.js

HTML

你只需要在页面上引入 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>

HTML

遵循 HTML5 标准，Prism 使用语义化的 <pre> 元素和 <code> 元素来标记代码区块：


<pre><code class="language-css">p { color: red }</code></pre>

HTML

使用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>

HTML

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

HTML