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

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

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

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];

}

});

}

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