Search code examples
javascriptcodemirror

How do I make syntax highlighting for a specific language with code mirror


How do I syntax highlight code for a specific language using codemirror.

my html looks like this:

<head>
    <link rel="stylesheet" type="text/css" href="codemirror/lib/codemirror.css">
</head>

<body>
    <textarea class="codetextarea"></textarea>

    <!-- javascript files-->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script>
    <script type="text/javascript" src="codemirror/lib/codemirror.js"></script>
    <script type="text/javascript" src="js/default.js"></script>
</body>

And my javascript:

$(document).ready(function() {
    var code = $(".codetextarea")[0];
    var editor = CodeMirror.fromTextArea(code, {
        lineNumbers : true,
    });
});

codemirror is the directory of codemirror API.

I want to do syntax highlighting for C++ but I don't know how to.


Solution

  • Just add the language in the configuration of your editor ;) The mode parameter is what you're looking for I think.

    Example from the official website for C++:

    var cppEditor = CodeMirror.fromTextArea(document.getElementById("cpp-code"), {
        lineNumbers: true,
        matchBrackets: true,
        mode: "text/x-c++src"
    });
    

    Check the sources from this page for C++: http://codemirror.net/mode/clike/index.html

    This page lists all the supported languages: http://codemirror.net/mode/index.html

    Edit:

    I must admit that their documentation is quite unclear to find what you want to in it.

    Did you try to add this file to your webpage: http://codemirror.net/mode/clike/clike.js? I think this is mandatory, check the imports in the first page I mentionned above, you probably miss a module.