度編輯器(ueditor)功能豐富,在移動端的適配也做的不錯,而且自帶了代碼塊的編輯和高亮顯示功能。
打開代碼塊的編輯和顯示功能,有下面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'
]];
配置好菜單后,編輯器工具菜單欄里會顯示【代碼語言】項的菜單
編輯代碼塊內容
從html模式可以看到,代碼是放在<pre></pre>標簽中
前端顯示內容時,需要引入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(){
*請認真填寫需求信息,我們會在24小時內與您取得聯系。