前端代碼高亮

前端頁面，插入的代碼高亮這一效果
由於用的是ecshop 這一坑貨。裏面仍是老的fckeditor,
連個插入代碼段的功能都沒有。
先是換上了ueditor,
有了插入代碼塊功能。

但代碼並無高亮呀。。。
而後就糾結。。。
碰巧，開源中國的編輯器就是用代碼高亮的。。。
而後，右鍵，查看元素。。。
嗯，ckeditor
而後又弄掉了百度編輯器，換了上ckeditor。
。。。
而後。昨不同。。
又花費了時間，看了ckeditor用使用。。。
終於能插入代碼段了。
也有那麼一點點，高亮。。。
本覺得成功的時候。。。
打開前臺一看。
並無。仍是那個醜樣。
。。。
折折騰騰。
好吧。
前端代碼高亮。
只是引入了js和css
對相應的code 進行匹配替換

<pre>
     <code class="language-js">

      var Prism = require('prismjs');

     // The code snippet you want to highlight, as a string
     var code = "var data = 1;";

      // Returns a highlighted HTML string
     var html = Prism.highlight(code, Prism.languages.javascript);

     </code>
</pre>

根據<code class="language-js">裏language相應的語言，高亮js,對其，進行相應的css來進行修飾。