8

I'm trying to find a module that will highlight HTML (and preferably CSS/JavaScript inside of style/script tags, but that's an added bonus) when I'm editing a node or block in the administrative side of Drupal.

While I've searched on drupal.org for syntax highlighting modules and come across options like GeSHi and Syntax Highlighter, both of those seem to be for the public-facing end content and not the administrative side. Am I wrong and would one be suitable for me? I've also seen a few projects that highlight PHP code blocks, but that's less important to me than HTML/CSS/JavaScript.

I never use a WYSIWYG editor for my own HTML but some highlighting would be very helpful in editing my content.

Improve this question
5
  • @Molot check this drupalmotion.com/article/syntax-highlighting-drupal Commented Oct 22, 2013 at 9:20
  • @Bala question is about syntax highlight in editor. Text Formats (Filters) are for display. Can't see anything relevant in article you linked Commented Oct 22, 2013 at 9:22
  • 1
    @Mołot will this drupal.org/project/ace_editor workout for you, but it looks like completely for code editor Commented Oct 22, 2013 at 9:50
  • @Bala as noted under your answer, I couldn't get ace to work - it's bar was displayed all right, no errors in js console or in watchdog, but it simply didn't highlight anything. Tested on both dev and 2012 releases with the same (lack of) result. If you can show how to configure it step by step, it would be perfectly OK :) Commented Oct 22, 2013 at 9:52
  • @Mołot sorry I just only noticed that comment. Commented Oct 22, 2013 at 9:53

2 Answers 2

Reset to default
4

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.

Improve this answer
5
  • Thanks but thats prety bad hilighting. I used it on some sites before but i dont use it anymore. It dose not support nested hilighting. For example if you write on HTML and then open a PHP tag you wont get hilighting for your php code. Have you find anything better? Commented Oct 9, 2012 at 20:15
  • Sorry, I know it's not perfect, but it's the only solution I'm aware of. Commented Oct 12, 2012 at 10:56
  • Hello. Couldn't get it to work. Isn't it outdated? And could you provide Drupal-centric instructions? See bounty description - couldn't figure it out, so if you are using it, could you please update / expand? Commented Oct 22, 2013 at 9:18
  • @Mołot No, it's not outdated. It's worked on my site for 1.5 years with no changes, and I have the current version installed. It is a pain to configure though, so I added step-by-step instructions. Commented Oct 22, 2013 at 14:41
  • Also, for some reason the Markdown formatter kept messing up my formatting, so it's not very pretty. Sorry, I'm not able to format it more cleanly. Commented Oct 22, 2013 at 14:41
4
+100

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

Improve this answer
2
  • 1
    Damn you, now it seems I will need to set second bounties to be fair ;) Especially if both answers will work. Need to test them. Commented Oct 23, 2013 at 7:50
  • @Mołot Feel free to award the bounty to this answer (or any future answer) if the syntax highlighting works well. The BUEditor syntax highlighting works but depending on the browser it can get a little ugly; it's a working solution, but I would doubt it's the best solution. Commented Oct 23, 2013 at 7:57

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.