百度ueditor编辑器如何使用自定义的高大上高亮皮肤?

时间:2024-04-13 10:19:25

百度自带的代码高亮皮肤简直是太丑露了有木有!看到那个皮肤都没有再看代码的欲望了……如何让百度ueditor的编辑器的代码高亮看的更加美观高大上一些呀?今天尚睿德创就给大家分享一下我们是如何做的!

百度ueditor编辑器如何使用自定义的高大上高亮皮肤?

 

首先使用到了一个插件:highlight.js   可以直接去官网下载或者使用CDN。

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/styles/default.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/highlight.min.js"></script>

 

不过这个是一个默认的皮肤,比百度自带的也好不了多少,所以我们需要给它更换一个更美观的皮肤,可以参考:https://highlightjs.org/static/demo/   示例,选出你喜欢的皮肤。尚睿德创喜欢用的是 atom-one-dark  这个皮肤,所以直接引用官方CDN。

 

<link rel="stylesheet" href="https://highlightjs.org/static/demo/styles/atom-one-dark.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/highlight.min.js"></script>

 

在网站文章页面加入这些链接,还需要添加一点js代码,因为百度的代码标签格式是pre,而 highlight.js 支持的是 

<pre><code>代码</code></pre>

 

所以我们需要给用到代码的地方添加code标签,在文章页面底部加入script 标签,写入以下代码:

hljs.initHighlightingOnLoad();

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

 

此时,代码高亮已设置完毕了!当然,如果你想要设置字号大小和字体,你也可以通过class来自定义样式和字体。其实,使用这个这个插件不仅仅局限于百度编辑器,你可以把它用在任何编辑器上面!具体用法大家根据需求略微变通即可。

 

然后生成一下文章页去看看效果吧!如果能帮到大家,希望大家转发时注明一下出处,在此多谢大家!