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？

回答

相關問題