CodeMirror Doesn’t Display HTML Mode

I am trying to use CodeMirror modes in my web application, but it won’t highlight the words for the mode “htmlmixed”. I don’t understand what is going wrong. The paths to each file are correct because I am not getting any 404 errors. Here is what I did:

<!DOCTYPE html>
<head>
    <script src="/node_modules/codemirror/lib/codemirror.js"></script>           
    <link rel="stylesheet" href="/path-to/codemirror/lib/codemirror.css">
   <script src="/path-to/codemirror/lib/codemirror.js"></script>
   <script src="/path-to/codemirror/mode/htmlmixed/htmlmixed.js"></script>
   <script src="/path-to/jquery.min.js"></script>
</head>
<html>
    <textarea id="editor"></textarea>
    ....
</html>
<script>
    var editor = CodeMirror.fromTextArea(document.getElementById("editor"), {
         lineNumbers: true,
         mode:  "htmlmixed",
         htmlMode: true,
});
</script>

Any help would be greatly appreciated!

Thank you!

Answer

The htmlmixed mode depends on the xml, javascript, and css modes. They must be included for htmlmixed to work.

Here is an example:

var editor = CodeMirror.fromTextArea(document.getElementById("editor"), {
  lineNumbers: true,
  mode:  "htmlmixed",
  htmlMode: true,
});

<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.41.0/codemirror.css" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.41.0/codemirror.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.41.0/mode/htmlmixed/htmlmixed.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.41.0/mode/xml/xml.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.41.0/mode/javascript/javascript.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.41.0/mode/css/css.js"></script>
</head>
<html>
  <textarea id="editor">&lt;p&gt; I am HTML&lt;/p&gt;
&lt;script&gt;
  console.log(&quot;I am JS&quot;);
&lt;/script&gt;</textarea>
</html>

Advertisement

Answer