Laravel使用Ueditor百度编辑器,添加代码高亮功能

发布于2019-09-23 17:20:31  分类:laravel   阅读( 356 ) 

为了更好的记录一些学习心得,自建一个简易博客,使用了Laravel6+Ueditor编辑器,需要使用其代码高亮功能,只需要在需要代码高亮的页面,或者公用页面头部加上:

    <!-- 代码高亮 -->
    <script type="text/javascript" src="/vendor/ueditor/third-party/SyntaxHighlighter/shCore.js"></script>   
    <link href="/vendor/ueditor/third-party/SyntaxHighlighter/shCoreDefault.css" rel="stylesheet"/>
    <script type="text/javascript">SyntaxHighlighter.all();</script>

效果如下图,个人并不怎么喜欢。

需要注意的是,引用的路径要正确,Laravel访问public是根目录,相对路径要根据这个来写。代码高亮目前存在的问题,一些js代码会被解析,导致页面无法将代码显示出来。对于html代码,在编辑器中容易被解析成渲染完成的画面,而不是代码。目前还没找到原因。

最近看到一篇文章:百度编辑器(UEditor)结合highlight.js实现代码高亮显示,感觉这代码高亮效果不错,因此也换了,方法如下:

首先到官网去下载这个插件:https://highlightjs.org/download/,选择好语言 Download下载,解压了网站public目录里,如图:

在app.blade.php公用视图文件head里添加:

<script type="text/javascript" src="/highlight/highlight.pack.js"></script>
<link rel="stylesheet" type="text/css" href="/highlight/styles/tomorrow-night-eighties.css">
<script>hljs.initHighlightingOnLoad();</script>

因为这里使代码高亮遵循的格式是:<pre><code>你的代码</code></pre>,而百度编辑器默认的代码块显示格式为:<pre>你的代码</pre>,因此,需要循环往pre标签里添加code标签,添加js代码如下:

    var allpre = document.getElementsByTagName("pre");
    for(i = 0; i < allpre.length; i++) 
    {
        var onepre = document.getElementsByTagName("pre")[i];
        var mycode = document.getElementsByTagName("pre")[i].innerHTML;
        onepre.innerHTML = '<code id="mycode">'+mycode+'</code>';
    }

这样就能实现代码高亮了,效果如本页面。

最后更新于:2019-11-01 08:44:53


上一篇: 朱自清散文《匆匆》朗诵

下一篇: Laravel 使用Ajax方式上传视频等文件


  • 最新评论(共0条)
需要登录才能发表评论

加入组织

  • QQ
  • 1. 手Q扫左侧二维码

    2. 搜Q群:617719749

    3. 点击加入学习群

最新评论