引入ace编辑器用作代码高亮(杀鸡焉用牛刀?

作者:V君 发布于:2020-3-20 22:57 Friday 分类:小服杂记

博客中有不少文章把代码段贴出来,有(dan)空(teng)的时候想办法去弄点样式,没(lan)空的时候就直接贴纯文本。是时候应该解决一下了。那就去看看用什么组件好吧。

(放狗出去找)发现了 highlight.js ,看起来不错,但不支持显示行号,并且作者也不打算实现它。那就再找找吧,(找了一会儿),想起 ace 编辑器了,如果只要设置成只读,它就是一个优秀的代码高亮组件,还能折叠代码块。

废话少说开始干!首先找到代码插入点,这次我选择在 content/templates/default/footer.php 底部的 #wrap 结束标记后面,插入 CDN 库引用然后写了下面的代码来启用。

先TL;DR一下使用方法:在需要高亮的元素上增加以下属性

  1. highlight="ace" 启用代码高亮
  2. ace-lang="javascript" 必选,指定代码语言
  3. ace-theme="chrome" 可选,配色主题

代码语言和配色主题可以参照源代码文件名。

注释掉 log 语句并甩锅给 IE(

//replace nbsp \xa0 to normal space \x20
function normalizeSpaces(elm){
    var nodes = elm.childNodes;
    for (var i=0; i < nodes.length; ++i){
        if(nodes[i].nodeName === "#text") nodes[i].textContent = nodes[i].textContent.split("\xa0").join('\x20');
        else normalizeSpaces(nodes[i]);
    }
}

if (ace===undefined){
    console.log('highlight: ace undefined, no works');
}else{
    var items = document.querySelectorAll('[highlight=ace]');
    //console.log(`highlight: found ${items.length} element(s) to highlight, dealing with it.`);
    for (var i=0;i<items.length;++i){
        var item = items[i];
        
        var aceLang=item.getAttribute("ace-lang");
        if (aceLang === null){
            //console.warn(`highlight: the highlight element #${i} missing attribute 'ace-lang', skipped`);
            continue;
        }
        
        normalizeSpaces(item);
        
        var aceTheme=item.getAttribute("ace-theme");
        if (aceTheme === null) aceTheme = "Chrome";
        
        var editor = ace.edit(item);
        editor.setReadOnly(true);
        editor.setOptions({maxLines: Infinity});
        editor.setTheme("ace/theme/"+aceTheme);
        editor.session.setMode("ace/mode/"+aceLang);
    }
}

继续水

标签: 软件开发 javascript Web技术

引用地址:

发表评论:

Powered by emlog 去你妹的备案 sitemap