Prism.js & 代码高亮？

前段时间找代码高亮插件始终没找到一个合适的，偶然间发现了 Prism.js 。

Prism.js 是一款轻量、可扩展的语法着色工具，使用现代化的 Web 标准构建，使用 Prism.js 可以快速为网站添加代码高亮功能，支持超过 113 种编程语言，每种语言定义约增加 300-500 字节大小，并且支持多种着色主题，它压缩后只有 2kb，非常易于使用，只需要插入一个 Prism.css 和 Prism.js 文件即可。还支持多种插件，是简洁、高效的代码高亮解决方案。

使用方法：

到 Prism 网站下载所需要的代码库，并上传到网站根目录。

在 Prism 下载页面，你需要选择你喜欢的着色主题、支持的编程语言和插件（插件也可不需要），选择完后下载生成的 JS 和 CSS 文件。

嗯…，CSS 你可以单独加载、也可以把内容放到你主题的 CSS 里。

着色主题的话，我用的是 Coy ，看起来比较清新。o(〃’▽’〃)o…

Prism 官网：http://prismjs.com Prism GitHub：https://github.com/LeaVerou/prism/ Prism 下载页面：http://prismjs.com/download.html

引用 Prism.js 和 Prism.css 。

打开你主题的 header.php ，在标签内引用 Prism.css ，如下。

<!DOCTYPE html>
<html>
<head>
    ...
    <link href="prism.css" rel="stylesheet" />
</head>

然后打开你主题的 footer.php ，在 </body> 标签内引用 Prism.js ，如下。

<body>
    ...
    <script src="prism.js"></script>
</body>
</html>

文章引用：

完成上述步骤后，就可以在文章中引用了。

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

<pre><code class="language-js">
/* 如果浏览器域名不是 saintw.cc 将跳转到 saintw.cc 对应的页面*/
if (document.location.host != "saintw.cc") {
    location.href = location.href.replace(document.location.host,'saintw.cc');
} 
</code></pre>

使用的时候只需把代码用 <pre> <code> 包裹起来即可。

后语：

嗯…，本站目前已经没有使用了。。