使用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);
});
});这样就大功告成了