에이스 코드 편집기 : 전체 코드를 HTML로 렌더링 하시겠습니까?

에이스는 강조 표시를 사용하여 코드를 렌더링하고 모든 코드를 렌더링하지는 않지만 현재보기보다 조금만 더 똑똑하다.에이스 코드 편집기 : 전체 코드를 HTML로 렌더링 하시겠습니까?

그러나 사용 사례에 대해서는 전체 코드의 렌더링 된 HTML 소스를 가져와야합니다. 한 번에 모든 코드를 렌더링 할 수있는 방법이 있습니까?

2017-02-16 CoDEmanX

편집기 내부에서 렌더링하고 편집 할 필요가 있거나, 무언가 (예 : 인쇄)를 위해 html 만 필요합니까? –

HTML 코드를 편집 할 수없는 문자열로 사용하여 편집기 외부에서 사용할 수 있습니다. 사실, 빈 페이지에 코드를 삽입하여 구문 강조를 포함한 코드를 복사하여 Google 문서 도구 문서에 붙여 넣을 수 있습니다. 편집기 내에서 복사/붙여 넣기는 구문 강조를 수행하지 않지만 렌더링 된 HTML을 복사하면 텍스트가 보존됩니다 (클립 보드 내용은 RTF 형식으로되어 있음). – CoDEmanX

'document.getElementsByClassName ('ace_content') [0] .innerHTML'이 전체 코드를 반환하지 않는다는 것을 의미합니까? –

에 static_highlight 유사한 에이스/내선 /를 사용할 수 있습니다 "사용자가"올바른 방향으로 절 지적했다. 정적으로, 왼쪽에 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

당신이 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

에이스 코드 편집기 : 전체 코드를 HTML로 렌더링 하시겠습니까?

답변

관련 문제