Menu
I'm trying to style code samples with CodeMirror, but it works partially - it applies the selected theme to the textarea but the syntax is not highlighted.
There is my page:
<textarea id="template-html" name="code" class="CodeMirror"> <!DOCTYPE html> <foobar> <blah>Enter your xml here and press the button below to display it as highlighted by the CodeMirror XML mode</blah> <tag2 foo="2" bar="bar" /> </foobar> </textarea> <link rel="stylesheet" type="text/css" href="/site.com/css/codemirror/codemirror.css"> <link rel="stylesheet" type="text/css" href="/site.com/css/codemirror/theme/ambiance.css"> <link rel="stylesheet" type="text/css" href="/site.com/css/codemirror/theme/solarized.css"> <script type="text/javascript" src="/site.com/js/libs/codemirror/codemirror.js"></script> <script type="text/javascript" src="/site.com/js/libs/codemirror/mode/javascript/javascript.js"></script> <script type="text/javascript"> var config, editor; config = { lineNumbers: true, mode: "text/html", theme: "ambiance", indentWithTabs: false, readOnly: true }; editor = CodeMirror.fromTextArea(document.getElementById("template-html"), config); function selectTheme() { editor.setOption("theme", "solarized dark"); } setTimeout(selectTheme, 5000); </script> Here is an image of the result. It seems to work but without the syntax highlighting (image top), I've also tried without my CSS, but the result is the same (image bottom):
The problem is with mode: "text/html" which seems to be not working properly, if I use mode: "javascript" it colorizes the tags by the JavaScript syntax rules. How can I fix this?
753
Once you import CodeMirror via <script> tag, you get a CodeMirror global that you can use to create a new CodeMirror instance. Just point it at a <div> and CodeMirror does the rest. CodeMirror(document. querySelector('#my-div'), { lineNumbers: true, tabSize: 2, value: 'console.
If you don't want to kill the CodeMirror instance, just change the entire document holding the text, data on markers etc. This can be done by calling cm. swapDoc(doc: CodeMirror. Doc) .
CodeMirror parses HTML using the XML mode. To use it, the appropriate script must be included, same as with any other mode.
Add its dependency in your markup:
<script type="text/javascript" src="/site.com/js/libs/codemirror/mode/xml/xml.js"></script> and set the mode to xml:
config = { mode : "xml", // ... }; In addition, you may want to configure the parser to allow for non well-formed XML. You can do so by switching the htmlMode flag on:
config = { mode : "xml", htmlMode: true, // ... }; See the XML/HTML mode demo for a live example.
106
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
