Drupal - Syntax highlighting for admin-side text areas (during node or block editing)

I use the BUEditor module, for which you can add syntax highlighting with some additional configuration. You can specify to only allow administrators access to this interface via the module's options page.

Step-by-step instructions

  1. Install the BUEditor module (I used 1.6).
  2. Download bue.highlight.min.css and bue.highlight.min.js from this page. I placed these files in a bueditor directory inside the directory for my custom theme.
  3. Go to the BUEditor config page: /admin/config/content/bueditor. Edit the settings for the relevant version(s) of BUEditor (probably default, but it depends on which you assign to each role-- if you want, you can configure different BUEditor options per role, but then you will need to set up syntax highlighting for each.)
  4. On the Editor settings screen, click the Editor paths tab and then add the following Editor specific library files (My example assumes that you put the JS in your theme directory.):

    %THEME/bueditor/bue.highlight.min.css
    %THEME/bueditor/bue.highlight.min.js editor paths example

  5. Then, scroll down to the bottom of that page (under Buttons) and add tpl:syntax along with this code:

js: BUE.postprocess._turnOnHlight = function(E, $) { setTimeout(function(){E.highlight('html')}); };

syntax example

Then save the configuration and you should be good to go.


Wysiwyg CodeMagic module have the option, see the Demo

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.

As I mentioned already Ace Code Editor, You can try this patch with the combination of wysiwyg editor. You can find the patch here