JS可带行号的可扩展的代码语法高亮库Prism.js

来源：易助科技网浏览量：5收藏

简介

Prism 是一个轻量级并且简单易用的 JavaScript 类库，minified 和 gzipped 压缩后只有 1.5kb 大小，即使添加语言定义代码，最大也不会超过 2kb，是目前最小的代码高亮 Javascript 类库。

Prism 使用非常简单，只需添加 Javascript 和 CSS 就能够轻易的将其整合进项目中使用。目前它已内置了 HTML\CSS\Javascript 三种语言的高亮支持，你也可以添加新的语法高亮配置文件，只需修改 Javascipt 和 CSS 文件就行。除此之外，它也提供了额外的插件功能，让你可以新增其它功能，比如自动转换链接等，你也可以自己撰写插件。

使用

1. 引入 Prism.js 文件

2. 简单使用

<head>
  <link href="prism.css" rel="stylesheet" />
</head>
<body>
  <pre>
    <code class="language-css">
      p { color: red }
    </code>
  </pre>
  <script src="prism.js"></script>
</body>

注意： class 为 language-css，如果是 javascript 就是 class="language-javascript"。

3. 扩展使用，如：带行号

在目录下插件 plugins/line-numbers 这个文件夹的全部内容就指的是行号。源代码如下：

<head>
  <link href="prism-okaidia.css" rel="stylesheet" />
  <link href="prism-line-numbers.css" rel="stylesheet" />
</head>
<body>
  <pre class="line-numbers">
    <code class="language-php">
      namespace my\name;
      $c = new \my\name\MyClass;
      $arr = [1,2,3];
      trait ezcReflectionReturnInfo {
        function getReturnType() { /*1*/ }
        function getReturnDescription() { /*2*/ }
      }
      function gen_one_to_three() {
        for ($i = 1; $i <= 3; $i++) {
          // Note that $i is preserved between yields.
          yield $i;
        }
      }
    </code>
  </pre>
  <script src="prism.js"></script>
  <script src="prism-php.js"></script>
  <script src="prism-line-numbers.js"></script>
</body>

JS可带行号的可扩展的代码语法高亮库Prism.js

简介

使用

1. 引入 Prism.js 文件

2. 简单使用

3. 扩展使用，如：带行号

相关链接