來自codemirror textarea的Codemirror顯示代碼

從代碼鏡像textarea顯示代碼時，我得到純文本，我想以代碼突出顯示的格式顯示代碼。任何plz幫助我。來自codemirror textarea的Codemirror顯示代碼

我要打印突出顯示的代碼這是在codemirror編輯我碰到codemirror編輯器，代碼使用editor.getValue();強調：

<!doctype html> 
<html> 
    <head> 
     <meta charset="utf-8"> 
     <title>Demo_Format</title> 
     <link rel="stylesheet" href="lib/codemirror.css"> 
     <script src="lib/codemirror.js"></script> 
     <script src="lib/util/formatting.js"></script> 
     <script src="lib/css.js"></script> 
     <script src="lib/xml.js"></script> 
     <script src="lib/javascript.js"></script> 
     <script src="lib/htmlmixed.js"></script> 
     <link rel="stylesheet" href="lib/docs.css"> 

     <style type="text/css"> 
      .CodeMirror { 
       border: 1px solid #eee; 
      } 

      td { 
       padding-right: 20px; 
      } 
     </style> 
    </head> 
    <body> 
     <h1></h1> 

     <form> 
      <textarea id="code" name="code"> 
       package org;import java.io.IOException;import javax.servlet.http.*;@SuppressWarnings("serial") 
       public class BasicChatServlet extends HttpServlet{public void doGet(HttpServletRequest req,HttpServletResponse resp) 
       throws IOException{resp.setContentType("text/plain");resp.getWriter().println("Hello, world");}} 
      </textarea> 

     </form> 

     <table> 
      <tr> 
       <td> 
        <a href="javascript:autoFormatSelection()"> 
         <button> Format </button> 
        </a>&nbsp;&nbsp;&nbsp; 
        <button id="copy_button">copy</button> 
        <button id="show">show</button> 
       </td> 
       <div id="code_show"> 

       </div> 
      </tr> 
     </table> 
     </p> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
     <script> 
      $("#copy_button").click(function(){ 
      $("textarea").select(); 
      document.execCommand('copy'); 
      }); 

      var editor = CodeMirror.fromTextArea(document.getElementById("code"), { 
      lineNumbers: false, 
      indentUnit: 4 

      }); 
      CodeMirror.commands["selectAll"](editor); 
      function getSelectedRange() { 
      return { from: editor.getCursor(true), to: editor.getCursor(false) }; 
      } 
      function autoFormatSelection() { 
      var range = getSelectedRange(); 
      var x=editor.autoFormatRange(range.from, range.to); 

      } 
      $("#show").click(function(){ 
      var program=editor.getValue(); 
      $("#code_show").text(program); 
      }); 
     </script> 
    </body> 
</html>

來源

2017-02-23 Satya Pendem

（不知道這個回答你的問題，因爲它不是很清楚 - 如果您只提供了問題所需的代碼將會很有幫助）

每種模式（其樣式爲您的CodeMirror實例）位於mode/目錄的子目錄中，並且通常定義一個實現模式的JavaScript文件。加載這樣的文件將使語言可供CodeMirror通過mode option，該聲明同時創建CodeMirror例如：

CodeMirror.fromTextArea(document.getElementById("code"), { 
    lineNumbers: false, 
    indentUnit: 4, 
    mode: 'text/css' 
});

你需要確保你的different mode files被添加到一個模式文件夾在您的圖書館。在你的情況下，css.js,xml.js,javascript.js和htmlmixed.js文件需要位於一個名爲lib/mode的新文件夾中（例如css.js具有lib/mode/css.js文件路徑）。

您可以檢查每個模式的演示，看看您必須將哪個字符串傳遞給mode:選項才能調用它。下面是css demo for example

你可以走一步，改變模式在飛行編輯多個文本文件類型：Multiple modes Codemirror

來源

2018-01-26 07:18:11 ztrat4dkyle

來自codemirror textarea的Codemirror顯示代碼

回答

相關問題