PDA

View Full Version : Add Codemirror to AdminCP for Syntax Highlighting


ajhalls
06-11-2014, 06:33 PM
I have been spoiled using text editors with syntax highlighting and always wanted to add it to the admincp template editor. If you want to have it too, here you go. Download CodeMirror and place the extracted folder in your forum root "/forum/codemirror"

Then in the admincp/template.php file I added the following lines
<script src="../codemirror/lib/codemirror.js"></script>
<link rel="stylesheet" href="../codemirror/lib/codemirror.css">
<script src="../codemirror/mode/javascript/javascript.js"></script>
<script src="../codemirror/mode/xml/xml.js"></script>
<script src="../codemirror/mode/javascript/javascript.js"></script>
<script src="../codemirror/mode/css/css.js"></script>
<script src="../codemirror/mode/htmlmixed/htmlmixed.js"></script>
<script src="../codemirror/mode/htmlembedded/htmlembedded.js"></script>
I added mine on line 125 like so:
<link rel="stylesheet" href="styles/default.css">
//code goes here
<?php
}

Then scroll way down to line ~2908 and add this part. It HAS to be executed after the textarea has been rendered and populated.
<script>
var editor = CodeMirror.fromTextArea(document.getElementById("ta_template_2"), {
mode: "application/x-ejs",
styleActiveLine: true,
lineNumbers: true,
lineWrapping: true
});
</script>

And you are done!
Here is a screenshot of what it looks like:
http://coursesaver.com/codemirror/editer.png