Can you show an example

[junior291492659]

Can you show an example, since I tried and failed. It would be really appreciated.

[erosman]

Did you try the example in How to Use?

[junior291492659]

Thanks for your insight. I have tried to put the key.js in the directory '/node_modules/codemirror/addon/mode' and it did work smoothly.

However, is there any other way to put this file or the core function in our own code instead of codemirror's source code package since I have to do this again once I use 'npm install' command.

Indeed, I have tried via this way

part of my own component

import codemirror from 'codemirror';
import { Controlled as CodeMirror } from 'react-codemirror2';
import init from './utils'
...
useEffect(() => {
        init(codemirror);
    }, []);

return <CodeMirror
              ...
              keyword: {
            junior: 'style1',
            price: 'style1',
          },
          >

utils.ts

export default function(CodeMirror, keywordsAndFunctions) {
    "use strict";

CodeMirror.defineOption("keyword", {}, function(cm, val, prev) {
      if (prev == CodeMirror.Init) prev = false;
    if (prev && !val)
      cm.removeOverlay("keyword");
    else if (!prev && val)
      cm.addOverlay({
        token: function(stream) {
          for (var key in cm.options.keyword) {
            if (stream.match(key, true)) {return cm.options.keyword[key];}
          }
          stream.next();
        },
        name: "keyword"
      });
    });
}

less file

.cm-style1 {
  color: pink !important;
}

And it does not work as expected. It would be really appreciated to get your advice.

[erosman]

However, is there any other way to put this file or the core function in our own code instead of codemirror's source code package since I have to do this again once I use 'npm install' command.

As in How to Use

Install the file in /addon/mode/ or any preferred directory Add the necessary <script> & <link rel="stylesheet"> to the HTML document

There is an HTML page that displays the CodeMirror. Add the <script> to point to that file. <script src="../whereever/keyword.js"></script>

If you want to combine the code with your own code, then there is more work involved. The code has to run after CodeMirror code is parsed but before CodeMirror instance is started e.g. in init(codemirror);.