百度ueditor编辑器代码高亮的问题

有些时候我们使用了百度的ueditor编辑器后,写的文章在前台展示的时候,会发现代码并没有高亮,都是灰色的。想下图的这样的。

而有正常的代码高亮的文章显示,是这样的。

看到差别了吗?
其实最终的原因是你的文章在读取内容的没有使用百度的代码高亮插件
插件名分别是

shCoreDefault.css,shCore.js

我们以我当前的博客为例,为大家展示下,如何处理这种问题。

1、去百度的ueditor官网下载插件

访问地址:http://ueditor.baidu.com/website/download.html
我当前使用的是最新版的utf-8版本,你们可以根据自己的需要下载。

2、解压文件,找到自己需要的插件。

插件目录如下:

ueditor1_4_3_3-utf8-php/utf8-php/third-party

找到 SyntaxHighlighter 文件夹
然后把这个文件整个拷贝下。

3、把语法识别文件放在自己的网站模板的文件下。

我的网站放置目录如下:

blog/public/common/umeditor/third-party
如图:已经放置好插件的示例

4、然后打开模板文件,添加一下三个地方

根据自己使用的模板,我当前使用的模板是default,则进入下面的目录

blog/public/default

各位可以根据自己的文章结构灵活的改动
(1)在header.html文件的头部引入下面的代码
css样式的引入[引入到头部]

<!-- 加载语法插件 start -->
<link href="{$domain}public/common/umeditor/third-party/SyntaxHighlighter/shCoreDefault.css" type="text/css" rel="stylesheet">
<!-- 加载语法插件 end -->

(2)在footer.html文件的尾部引入下面的代码
js样式的引入[引入在末尾]

<!-- 加载语法插件 start -->
<script type="text/javascript" src="{$domain}public/common/umeditor/third-party/SyntaxHighlighter/shCore.js"></script>
<script type="text/javascript">
    SyntaxHighlighter.all();
</script>
<!-- 加载语法插件 end -->

如此就搞定的了网也得语法的问题了。

发布了33 篇原创文章 · 获赞 0 · 访问量 97

猜你喜欢

转载自blog.csdn.net/binxi9894/article/details/105332311
今日推荐