Skip to main content

PrismJs

Dev
Table of Contents

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 提供了七款主题,有需要的可以根据要求写自己的。

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