百度编辑器 UEditor 用 highlight.js 库实现代码高亮
代码高亮
下载插件
首先下载highlight.js插件,可在本文页尾免费下载,或自行百度下载。
引用插件
将下载的压缩包解压,引用css和js(本文提供的附件中 monokai-sublime.css,是 sublime 编辑器的一种常用样式,自行下载的插件包 styles 文件夹有很多不同的样式库,也可以自己挑个自己喜欢的用)
<!-- 引入css和js -->
<link rel="stylesheet" type="text/css" href="你的路径/monokai-sublime.css">
<script type="text/javascript" src="实际路径/highlight.pack.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
添加代码
highlight.js 代码高亮遵循的格式是:<pre><code>**</code></pre>,而百度编辑器的代码语言模式生成的为 <pre>**</pre> 缺少 <code></code> 那一层,所以还要在页面加一段 js,循环往 pre 标签里添加 code 标签。如下:
<script type="text/javascript">
var allpre = document.getElementsByTagName("pre");
for(i = 0; i < allpre.length; i++)
{
var onepre = document.getElementsByTagName("pre")[i];
var mycode = document.getElementsByTagName("pre")[i][xss_clean];
onepre[xss_clean] = '<code id="mycode">'+mycode+'</code>';
}
</script>
至此,基本的代码高亮显示效果就制作完成了,如果还想在代码框中增加一键复制功能,可继续按照以下教程开发。
一键复制
下载插件
首先下载clipboard.js插件,可在本文页尾免费下载,或自行百度下载。
引用插件
将下载的压缩包解压,引用js
<script src="实际路径/clipboard.min.js"></script>
添加代码
将代码高亮那一步中添加的代码,循环插入 <code></code> 的代码改为以下代码(在 code 层前面增加了一个 button)
<script type="text/javascript">
var allpre = document.getElementsByTagName("pre");
for(i = 0; i < allpre.length; i++)
{
var onepre = document.getElementsByTagName("pre")[i];
var mycode = document.getElementsByTagName("pre")[i][xss_clean];
onepre[xss_clean] = '<button class="btn" data-clipboard-action="copy">COPY</button><code id="mycode">'+mycode+'</code>'; //在 code 层前面增加了一个 button
}
</script>
为 pre 循环增加 id,并为 pre 内的 button 增加 data-clipboard-target 属性
<script>
$("pre").each(function(){
$(this).attr('id',"pre"+$(this).index());
var btns = $(this).find("button");
$(btns).attr('data-clipboard-target',"#pre"+$(this).index())
});
</script>
添加官方demo中的复制代码
<script>
var clipboard = new ClipboardJS('.btn');
clipboard.on('success', function(e) {
console.log(e);
});
clipboard.on('error', function(e) {
console.log(e);
});
</script>
复制按钮的css样式,添加到你的css文件中
pre {
position: relative;
}
pre .btn{
display: none;
position: absolute;
top:0;
right: 0;
background: #333;
color: #9c9c9c;
border: 1px solid #232323;
}
pre .btn:hover{
color: #fff
}
pre:hover .btn{
display: block;
}
至此,代码高亮加一键复制功能就全部完成了。
相关文档
- 做网站不花钱能上百度首页吗?
- 做网站不花钱也能上百度首页?
- 快照关键词优化,百度快照关键词
- K2SEO4到底能不能让你的网站冲上百度首页?
- SEO百度快排工具真能三天上首页吗?
- SEO百度推广真的能让你的网站流量翻倍吗?
- SEO百度点击软件真的能让你一夜之间冲上首页吗?
- 中了百度惊雷算法2!网站该怎么恢复 请大神们指导一下
- WordPress古腾堡Gutenberg编辑器常见问题解答
- 之前百度收录的文章 网站改版后变成无效链接 现在百度收录好多...
- 主动向百度提交链接有用吗?
- wordpress 网站优化,WordPress网站优化代码合集...
- 如何通过“ChatGPT行程签证”轻松实现全球旅行梦想
- 2025人工智能与SEO的深度结合|百度算法适配与效率革命
- pbootcms模板利用宝塔面板计划任务执行自动推送网址到百度
- pbootcms模板修改tags实现keywords内容关联匹配
- pbootcms模板幻灯片调用代码大全
- pbootcms后台的百度普通收录token怎么填写?怎么获得?
- pbootcms网站标签pboot:list当前文档高亮设置教程
- pbootcms编辑器过滤div代码解决办法
下一篇: 迅睿cms使用全局表单制作证书查询功能