语法高亮在前端开发中扮演了重要的角色，常用来在博客、文档、代码分享平台中突出显示关键字和语法结构 ，以便更好地展示代码。Prismjs 是一个轻量级的、可扩展的、高质量的语法高亮库。
一、Prismjs框架
Prismjs 能够处理多种语言和文本格式， 如HTML、CSS、JavaScript、Markup 和 HTTP 等。它的核心包含了语法高亮和错误提示等基本功能，并提供了多种插件和主题，以供扩展和个性化定制。Prismjs框架的使用十分简单，只需要在html文件中引入prism.js, 并在需要高亮显示的块级元素中使用pre和code标签就行。
<script src="prism.js"></script>
<hr/>
body { background-color: #fff; }
console.log("Hello, world!");
二、Prismjs代码美化仿mac
代码的视觉效果需要满足更高的要求，Prismjs 的可扩展性可以大大提高美化代码的效果。比如我们可以使用 “prism-material-themes” 模仿Mac的主题美化代码：
<link href="prism-material-themes.min.css" rel="stylesheet" />
<script src="prism.js"></script>
三、Prismjs行号
行号是更好的代码索引和辨识，在代码块前加入行号更是一大亮点，十分实用。Prismjs建议我们添加插件 “prism-line-numbers”，即可轻松实现行号：
<link href="prism.css" rel="stylesheet" />
<link href="prism-line-numbers.css" rel="stylesheet" />
<script src="prism.js"></script>
<script src="prism-line-numbers.js"></script>
console.log("This is a test.")
四、Prismjs特定语言
Prismjs支持许多具有语法结构的语言，例如我们可以使用 "prism-python" 插件支持Python语言：
<link href="prism.css" rel="stylesheet" />
<link href="prism-line-numbers.css" rel="stylesheet" />
<link href="prism-python.css" rel="stylesheet" />
<script src="prism.js"></script>
<script src="prism-line-numbers.js"></script>
<script src="prism-python.js"></script>
# This is a test.
print("Hello, World!")
五、Prismjs老是卡住
Prismjs使用起来很简单，但对于一些较大的代码块可能会导致读取闪烁或冻结的问题，这些问题可能会更加明显在旧版的浏览器中。为了解决这个问题，我们应该使用异步加载的方式初始化 Prismjs，并且懒加载代码模块，以免代码块过大导致初始化时卡顿。
<script async src="prism.js"></script>
六、Prismjs和highlight
Prismjs 和 highlight.js 都是常用于代码高亮的js库，它们的技术实现和代码结构都很相似。但是，Prismjs比highlight.js具有更好的性能和更少的依赖关系，考虑到不同的实际情况，选择哪一种库是个人的决定。
七、Prismjs做自定义指令
Prismjs支持自定义指令，可用于扩展当前语法高亮的库。在代码块添加指令 data-prism-src 和 data-prism-async 可以自定义加载指定内容和异步加载。
八、Prismjs显示行号和语言
显示行号和语言需要在css中添加指定样式
pre.line-numbers { position: relative; padding-left: 3.8em; counter-reset: linenumber; }
pre.line-numbers > code { position: relative; }
pre.line-numbers > code:before { content: counter(linenumber); counter-increment: linenumber; position: absolute; left: -3.6em; top: 0px; color: #ccc; font-size: 0.8em; }
.token { font-weight: bold; color: #1e88e5; }
.token.operator { color: #1e88e5; }
.token.comment, .token.prolog, .token.doctype, .token.cdata { color: #1e88e5; }
.token.string, .token.attr-value { color: #43a047; }
.token.punctuation { color: #757575; }
.language-css .token.property, .language-css .token.boolean, .language-css .token.number { color: #f4511e; }
.language-css .token.selector { color: #9a4b9d; }
.language-css .token.keyword { color: #1e88e5; }
.token.tag .token.tag { color: #555; }
再次强调，Prismjs是一个轻量级的高质量的语法高亮库，它可以轻松地解决我们在项目中的编码高亮问题，并提供了丰富的扩展插件和主题，让我们可以更加方便地打造自己的代码美化。
