度編輯器(ueditor)功能豐富，在移動端的適配也做的不錯，而且自帶了代碼塊的編輯和高亮顯示功能。

打開代碼塊的編輯和顯示功能，有下面3個步驟：

1/3 編輯器的菜單配置

注意菜單項的配置是否包括了插入代碼的菜單項；

菜單名稱：insertcode ，菜單項的默認配置文件是 ueditor.config.js

toolbars = [[
    'source','insertcode',
    'bold', 'italic', 'underline', 'strikethrough', 'customstyle', '|', 'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist', '|',
    'lineheight', '|','fontfamily', 'fontsize', '|',
    'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify','indent' ,'removeformat', '|',
    'link',
    'insertimage',  'insertvideo', 'attachment', '|', 'inserttable', 'deletetable', 'insertparagraphbeforetable', 'insertrow', 'deleterow', 'insertcol', 'deletecol', 'mergecells',
    'spechars'
]];

2/3 編輯器中插入代碼塊

配置好菜單后，編輯器工具菜單欄里會顯示【代碼語言】項的菜單

編輯代碼塊內容

從html模式可以看到，代碼是放在<pre></pre>標簽中

3/3 內容顯示時代碼塊的渲染

前端顯示內容時，需要引入SyntaxHighlighter插件，并調用初始化方法后才會進行渲染

<script type="text/javascript" src="/lib/ueditor1_4_3_2/third-party/SyntaxHighlighter/shCore.js"></script>
<link rel="stylesheet" type="text/css" href="/lib/ueditor1_4_3_2/third-party/SyntaxHighlighter/shCoreDefault.css"/>

<script type="text/javascript">
    $(document).ready(function () {
        SyntaxHighlighter.all();
    });
</script>

渲染效果

瀏覽器中，一個比較常見的高亮文本場景是，用戶按下快捷鍵ctr+f，對文本內容進行搜索。在頁面里，相應的文本就會高亮。這種高亮，是瀏覽器實現的。

如果我們要實現這種高亮效果，現有的CSS實現起來是相對比較麻煩的。

方案一，使用偽元素::selection

當我們在頁面中，選中一段文本的時候，可以通過document.getSelection()獲取到文本選中的節點信息。相應的，我們可以通過Range Api去主動設置選中文本范圍。再通過設置::selection樣式，實現選中文本高亮效果。這種方案，實現起來比較麻煩，我們需要精確計算每一個高亮預期的選中起止位置。

方案二，對于在頁面中需要高亮的文本，進行單獨處理

對于靜態呈現的內容，在開發中，一般通過設置固定的標簽和樣式實現文本高亮。

對于需要動態變化的內容處理，例如codemirror，會有一套獨立的dom結構樹，通過dom結構樹，根據處理后的dom結構，在頁面中呈現出高亮。這種方案，就相當復雜了。

方案三, 使用偽元素::highlight

這個方案的實現方式，與::selection類似。通過Range Api 設置選中區域。再將這些區域配置進需要高亮的Hight中，最后通過設置::highlight樣式實現高亮。

這種方案，比::selection方案具有更強的可操作性。這是新的api，各個瀏覽器沒有完全實現。

【參考資料】

[1] CSS Custom Highlight API: The Future of Highlighting Text Ranges on the Web. https://css-tricks.com/css-custom-highlight-api-early-loo/

avaScript奇淫技巧：命令行語法高亮

本文，將實現命令行輸出帶有語法高亮、帶行號的JS代碼。

效果如下圖所示：

對于JS程序員而言，這個效果是有些驚喜的。

而實現起來，卻似乎是出乎意料的簡單。

直接上源碼：

var js_code = `

function get_copyright(){