Codemirror Clike Mode Doesn't seem to work

Question

I am trying to use CodeMirror in my project with the clike mode for vertex and fragment snippets, but for some reason the syntax highlighting doesn't work for anything but numbers and string literals. The javascript syntax highlighter works fine.

I load all of the relevant files:

  <link   rel="stylesheet" href="js/third-party/codemirror/lib/codemirror.css">
  <script src='js/third-party/codemirror/lib/codemirror.js'></script>
  <script src='js/third-party/codemirror/mode/clike/clike.js'></script>

I create a textarea in the index.html:

  <textarea id = "WEEE"></textarea>

Then I initialize an editor:

    <script>
  const myTextarea = document.getElementById("WEEE");
  var editor = CodeMirror.fromTextArea(myTextarea, {
    lineNumbers: true,
    mode:   "clike"
  });
</script>

The result is no syntax highlighting. The online examples clearly still work. CodeMirror.modes returns a list of modes, and clike seems to be fully loaded. What am I missing?

Answer 1

For clike (c-like), we have different modes for different languages

• For C
  mode: "text/x-csrc"
• For Cpp
  mode: "text/x-c++src"
• For Java
  mode: "text/x-java"
• For Objective-C
  mode: "text/x-objectivec"

Answer 2

It wasn't obvious to me, but I need to use a separate mode name defined in clike, since clike is a bunch of modes. I chose "x-shader/x-fragment".