胖蒜网之前基本没有代码高亮，代码这块的处理就是简单的写在CSS的几行样式和一个JS文件，虽能实现，总感觉体验不好。今天去网上搜索了一下，发现 Prism 挺适合的，简单，小巧，个人博客用足够了。

Prism 是一个轻量级、可扩展的语法高亮库，使用现代化的 Web 标准构建。使用 Prism.js 可以快速为网站添加代码高亮功能，支持超过上百种编程语言，还支持多种插件，是简洁、高效的代码高亮解决方案。

为什么选择 Prism.js

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

如何使用

导入引擎和样式

<link rel="stylesheet" href="<?php $this->options->themeUrl('css/prism.css'); ?>">
<script src="<?php $this->options->themeUrl('js/prism.js'); ?>" ></script>

上面代码请根据实际情况修改一下，prism.js和prism.css你都可以自己在 https://prismjs.com/download.html 上选择配置，支持的语言有很多，选择你自己需要的语言；也有很多插件，比如行号，代码复制，代码预览，代码语言等，都可以自行选择。官方也提供多种主题配色，选择适合自己的。
选择好之后下载对应的 js 和 css 来引用到你的项目中。

在文章中插入代码

在Typecho编辑器中，使用对应语句包裹代码，就可以实现代码高亮的效果。
" ` "符号又称为抑音符，可在英文输入状态下按键盘左上方"~"输入。

转义Prism中的尖括号 < >

假如发表类似html代码，会有尖括号 < >，直接使用会有问题，需要进行转义，需要使用 < 和 > ，而不是 < 和 > 。

使用中存在的问题？

我个人因为不注重这块，所以在之前的代码中没有加上对应语言，所以代码高亮一直没有显示，后来发现是这个问题，这个不好的习惯以后得改正。

本文属原创，转载请注明原文：https://pangsuan.com/p/Prism.html