CodeMirror by default only highlights mixed-html syntax (i.e html, css and javascript) in Joomla. Many of us use custom plugins to run PHP inside modules and articles but CodeMirror doesn't highlight PHP syntax at all. It becomes extremely difficult to manage modules when dealing with alot of code. Below is the tutorial to make CodeMirror highlight mixed-html as well as PHP


What you need:

Notepad++ -PC
Komodo IDE -MAC
or any other text editor which will show line nos.

Tested on:

Joomla 3.x

You need to add some external JS files to your Joomla Admin's template. These JS files are already included with your Code Mirror plugin.

Admin templates are located in this directory : /administrator/templates

If your default Admin template is isis, the file you need to edit is :


Similarly if your default style is different, you need to edit its respective index file.

Step 1 : Add this code anywhere inside the <head> --- </head> tags of your index.php.

<script src="/media/editors/codemirror/mode/php/php.js"></script>
<script src="/media/editors/codemirror/addon/edit/matchbrackets.js"></script>
<script src="/media/editors/codemirror/mode/htmlmixed/htmlmixed.js"></script>
<script src="/media/editors/codemirror/mode/xml/xml.js"></script>
<script src="/media/editors/codemirror/mode/javascript/javascript.js"></script>
<script src="/media/editors/codemirror/mode/clike/clike.js"></script>

Ideally you should add it below line 178 :

<!--[if lt IE 9]><script src="<?php echo JUri::root(true); ?>/media/jui/js/html5.js"></script><![endif]-->

Step 2 : Create a variable having our desired CodeMirror config in JSON format

The file you need to edit for this is : /plugins/editors/codemirror/layouts/editors/codemirror/elements.php

Add this $myoptions variable to your elements.php

$myoptions = '{
               "autofocus": true,
               "lineWrapping": true,
               "styleActiveLine": true,
               "lineNumbers": true,
               "gutters": ["CodeMirror-linenumbers", "CodeMirror-foldgutter", "CodeMirror-markergutter"],
               "foldGutter": true,
               "markerGutter": true,
               "mode": "application/x-httpd-php",
               "matchBrackets": true,
               "autoCloseTags": true,
               "matchTags": true,
               "scrollbarStyle": "native",
               "vimMode": false

Ideally you should place it just below line 20:

$buttons = $displayData->buttons;

Step 3: Then you need to replace this line of the same elements.php:
[originally this was present at line 24 but after you add $myoptions variable it must have shifted to somewhere around line 40.]

var id = ' . json_encode($id) . ', options = ' . json_encode($options) . ';

with this :

var id = ' . json_encode($id) . ', options = ' . $myoptions . ';

That's it. You're good to go. Check out these screens below:


enter image description here -------------------------After-------------------------

enter image description here

These files might may get overwritten if you update your Joomla.
Keep backup of both these files.

PHP plugin used : Sourcerer
Line no reference : NotePad++

Thanks for reading.


I found out that you can set the right syntax in a parameter array.

On the associative array $params, set the syntax key equal to the value php.

This will do it:

$params['syntax'] = 'php';

$editor = JEditor::getInstance('codemirror');
echo $editor->display('name_of_element', $value, '100%', 900, '300', '3', false, null, null, null, $params);
  • Sorry for the short answer but the solution I propose is by far easier to implement than the other ones and need no overwriting of any Joomla plugin. – Piero Marsilio Feb 27 '19 at 20:03

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.