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;"> </div>
<div class="CodeMirror-cursor CodeMirror-secondarycursor" style="display: none;"> </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>
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