Ace代码编辑器：将整个代码呈现为HTML？
CodeManX
Ace在突出显示代码时很聪明，并且不会渲染所有代码，但仅比当前视图所需的内容多一点。
但是，对于我的用例，我需要获取整个代码的呈现HTML源代码。有没有办法让它一次渲染我所有的代码？
CodeManX
“用户”向我指出了正确的方向。我使用ace版本共同破解了一些对我有用的东西：https：//github.com/ajaxorg/ace-builds/
左侧为常规ACE编辑器，右侧为静态突出显示的HTML。最初，页面源用作内容，但可以在编辑器中进行更改，并且立即重新渲染右侧面板。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ACE Static Highlighter</title>
<style type="text/css" media="screen">
body {
overflow: hidden;
}
#editor, #static {
margin: 0;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 50%;
}
#static {
left: 50%;
right: 0;
overflow: auto;
}
</style>
</head>
<body>
<pre id="editor"></pre>
<pre id="static"></pre>
<script src="ace/build/src/ace.js"></script>
<script src="ace/build/src/ext-static_highlight.js"></script>
<script>
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];
}
});
}
</script>
</body>
</html>
如果获取主题背景颜色的方法不那么骇人听闻，请告诉我。
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
编辑于
相关文章
TOP 榜单
- 1
Linux的官方Adobe Flash存储库是否已过时？
- 2
如何使用HttpClient的在使用SSL证书，无论多么“糟糕”是
- 3
错误：“ javac”未被识别为内部或外部命令，
- 4
在 Python 2.7 中。如何从文件中读取特定文本并分配给变量
- 5
Modbus Python施耐德PM5300
- 6
为什么Object.hashCode（）不遵循Java代码约定
- 7
如何检查字符串输入的格式
- 8
检查嵌套列表中的长度是否相同
- 9
错误TS2365：运算符'！=='无法应用于类型'“（”'和'“）”'
- 10
如何自动选择正确的键盘布局？-仅具有一个键盘布局
- 11
如何正确比较 scala.xml 节点？
- 12
在令牌内联程序集错误之前预期为 ')'
- 13
如何在JavaScript中获取数组的第n个元素？
- 14
如何将sklearn.naive_bayes与（多个）分类功能一起使用？
- 15
ValueError：尝试同时迭代两个列表时，解包的值太多（预期为 2）
- 16
如何监视应用程序而不是单个进程的CPU使用率？
- 17
解决类Koin的实例时出错
- 18
ES5的代理替代
- 19
有什么解决方案可以将android设备用作Cast Receiver？
- 20
VBA 自动化错误：-2147221080 (800401a8)
- 21
套接字无法检测到断开连接
我来说两句