ueditor代碼高亮 prismjs代碼高亮插件

時間 2019-11-20

標籤 ueditor 代碼 prismjs 插件简体版

原文原文鏈接

網頁代碼高亮插件真的是很是多。例如：SyntaxHighlighter ，Google Code Prettify，Highlight.js等等。php

今天介紹一個漂亮並且小巧的JS插件：Prism.jscss

官網地址：http://prismjs.com/index.html
原文連接：http://weiya.me/item/65.htmlhtml

爲何選用Prism.js？

除了簡單，小巧以外，還有如下優勢java

極致易用：引用 prism.css 和 prism.js，使用合適的 HTML5 標籤（code.language-xxxx），搞定！編程

天生伶俐：語言的 CSS 類是可繼承的，因此你只需定義一次就能應用到多個代碼片斷。數組

輕如鴻毛：代碼壓縮後只有 1.6KB。每添加一個語言平均增長 0.3-0.5KB，主題在 1KB 左右。markdown

快如閃電：若是可能，支持經過 Web Workers 實現並行。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);
    });
});

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。