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

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

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

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

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

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

highlight="ace" 启用代码高亮
ace-lang="javascript" 必选，指定代码语言
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);
        editor.setValue( editor.getValue().split('\n').join('\r\n'));
        editor.getSession().selection.clearSelection();
    }
}

继续水

标签: 软件开发 javascript Web技术

« 通过嗅探标准输入输出来了解VisualGDB烧录操作 | 将全部公开的SVN项目迁移到Git了»

引用地址:

发表评论：

V君的博客

中二死宅无脑码农　中二御宅コーダー　Chuuni Otaku Coder　　　　　　　　TOPCL = The Open Productivity Creative Laboratory ?