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

太过爱你忘了你带给我的痛 2022-10-07 04:48 203阅读 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\];

\}

\});

\}

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

[pfN5W.png]: https://i.stack.imgur.com/pfN5W.png

发表评论取消回复

表情：

评论列表（有 0 条评论，203人围观）

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

相关阅读

相关 vue中使用代码编辑器 Ace editor

一、介绍 Ace是一个用JavaScript编写的可嵌入代码编辑器。它与Sublime，Vim和TextMate等本地编辑器的功能和性能相匹配。它可以轻松地嵌入任何网页和Ja

ゝ一世哀愁。/ 2022年11月13日 04:17/ 0 赞/ 741 阅读

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

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

太过爱你忘了你带给我的痛/ 2022年10月07日 04:48/ 0 赞/ 204 阅读

相关 html 编辑器代码高亮,JS代码高亮编辑器 ace.js

java UUID UUID是Universally Unique Identifier的缩写,它是在一定的范围内(从特定的名字空间到全球)唯一的机器生成的标识符.UUID具

喜欢ヅ旅行/ 2022年10月06日 13:53/ 0 赞/ 218 阅读

相关 html中加入代码编辑器,让HTML textarea支持类似代码编辑器书写

var stopEvent = function (evt) \{ if (evt.preventDefault) evt.preventDefault(); if (e

Love The Way You Lie/ 2022年10月06日 05:51/ 0 赞/ 126 阅读

相关 AC代码

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

亦凉/ 2022年07月14日 04:23/ 0 赞/ 135 阅读

相关 Itext实现将Html代码转换为Doc

最近一个项目中需要将页面的一些字段生成doc文档，而页面中部分字段是使用kindeeditor编辑器编辑的，存到数据库中是html代码，如： <p class="20

小鱼儿/ 2022年06月01日 04:13/ 0 赞/ 539 阅读

相关怎样用Sourceinsight编辑/浏览整个工程的代码

我们都知道Source insight是一款非常非常优秀的源代码编辑/浏览软件，它具有优秀的界面以及支持各种语言的功能，我最喜欢的是它的代码高亮的特性。接下来我以一个IA

男娘i/ 2022年05月14日 09:53/ 0 赞/ 197 阅读

相关 AngularJS中页面呈现html代码段

如何在页面呈现一段html代码段呢？在textarea中我们这样写： <textarea name="" id="" cols="30" rows=""

拼搏现实的明天。/ 2021年11月02日 13:00/ 0 赞/ 265 阅读

相关 Ace在线代码编辑器使用

这边文章[https://blog.csdn.net/liuxiao723846/article/details/106732401][https_blog.csdn.net_

旧城等待，/ 2021年09月02日 08:24/ 0 赞/ 637 阅读

相关 Ace(在线代码编辑器)介绍、使用

介绍 Ace是一个用JavaScript编写的可嵌入代码编辑器。它与Sublime，Vim和TextMate等本机编辑器的功能和性能相匹配。它可以轻松地嵌入任何网页和Ja

小灰灰/ 2021年05月12日 11:50/ 0 赞/ 2243 阅读