Codemirror does not apply theme classes and use only
tag

Question

I need to display (read-only) few line of json code accordingly to user selection (drop-down). So i come up with Codemirror (version 3.20) and in particular to this few lines of code :

var selectedItem = data[index]; //accordingly with user selection i take the JSON
$(target).empty();              //container cleanup and then add a new Codemirror instance
var myCodeMirror = CodeMirror($(target)[0], {
    value: JSON.stringify(selectedItem, null, 2),
    tabSize: 4,
    mode: { name: "javascript", json: true },
    theme: 'monokai',
    lineNumbers: true,
    styleActiveSelected: true,
    line: true,
    readOnly: true
});

The monokai css is found and a bit of styling is applied, but usually constants and variables in code mirror became

with class like "cm-string" or "cm-operator". In my scenario all the code is represented in many

element (with no class) and so no highlight.

Here the result and how it's displayed :


   
      
         
            
               
                  x
               
               
                  
                  
                  
               
               
                  
                     
                        1
                     
                     {
                  
                  
                     
                        2
                     
                       "Index": 0,
                  
                  
                     
                        3
                     
                       "Date": "2022-05-25",
                  
                  
                     
                        4
                     
                       "Time": "19:31:03.550",
                  
                  
                     
                        5
                     
                       "TimeZone": "+02:00",
                  
                  
                     
                        6
                     
                       "LoggingLevel": "[DBG]",
                  
                  
                     
                        7
                     
                       "Action": "ArticleBo.GetArticleByQuery",
                  
                  
                     
                        8
                     
                       "Size": "9480",
                  
                  
                     
                        9
                     
                       "Trace": null
                  
                  
                     
                        10
                     
                     }

As you can see each line is displayed as unique

tag, and so the single words are not highlighted. I can't understand why (the monokai css is correctly loaded).

mahan · Accepted Answer

Make sure you use monokai.css and mode/javascript/javascript.js.

Here is an example that works.

const textarea = document.getElementById("editor");
textarea.value = '{"name":"John", "age":30, "car":null}'
let editor = CodeMirror.fromTextArea(textarea, {
    tabSize: 4,
    mode: { name: "javascript", json: true },
    theme: 'monokai',
    lineNumbers: true,
    styleActiveSelected: true,
    line: true,
    readOnly: true
});

Codemirror does not apply theme classes and use only <pre> tag

Answers (1)

Related Questions

Codemirror does not apply theme classes and use only &lt;pre&gt; tag

Answers (1)

Related Questions

Codemirror does not apply theme classes and use only <pre> tag