漂亮的代码语法高亮插件Prism.js简单使用文档

时间 2019-11-05

标签漂亮代码语法插件 prism.js prism 简单使用文档栏目 JavaScript 繁體版

原文原文链接

网页代码高亮插件真的是很是多。例如：SyntaxHighlighter ，Google Code Prettify，Highlight.js等等。javascript

今天介绍一个漂亮并且小巧的JS插件：Prism.jsphp

官网地址：http://prismjs.com/index.html
原文连接：http://weiya.me/item/65.htmlcss

为何选用Prism.js？

除了简单，小巧以外，还有如下优势html

极致易用：引用 prism.css 和 prism.js，使用合适的 HTML5 标签（code.language-xxxx），搞定！java

天生伶俐：语言的 CSS 类是可继承的，因此你只需定义一次就能应用到多个代码片断。编程

轻如鸿毛：代码压缩后只有 1.6KB。每添加一个语言平均增长 0.3-0.5KB，主题在 1KB 左右。数组

快如闪电：若是可能，支持经过 Web Workers 实现并行。markdown

轻松扩展：定义新语言或扩展示有语法，或者新增功能都很是简单。app

丰富样式：全部的样式经过 CSS 完成，并使用合理的类名如：.comment, .string, .property 等。编程语言

谁在使用

咱们截取一些官方公布的使用者，这里不乏一些十分大的网站。

示例

本文博客就是使用的Prism.js，咱们直接来一段代码示例

HTML：

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

CSS：

.container .content .copy-link{
    border:1px solid #E5E5E5;
    background:#f9f9f9;
    padding:15px 15px 15px 120px;
    margin-bottom:30px;
    position: relative;
    margin-top:90px;
}

PHP：

public function init()
{
    parent::init(); // TODO: Change the autogenerated stub
    if(Yii::$app->user->id)
    {
        $this->redirect(Url::home());
    }
}

固然，不止这么多。Prism.js还支持其余上百种的编程语言。

其余主题

本博客使用的是Prism.js的默认主题，另外其还支持不少种主题。

Dark：

Funky

Okaidia

Twilight

Coy

Solarized light

下载

Prism.js支持不少种语言和插件主题。把一些没必要要支持的语言包下载下来，会加大库文件大小，拖累咱们网站加载速度。因此Prism.js采用自定义下载。

从这里能够看出Prism.js支持的配置项仍是很是多的。咱们勾选上咱们须要的选项，点击最下方的下载css和js下载文件。

提示： 除了选择语言，在最下方的Plugins选项中，有一个Line Numbers仍是很是值得下载的，能够在代码前显示行号。

使用

使用很是简单，首先引入刚刚下载好的2个文件。

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

页面上只要遇到相似下面的代码，就会被高亮。

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

可是，并非全部的后台编辑器都会直接产生相似这样的代码。

下面看两种经常使用编辑器产生的代码相关HTML。

Markdown

首先来看经常使用markdown编辑器，若是遇到代码编辑，他们会产生以下的HTML代码：

<pre>
    <code class="language-php">
        class GrabImage{
        
        }
    </code>
</pre>

彻底符合要求，因此只须要在markdown编辑代码的时候选择语言就没有问题。

Ueditor

再来看市面上使用很是普遍的百度Ueditor编辑器，后台代码编辑会产生以下的HTML代码

<pre class="brush:html;toolbar:false">&lt;link&nbsp;rel=&quot;icon&quot;&nbsp;href=&quot;&quot;&gt;</pre>

并无产生预期的效果，而是只生成<pre>和一个class="brush:html;toolbar:false"。这个class但是不通常，其中brush:html中的html就表明的是HTML标签。若是在后台咱们选择代码语言为java，那么这里会显示brush:java。因此，咱们只要获取语言名称就能够构造符合要求的高亮代码。

这里咱们只使用JS构造高亮代码，若是使用后台语言来构造不作研究。

$(document).ready(function(){
    var doc_pre = $("#post_content pre");
    doc_pre.each(function(){
        var class_val = $(this).attr('class');
        var class_arr = new Array();
        class_arr = class_val.split(';');
        class_arr = class_arr['0'].split(':');
        var lan_class = 'language-'+class_arr['1'];
        var pre_content = '<code class="'+lan_class+'">'+$(this).html()+'</code>';
        $(this).html(pre_content);
    });
});

阐述下逻辑：

首先遍历全部的<pre>标签，获取其class属性值。
使用;号来分隔值，放入数组。
再次获取数组第一个值，再次使用:分隔，放入数组。数组内第二个值即为html（代码语种）
获取<pre>标签内容，放入<code>包裹起来，再次放入<pre>标签。

随便找了个示例看下：

<pre class="brush:html;toolbar:false language-html">
    <code class=" language-html">
        <span class="token tag">
            <span class="token tag">
                <span class="token punctuation">&lt;</span>link
            </span> 
            <span class="token attr-name">rel</span>
            <span class="token attr-value">
                <span class="token punctuation">=</span>
                <span class="token punctuation">"</span>icon
                <span class="token punctuation">"</span>
            </span> 
            <span class="token attr-name">href</span>
            <span class="token attr-value">
                <span class="token punctuation">=</span>
                <span class="token punctuation">"</span>
                <span class="token punctuation">"</span>
            </span>
            <span class="token punctuation">&gt;</span>
        </span>
    </code>
</pre>

添加行号

须要实现行号效果，只须要在<pre>标签中加上line-numbers类便可。在以前的js代码中添加一行。

提示：要记得你下载了Line Numbers插件

$(this).attr("class",'line-numbers '+lan_class);

实现效果：

完整代码：

$(document).ready(function(){
    var doc_pre = $("#post_content pre");
    doc_pre.each(function(){
        var class_val = $(this).attr('class');
        var class_arr = new Array();
        class_arr = class_val.split(';');
        class_arr = class_arr['0'].split(':');
        var lan_class = 'language-'+class_arr['1'];
        var pre_content = '<code class="'+lan_class+'">'+$(this).html()+'</code>';
        $(this).html(pre_content);
        $(this).attr("class",'line-numbers '+lan_class);
    });
});