TinyMCE is delivered without a source coloured. It's poor edit the html without the source highlighted. In order to highlight the surce code I found 2 plugins for TinyMCE: codemirror and codemagic. Let me explain how to add the plugin "codemagic" on your Joomla.

WHAT IS CODEMAGIC

CodeMagic is an advanced source code editor plugin for Tinymce. It integrates the CodeMirror library for syntax coloring, and the JSBeautifier library for code formating and indentation.

COMMENTS

I installed it on Joomla 3.02 and 2.8 but I think it can also works in other versions.

I was really difficult find a clear guide for Joomla and understand how add and configure the plugin.

STEPS

Well, here what you need.

1. Download the codemagic plugin
2. Upload on your Joomla folder
3. Change the settings for TinyMCE plugin in your Joomla installation

DOWNLOAD

• Download from GitHub

UPLOAD

• Unzip the file codemagic-master.zip. I suggest to rename the folder  from codemagic-master to codemagic.
• Using a client ftp, upload it on YourJoomlaFolder/media/editors/tinymce/jscripts/tiny_mce/plugins
  
  updated dec 7, 2013 - for Joomla 3.20 path changed:
  YourJoomlaFolder//media/editors/tinymce/plugins/codemagic
  You also need a copy of plugin.min.js...
  copy from 
  YourJoomlaFolder/media/editors/tinymce/plugins/example/plugin.min.js
  to
  YourJoomlaFolder/media/editors/tinymce/plugins/codemagic/plugin.min.js
• updated dec 27, 2013 - for Joomla 3.20 TinyMCE is version 4.x and codemagic is not compatible with version 4.x
  Read here for official reply from codemagic support

JOOMLA SETTINGS

• Open the TinyMCE plugins setting:
  Externsions->Plugins Manager->TinyMCE Editor->Advanced parameters and search for Custom plugin and Button.
  
  Custom plugin: codemagic 
  Custom button: codemagic

Open your TinyMCE Editor and you will find a new icon "HTML".

That's all!

I hope it will works only for you.

USEFUL IMAGES 

REFERENCES

• TinyMCE
• Code Magic
• Code Mirror (alternative to Code Magic)

- have fun -