Sunday, 12 June 2022

Codemirror does not apply theme classes and use only tag

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 <div> with class like "cm-string" or "cm-operator". In my scenario all the code is represented in many <pre> element (with no class) and so no highlight.

Here the result and how it's displayed :

<div class="CodeMirror-scroll" tabindex="-1">
   <div class="CodeMirror-sizer" style="min-width: 406.469px; margin-left: 26px; min-height: 168px;">
      <div style="position: relative; top: 0px;">
         <div class="CodeMirror-lines">
            <div style="position: relative; outline: none;">
               <div class="CodeMirror-measure">
                  <pre style="text-align: left;"><span>x</span></pre>
               </div>
               <div style="position: relative; z-index: 1;">
                  <div class="CodeMirror-selected" style="position: absolute; left: 4px; top: 0px; width: 869px; height: 16px;"></div>
                  <div class="CodeMirror-selected" style="position: absolute; left: 4px; top: 144px; width: 8.79688px; height: 16px;"></div>
                  <div class="CodeMirror-selected" style="position: absolute; left: 4px; top: 16px; width: 869px; height: 128px;"></div>
               </div>
               <div class="CodeMirror-code" style="">
                  <div style="position: relative;">
                     <div style="position: absolute; left: -26px;">
                        <div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 18px;">1</div>
                     </div>
                     <pre>{</pre>
                  </div>
                  <div style="position: relative;">
                     <div style="position: absolute; left: -26px;">
                        <div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 18px;">2</div>
                     </div>
                     <pre>  "Index": 0,</pre>
                  </div>
                  <div style="position: relative;">
                     <div style="position: absolute; left: -26px;">
                        <div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 18px;">3</div>
                     </div>
                     <pre>  "Date": "2022-05-25",</pre>
                  </div>
                  <div style="position: relative;">
                     <div style="position: absolute; left: -26px;">
                        <div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 18px;">4</div>
                     </div>
                     <pre>  "Time": "19:31:03.550",</pre>
                  </div>
                  <div style="position: relative;">
                     <div style="position: absolute; left: -26px;">
                        <div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 18px;">5</div>
                     </div>
                     <pre>  "TimeZone": "+02:00",</pre>
                  </div>
                  <div style="position: relative;">
                     <div style="position: absolute; left: -26px;">
                        <div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 18px;">6</div>
                     </div>
                     <pre>  "LoggingLevel": "[DBG]",</pre>
                  </div>
                  <div style="position: relative;">
                     <div style="position: absolute; left: -26px;">
                        <div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 18px;">7</div>
                     </div>
                     <pre>  "Action": "ArticleBo.GetArticleByQuery",</pre>
                  </div>
                  <div style="position: relative;">
                     <div style="position: absolute; left: -26px;">
                        <div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 18px;">8</div>
                     </div>
                     <pre>  "Size": "9480",</pre>
                  </div>
                  <div style="position: relative;">
                     <div style="position: absolute; left: -26px;">
                        <div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 18px;">9</div>
                     </div>
                     <pre>  "Trace": null</pre>
                  </div>
                  <div style="position: relative;">
                     <div style="position: absolute; left: -26px;">
                        <div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 18px;">10</div>
                     </div>
                     <pre>}</pre>
                  </div>
               </div>
               <div class="CodeMirror-cursor" style="left: 12.7969px; top: 144px; height: 16px; display: none;">&nbsp;</div>
               <div class="CodeMirror-cursor CodeMirror-secondarycursor" style="display: none;">&nbsp;</div>
            </div>
         </div>
      </div>
   </div>
   <div style="position: absolute; height: 30px; width: 1px; top: 168px;"></div>
   <div class="CodeMirror-gutters" style="height: 300px;">
      <div class="CodeMirror-gutter CodeMirror-linenumbers" style="width: 26px;"></div>
   </div>
</div>

enter image description here

As you can see each line is displayed as unique <pre> tag, and so the single words are not highlighted. I can't understand why (the monokai css is correctly loaded).



from Codemirror does not apply theme classes and use only
 tag

No comments:

Post a Comment