前端代码高亮

前端页面，插入的代码高亮这一效果
因为用的是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来进行修饰。

来源：oschina

链接：https://my.oschina.net/u/1773320/blog/710798