Browsers do not support multi-colored text in a text-area. Some attempts have been made to color the code using the technique that WYSIWYG editors are using. It is possible to integrate some of those editors with BUEditor, however the result would be a slower editor and BUEditor users would not like it.

The syntax highlighting implemented here is a faster and lighter alternate that simply uses a color layer under the text-area. Users still type into the original text-area but see the color layer that is populated with the colored code as the typing goes on.

The highlighter can be extended to color different markup languages. See BBCode syntax highlighter or CSS syntax highlighter for a live example.

Library files:

  1. bue.highlight.js (Minified: bue.highlight.min.js)
  2. bue.highlight.css (Minified: bue.highlight.min.css)

Button code for manually turning the highlighter on/off:

E.highlight(E.highlightOn ? false : 'html');

Template button code that initially turns the highlighting on. The button title must start with tpl:

BUE.postprocess._turnOnHlight = function(E, $) {

Custom CSS for coloring:

<style type="text/css">
/*Global tag color. Applies to all tags*/
.bue-hl-tag {
color: #00a;
/*Specific tag colors. Class name format is: bue-hl-tag-TAGNAME*/
.bue-hl-tag-a {
color: #06f;

Love this! All work fine

Love this!
All work fine except I can't figure out how to turn it on initially?
I've tried:

  1. both codes in button content area
  2. combined with just one "js:" in button content area
  3. added with initial highlighting code into title area
  4. added second button with initial highlighting code

None seem to do it.

Title of the second button

Title of the second button must start with tpl:

I love this editor and also

I love this editor and also the syntax highlighting plugin It looks great in most browsers, but in Safari 5.1 on Mac I'm seeing some strange "out of resolution" issues with the color layers. See the linked screenshot if you have not see this issue yet:

I've only seen this particular problem on this page and in this browser. I haven't tested the syntax highlighter on any other systems, but I assume this is a browser-related issue. It looks fine in Firefox and Chrome.

Fixed and updated js and css

Fixed and updated js and css files.
Thanks for reporting.

I'm always glad to be able to

I'm always glad to be able to provide useful feedback for debugging. Thank YOU for the terrific modules and the quick fix on this issue. It looks great now… in all my browsers. :-)

BTW, I've used a cropped screenshot of the syntax-highlighting as the "teaser" image in a new article I've written about why the BUEditor is an awesome alternative to a WYSIWYG editor and how to get it fully configured on a Drupal 7 site (I was pleased to see that almost everything is the same between the Drupal 6 version and Drupal 7, so custom button sets exported from one major version work just fine in the other -- very cool!)

Thank you for all you do in the Drupal community, ufku!

Is there anyway this can be

Is there anyway this can be modified to work for css as well? I`m trying to get `CSS Injector` to look super slick - Your module has gotten me much further than any other solutions tried before, but all the css is the same colour!
Seems easy enough just I don`t understand the .js file enough to hack in a fix :(

The CSS snippet directly below your example looks really pretty, can the same be done live inside the editor?

That's an interesting idea.

That's an interesting idea. I'll look into it when i have time.
Here it is.

i can't get it to work. this

i can't get it to work.

this is what i did:


and at the JS file, i added this at the last part of the code:

function toggleHL(){
E.highlight(E.highlightOn ? false : 'html');

what did i do wrong?
and also, what do u mean by "button title"?

Under supervision of Drupal :)