使用prism.js插件来做代码高亮
//引入文件 <link rel="stylesheet" href="{{asset('prism/prism.css')}}"> <script type="text/javascript" src="{{asset('prism/prism.js')}}"></script> //在文本的最后面引入
因为prism.js和ueditor生成的代码结构不一样,paism.js的高亮结构是
<pre><code class="language-css">p { color: red }</code></pre>//类名为language-语言
而ueditor的代码结构是:
<pre class="brush:css">p { color: red }</pre>//类名为brush:语言
所以,需要修改一下代码结构
//修改笔记中代码的结构 高亮 $(function(){ $("pre").each(function(){ //获取到自己的内容和类名 var content = $(this).html(); $(this).html("");//清空自己的内容 var cla = $(this).attr("class"); var newcla = ""; if(cla != null){ newcla = cla.replace("brush:","language-"); } var newNode = "<code class='"+ newcla + "'>" + content + "</code>"; $(this).append(newNode); }); });
这样就大功告成了