laravel-ueditor高亮问题,用prism.js

使用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);
    });
});

这样就大功告成了


首页 我的博客
粤ICP备17103704号