百度編輯器 UEditor 用 highlight.js 庫實(shí)現(xiàn)代碼高亮
寫個頁面測試下先:(其中 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>
highlight.js 代碼高亮遵循的格式是:<pre><code>**</code></pre>,
而百度編輯器的代碼語言模式生成的為 <pre>**</pre> 缺少 <code></code> 那一層,
所以還要在頁面加一段 js,循環(huán)往 pre 標(biāo)簽里添加 code 標(biāo)簽。如下:
<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; /*不強(qiáng)制換行*/ ,滾動條樣式 scrollbar 等。
PJAX 支持】
<script> $(document).ready(hljs.initHighlighting); //回調(diào)插件 $(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>'; }; //循環(huán)插入<code></code> $('pre code').each(function(i, block) { hljs.highlightBlock(block); }); //高亮代碼 }); </script>
行號支持】
今天突發(fā)奇想給代碼區(qū)塊把行號添加上,本著有插件就用插件的原則,找到了 highlightjs-line-numbers.js
Github:https://github.com/wcoder/highlightjs-line-numbers.js
用法非常簡單,在 highlight.pack.js 后面調(diào)用,如下:
<script src="./highlight.pack.js"></script> <script src="./highlightjs-line-numbers.min.js"></script>
調(diào)用代碼同樣是一句話,如下:
<script> hljs.initHighlightingOnLoad(); hljs.initLineNumbersOnLoad(); </script>
或者用以下代碼調(diào)用,作用可參考上面的 PJAX
$(document).ready(function() { $('code.hljs').each(function(i, block) { hljs.lineNumbersBlock(block); }); });
插件會給代碼區(qū)塊包裹一層 tr 的行循環(huán),行號是 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; }
【一鍵復(fù)制】
所用插件: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" 復(fù)制
然后可以看到 button 的 data-clipboard-target 屬性值=要進(jìn)行復(fù)制的目標(biāo)元素的 id。
那么我們就要在每一個 pre 里面都要添加一個 data-clipboard-target 屬性不同的 button 按鈕,并且要為這個 pre 增加一個和 button 的 data-clipboard-target 屬性一樣的 id。最后調(diào)用 demo 里的 js。
那么開始:
引入 clipboard.min.js。
<script src="url/static/js/clipboard.min.js"></script>
找到以前用來循環(huán)插入 <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 循環(huán)增加 id,并為 pre 內(nèi)的 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>
直接復(fù)制 demo 目錄內(nèi) target-textarea.html 的 js 代碼
<!--這個是官方 demo 的用法,也可以用我博客上的 js,增加了個復(fù)制成功的提示,交互更好些。--> <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; }
完成!該有的效果都有了,應(yīng)該不會再動了。