专栏首页Savalone's Blog百度编辑器 UEditor 用 highlight.js 库实现代码高亮

百度编辑器 UEditor 用 highlight.js 库实现代码高亮

效果就是本博客的效果:

<!-- 这是一段js代码 -->
<script>
var li_num=$(".i_n_left>ul>li").length;
var li_width=$(".i_n_left>ul>li").width();
$(".i_n_left>ul").width(li_num*li_width);
$(document).ready(function(e) {
$(".news_scroll>span").click(function(e) {
var sel_num=$(".news_scroll>span").index(this);
var scroll_width=li_width*sel_num;
$(".i_n_left>ul").animate({left:"-"+scroll_width});
$(this).siblings().removeClass("sel"); 
$(this).addClass("sel");
});
});
</script>

首先到官网去下载这个插件:https://highlightjs.org/download/

选择常用的语言,然后打包下载:

解压后:

写个页面测试下先:(其中 monokai-sublime.css,是 sublime 编辑器的一种常用样式,styles 文件夹有很多不同的样式库,可以多换换,挑个自己喜欢的用)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>代码高亮demo</title>
</head>
<body>
<!-- 引入css和js -->
<link rel="stylesheet" type="text/css" href="./styles/monokai-sublime.css">
<script type="text/javascript" src="./highlight.pack.js"></script>
<script>hljs.initHighlightingOnLoad();</script> 
<!--随便找断代码,放到<pre><code>***</code></pre>之间-->
<pre>
<code>
$(document).ready(function(){
  $("ul").each(function(){
    var lis = $(this).find("li");
    for(i in lis){
        var li = lis[i];
        console.log(i);
        if(i == 0){
            $(li).addClass("num_0");
        }else{
            if(i % 4 == 0){
                $(li).addClass("num_"+0);
            }else{
                $(li).addClass("num_"+(i%4));
            }
        }
    }
});
});
</code>
</pre>
</body>
</html>

效果如图:

demo下载:

highlight_demo.zip

此时还没有完,

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].innerHTML;
        onepre.innerHTML = '<code id="mycode">'+mycode+'</code>';
    }
</script>

至此,大功告成。

此外,还可以对代码块自定义 css,例如 white-space: pre; /*不强制换行*/ ,滚动条样式 scrollbar 等。


2019.10.07 更新

【PJAX 支持】

<script> 
 $(document).ready(hljs.initHighlighting);   //回调插件
 $(document).on('pjax:complete', function() { 
 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>'; 
 };   //循环插入<code></code>
 $('pre code').each(function(i, block) { 
 hljs.highlightBlock(block); 
 });   //高亮代码
 }); 
</script>

2019.10.18 更新

【行号支持】

今天突发奇想给代码区块把行号添加上,本着有插件就用插件的原则,找到了 highlightjs-line-numbers.js

Github:https://github.com/wcoder/highlightjs-line-numbers.js

用法非常简单,在 highlight.pack.js 后面调用,如下:

<script src="./highlight.pack.js"></script>
<script src="./highlightjs-line-numbers.min.js"></script>

调用代码同样是一句话,如下:

<script> 
  hljs.initHighlightingOnLoad();
  hljs.initLineNumbersOnLoad(); 
</script>

或者用以下代码调用,作用可参考上面的 PJAX

$(document).ready(function() {
    $('code.hljs').each(function(i, block) {
        hljs.lineNumbersBlock(block);
    });
});

插件会给代码区块包裹一层 tr 的行循环,行号是 td class="hljs-ln-line hljs-ln-numbers" ,代码为 td class="hljs-ln-line hljs-ln-code",此时就可以自定义一些样式 css 了。

/* for block of numbers */
pre code td.hljs-ln-numbers {
text-align: center;
color: #9c9c9c;
border-right: 0.5px solid #9c9c9c;
vertical-align: top;
padding-left: 0.5rem;
padding-right: 0.8rem;
}
/* for block of code */
pre code td.hljs-ln-code {
 padding-left: 1rem;
}

2019.12.13更新

【一键复制】

所用插件:clipboard.js

Github:https://github.com/zenorocha/clipboard.js

先来看一下自带的 Demo  

    <!-- 1. Define some markup -->
    <textarea id="bar">hello</textarea>
    <button class="btn" data-clipboard-action="cut" data-clipboard-target="#bar">Cut</button>
    <!-- 2. Include library -->
    <script src="../dist/clipboard.min.js"></script>
    <!-- 3. Instantiate clipboard -->
    <script>
    var clipboard = new ClipboardJS('.btn');
    clipboard.on('success', function(e) {
        console.log(e);
    });
    clipboard.on('error', function(e) {
        console.log(e);
    });
    </script>

button 的 data-clipboard-action="cut" 剪切

button 的 data-clipboard-action="copy" 复制 

然后可以看到 button 的 data-clipboard-target 属性值=要进行复制的目标元素的 id。

那么我们就要在每一个 pre 里面都要添加一个 data-clipboard-target 属性不同的 button 按钮,并且要为这个 pre 增加一个和 button 的 data-clipboard-target 属性一样的 id。最后调用 demo 里的 js。

那么开始:

引入 clipboard.min.js。

<script src="url/static/js/clipboard.min.js"></script>

找到以前用来循环插入 <code></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].innerHTML;
        onepre.innerHTML = '<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 目录内 target-textarea.html 的 js 代码

  <!--这个是官方 demo 的用法,也可以用我博客上的 js,增加了个复制成功的提示,交互更好些。-->
    <script>
    var clipboard = new ClipboardJS('.btn');
    clipboard.on('success', function(e) {
        console.log(e);
    });
    clipboard.on('error', function(e) {
        console.log(e);
    });
    </script>

改改 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;
}

完成!该有的效果都有了,应该不会再动了。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • PbootCMS 后台登录界面“3D 云”背景

    1.找到后台登录模板文件:/apps/admin/view/default/index.html

    Savalone
  • jq 特定日期全站变灰

    明日清明,举国哀悼,不忘记每个因疫情逝去的人,在一些特殊的日子里,我们可能会用到这段代码。

    Savalone
  • jq 判断是否有图片,如有给父级添加class

    Savalone
  • 网关 Spring-Cloud-Gateway 源码解析 —— 路由(1.1)之RouteDefinitionLocator一览

    本文主要对 路由定义定位器 RouteDefinitionLocator 做整体的认识。

    芋道源码
  • 原创干货:前端单元测试Jest零基础入门教学

    其实单元测试,就是先编写单元测试代码,然后使用单元测试框架,去模拟环境(例如浏览器),然后运行你的代码,看代码是否按预期运行

    Peter谭金杰
  • System Generator从入门到放弃(三)-Digital Filter

      Simulink中的仿真模型为连续时间系统,数据格式多种多样;而FPGA中为离散时间系统,数据必须用一定的位数进行量化。两者之间必须要进行从连续到离散的转换...

    碎碎思
  • 小测试

    可以在 @RequestMapping 注解里面加上 method=RequestMethod.GET 或者使用 @GetMapping 注解

    我是十三
  • js键盘事件以及键盘事件拦截

    小小咸鱼YwY
  • Jetson Xavier NX资料全放送,NVIDIA这次很麻利儿

    Volta GPU: 384 NVIDIA® CUDA® cores | 48 Tensor cores  

    GPUS Lady
  • 使用shell脚本定时采集日志数据到hdfs分布式文件系统

    别先生

扫码关注云+社区

领取腾讯云代金券