Syntax highlighter?

Topics: Customizing Orchard, General
Developer
Jun 15, 2012 at 4:20 PM
Edited Jun 28, 2012 at 11:22 AM

I'd like to do syntax highlighting for code blocks in a blog. Do you know any working approach to this?

I've tried the following:

  • Copying to Word, then copying back to TinyMCE: while ugly, this actually worked until Orchard 1.4.2. Now pasted code, although keeping its indenting and highlighting, gets distorted because every line is wrapped in a paragraph (formerly in a span).
  • Using highlight.js or SyntaxHighlighter (through this module): I simply can't get WYSIWYG editors (tried with TinyMCE and CKEditor) not to mess up the code. TinyMCE breaks all the code into one line no matter what. Both editors can't cope with code that includes greater-than or less-than characters (this means I can't use XML snippets or even generic classes) when inserted in source mode.

The closest I got was with highight.js: I inserted the <pre><code>...</code></pre> in source mode, then replaced the three dots with the code snippet in WYSIWYG mode. This way every code snippet gets display with proper line breaks, but indentation gets lost...

Thanks in advance.

Developer
Jun 15, 2012 at 4:36 PM

Wow, I managed to make it work, although this is still somehow half-assed. This only works with CKEditor, not with TinyMCE. This also only works with the Syntax Highlighter module, since this way indentation with spaces is changed to &nbsp;-s, what highlight.js can't recognize then as proper source code...

  1. Insert the <pre class="brush: csharp;">...</pre> block in code mode.
  2. Swap the three dots to the desired code snippet in WYSIWYG mode.

This seems to be the only combination of highlighters/editor that's actually usable.

Developer
Jun 28, 2012 at 11:36 AM

To be clear: the above hassle is only needed if you need to show off some generics or other code that uses greater-than and less-than signs (as those mess up HTML obviously), other codes just work fine with TinyMCE too by just pasting it in source code mode.

Of course those problematic characters can be changes otherwise too, like with a search-replace.

Nov 16, 2014 at 1:37 AM
I know it is an very old thread, but I had the same problem and I found this tinymce plugin which is great. You still need this Orchard Module for including the scripts.