PrismJs

Web Jan 25, 2017

Prism 是一款代码语法高亮的插件。(本博客也是用这高亮语法)

官网:http://prismjs.com/

例子

1、加载原文件,主题 CSS 和 Prism 的文件

<!DOCTYPE html>
<html>
<head>
	...
	<link href="themes/prism.css" rel="stylesheet" />
</head>
<body>
	...
	<script src="prism.js"></script>
</body>
</html>

2、使用语法,在 <code> 添加 class:language-xxx

xxx 就是要高亮的代码语言,例如 CSS

Code:

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

渲染:

p {
  color: red;
}

默认语法包括:html, css, javascript。其它的语法(如 nginx、typescript、bash、diff)需要额外的资料。在下载页( http://prismjs.com/download.html )把需要的代码语言打勾。

Prism 也有好多插件,高亮某一行代码,显示行号,预览颜色、CSS 的动画时间、角度,自动添加链接……等等。

Prism 提供了七款主题,有需要的可以根据要求写自己的。

下载页也会显示总共文件大小。

Wai Tsang

💥8➕26.