使用PrismJS实现代码高亮，以及搭配tinymce使用教程
所属分类：HtmlCssJs | 发布于 2022-07-13 22:02:34
作为技术人员的博客，没有代码高亮怎么行呢，所以一通操作，终于搞定了代码高亮。
查阅了很多资料，又经过筛选，选出了目前个人感觉还行的三个JS代码高亮方案，分别是：
- highlightjs，一个老牌的代码高亮插件，应该是使用量最多的插件，目前一直在更新，官方网址：https://highlightjs.org/
- google code prettify，谷歌出品，目前使用量也比较多效果也还可以，最后一次更新是在三年前，github地址：https://github.com/googlearchive/code-prettify
- prismjs，这算是一个代码高亮的新秀，个人感觉不错，官网地址：https://prismjs.com/
经过比较，最终选择prismjs作为博客代码高亮的实现方案。
基本使用
1. 下载，到官网下载js和css，下载时根据需要选择语言和插件。
2. 引入，引入js和css
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>PrjsmJs Demo</title>
<link rel="stylesheet" href="prismjs/prism.css">
</head>
<body>
<script src="prismjs/prism.js"></script>
</body>
</html>3. 使用，使用pre和code标签来显示代码块，在code的class属性中，根据需要添加对应的语言
<pre><code class="language-css">p { color: red; }</code></pre>实用小技巧
1. 显示行号，给pre标签的class属性添加line-numbers属性值，就可以显示行号。
<pre class="line-numbers"><code class="language-css">
p {
color: red;
}
</code></pre>2. 显示复制按钮，在下载时选中Copy to Clipboard Button插件，就可以显示复制按钮，注意选中Copy to Clipboard Button插件时，会自动选中Toolbar插件。
3. 代码块高度限定，默认高亮的代码块会完全展开，这样页面会显得很长，通过给页面的pre标签添加max-height和overflow属性来限制代码块的最大显示高度。
<style>
pre {
max-height: 32em;
overflow: auto;
}
</style>搭配tinymce使用
1. tinymce默认集成了prismjs，只需要在前端页面引入相应的js和css即可。
2. 修改codesample.min.js，来实现自动显示行号
// 找到下面这段
<pre id="__new" class="language-'+t+'">
// 修改成这样
<pre id="__new" class="line-numbers language-'+t+'">
// 这个代码片段，你应该就能看到行号了。注意，修改完js后台要刷新一下输入框让代码生效哦。
另外，要让以前的代码块也显示行号，那就要去后台手动都修好一遍。
直接修改tinymce的源码貌似不太好，可以直接在页面使用js给所有的pre的class都加上line-numbers属性值，不过貌似这样也不太好，自己权衡吧。