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

Ace在渲染代码时突出显示，并且不渲染所有代码，但只比当前视图需要的多一点。Ace代码编辑器：将整个代码呈现为HTML？

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

2017-02-16 CoDEmanX

你是否需要它在编辑器内部呈现并且是可编辑的，或者只是需要某些东西（例如打印）的HTML？ –

只需将HTML代码设置为不可编辑的字符串即可在编辑器之外使用它。事实上，我想将代码注入到其他空白页面，以便我可以将包括语法高亮显示的代码复制并粘贴到Google文档中。在编辑器中复制/粘贴不会执行语法高亮，而复制呈现的HTML会保留它（我猜剪贴板内容是RTF格式的）。 – CoDEmanX

是否指'document.getElementsByClassName（'ace_content'）[0] .innerHTML'不返回整个代码？ –

“用户”指出我在正确的方向。我砍死在一起的东西，使用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>

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

来源

2017-07-26 23:44:35 CoDEmanX

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

来源

2017-02-16 17:46:16

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

回答

相关问题