Search code examples
codemirror

Codemirror Closing tags not styling

I am trying to get a code editor that shows the result on clicking a button. I've adapted How to output result of codemirror in iframe? but I am having issues with the closing tags on the example code not being styled.

See screenshot and code below.

I would be very appreciative if someone can take a look and point me in the right direction (I am not very good with JS).

Codemirror example

<!DOCTYPE html>
<html>

  <head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.61.1/codemirror.min.js"></script> 
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.61.1/codemirror.min.css"/> 
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.61.1/theme/neo.min.css">

  <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.61.1/mode/javascript/javascript.js"></script>   
  <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.61.1/mode/css/css.js"></script>  
  <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.61.1/mode/htmlmixed/htmlmixed.min.js"></script>  
   
   <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.61.1/addon/fold/indent-fold.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.61.1/addon/edit/matchbrackets.min.js"></script>
   
  <style>
  body {
    background-color: #eee;
}
iframe{height:600px;width:400px}
</style>
  </head>

  <body>  
      <div id="codeeditor"></div>
      <iframe>Example</iframe>
      <button>RUN</button>
    <script>
       var editor = CodeMirror(document.getElementById("codeeditor"), {
    value: "<html>\n<body class=\"fdf\">\n<h1>Hello world</h1>\n<button type=\"button\" disabled>Click Me!</button>\n</body>\n</html>",
    theme: "neo",
    lineNumbers: true,
    matchBrackets: true
});

$("button").click(function(){     
  $("iframe").contents().find("body").html(editor.getValue());
})
    </script>
  </body>

</html>
Solution

  • I fixed it. It wasn't configured correctly. Also putting the code in a separate html file and importing it helps with all the formatting.

    You need the following file (plus any theme css file):

      <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.61.1/mode/xml/xml.min.js"></script>

    Here is the new script config:

      var editor = CodeMirror(document.getElementById("codeeditor"), {
    value: "{{ range $matches }}{{ .Content }}{{ end }}",
    theme: "neo",
    mode: "htmlmixed",
    htmlMode: true,
    lineNumbers: true,
    matchBrackets: true,
    smartIndent: true,
  });