Ace 代码编辑器：将整个代码渲染到 HTML？

Question

Ace 在使用突出显示呈现代码时很聪明，不会呈现所有代码，但只比当前视图需要的多一点。

但是，对于我的用例，我需要获取整个代码的呈现 HTML 源代码。有没有办法让它一次呈现我的所有代码？

Answer 1

您可以使用 ace/ext/static_highlight 类似于 https://github.com/ajaxorg/ace/issues/1480#issuecomment-20201314 and https://github.com/shadowcodex/c9.ide.print/blob/master/c9.ide.print.js

Answer 2

"a user" 给我指出了正确的方向。我使用 ace build 拼凑了一些对我有用的东西：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 
                    //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>

如果有更简单的获取主题背景颜色的方法，请告诉我。

Ace 代码编辑器：将整个代码渲染到 HTML？

Ace code editor: Render entire code to HTML?

html-rendering

ace-editor