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 a lot of code. How can I make CodeMirror highlight mixed-html as well as PHP?

2 Answers 2


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. Commented Feb 27, 2019 at 20:03

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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