Search code examples
ccodemirror

How to configure codemirror for C-like language?

I am using codeMirror in my wordpress site to highlight syntax C-like code. I have added all code js and css files as suggested:

/code-mirror/plugin/codemirror/lib/codemirror.css
/code-mirror/plugin/codemirror/lib/codemirror.js
/code-mirror/plugin/codemirror/theme/eclipse.css
/code-mirror/plugin/codemirror/addon/edit/matchbrackets.js
/code-mirror/js/c-like.js

Here c-like.js is my custom js file having the following code:

var cEditor = CodeMirror.fromTextArea(document.getElementById("c-code"), {
       lineNumbers: true,
       matchBrackets: true,
       mode: "text/x-csrc",
       readOnly: true,
       styleActiveLine: true,
       theme: "eclipse"
     });

but a simple C program is looks like:

enter image description here

There is no style at keywords like 'int' or #include. I am struggling to highlight C code as like CodeBlock syntax. Here is the live url: codingpractise.com/c-code. Any idea?

Solution

  • It seems like you have forgot the clike.js not the one with your code but with the c mode

    hosted by cdnjs: https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.42.2/mode/clike/clike.min.js

    DEMO: https://codepen.io/quic5/pen/ebMKNV