title: Codemirror display code from codemirror textarea
body: <p>I'm getting plain text while displaying the code from the codemirror textarea and I want to that in the form of code highlighted format. Any plz help me.</p>
  
  <p>I want to print highlighted code which was highlighted in the codemirror editor I'm getting that code from codemirror editor by using <code>editor.getValue();</code>:</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;meta charset="utf-8"&gt;
          &lt;title&gt;Demo_Format&lt;/title&gt;
          &lt;link rel="stylesheet" href="lib/codemirror.css"&gt;
          &lt;script src="lib/codemirror.js"&gt;&lt;/script&gt;
          &lt;script src="lib/util/formatting.js"&gt;&lt;/script&gt;
          &lt;script src="lib/css.js"&gt;&lt;/script&gt;
          &lt;script src="lib/xml.js"&gt;&lt;/script&gt;
          &lt;script src="lib/javascript.js"&gt;&lt;/script&gt;
          &lt;script src="lib/htmlmixed.js"&gt;&lt;/script&gt;
          &lt;link rel="stylesheet" href="lib/docs.css"&gt;
  
          &lt;style type="text/css"&gt;
              .CodeMirror {
                  border: 1px solid #eee;
              }
  
              td {
                  padding-right: 20px;
              }
          &lt;/style&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;h1&gt;&lt;/h1&gt;
  
          &lt;form&gt;
              &lt;textarea id="code" name="code"&gt;
                  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");}}
              &lt;/textarea&gt;
  
          &lt;/form&gt;
  
          &lt;table&gt;
              &lt;tr&gt;
                  &lt;td&gt;
                      &lt;a href="javascript:autoFormatSelection()"&gt;
                          &lt;button&gt; Format &lt;/button&gt;
                      &lt;/a&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;
                      &lt;button id="copy_button"&gt;copy&lt;/button&gt;
                      &lt;button id="show"&gt;show&lt;/button&gt;
                  &lt;/td&gt;
                  &lt;div id="code_show"&gt;
  
                  &lt;/div&gt;
              &lt;/tr&gt;
          &lt;/table&gt;
          &lt;/p&gt;
          &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"&gt;&lt;/script&gt;
          &lt;script&gt;
              $("#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);
             });
          &lt;/script&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>