ace编辑html,Ace代码编辑器：将整个代码呈现为HTML？

太过爱你忘了你带给我的痛 2022-10-07 04:48 283阅读 0赞

“用户”指出我在正确的方向。我砍死在一起的东西，使用ACE构建对我的作品：左边https://github.com/ajaxorg/ace-builds/

pfN5W.png

定期ACE编辑器，静态HTML强调的右侧。 最初，页面源用作内容，但可以在编辑器中更改，右侧面板即时重新渲染。

ACE Static Highlighter

body {

overflow: hidden;

}

#editor, #static {

margin: 0;

position: absolute;

top: 0;

bottom: 0;

left: 0;

right: 50%;

}

#static {

left: 50%;

right: 0;

overflow: auto;

}

var highlight = ace.require(“ace/ext/static_highlight”)

var dom = ace.require(“ace/lib/dom”)

var codeEl = document.getElementById(“static”);

var editor = ace.edit(“editor”);

//editor.session.setMode(“ace/mode/html”);

//editor.setTheme(“ace/theme/twilight”);

editor.setOptions({

showPrintMargin: false,

mode: “ace/mode/html”,

theme: “ace/theme/twilight”

});

editor.session.setValue(document.documentElement.outerHTML);

doHighlight(editor, codeEl);

editor.session.on(“change”, function() {

doHighlight(editor, codeEl);

});

function doHighlight(editor, codeEl) {

codeEl.textContent = editor.session.getValue();

highlight(codeEl, {

// broken, see https://stackoverflow.com/a/31882064/2044940

//mode: editor.session.getMode().$id,

mode: editor.session.$modeId,

theme: editor.getTheme(),

startLineNumber: 1,

showPrintMargin: false,

trim: true

}, function (highlighted) {

var themeStyleId = editor.getTheme().replace(“/theme/“, “-“);

var match = document.getElementById(themeStyleId).innerHTML.match(

new RegExp(`.${themeStyleId}\\s+\\{[^}]*?background-color:\\s*?([^;,}]+)`)

);

if (match) {

codeEl.style.backgroundColor = match[1];

}

});

}

如果有一个不太危险的方式来获得主题的背景颜色，请让我知道。

发表评论

表情：
评论列表 （有 0 条评论，283人围观）

还没有评论，来说两句吧...

相关阅读

    相关 AC代码

    ............此处省略一万分AC代码         加油咯！！！代码还是尽量自己写，看别人的博客不是不可以，看别人的代码也不是不可以，如果你不看

    亦凉亦凉/ 0 赞/ 242 阅读