Making Your Code Pretty on Orchard with SyntaxHighlighter

Tags: Orchard, Plugins

Sep 4 2011 9:38 PM
This site is powered by Orchard CMS, and I'm a huge fan of the design. I'm not the biggest fan of the documentation tho, and many of the plugins suffer from the same lack of documentation. While I was working on my last post, I needed a way to be able to post code. I really like the version of SyntaxHighlighter that used to have the "copy to clipboard | raw view" toolbar in the corner, but apparently that used Flash, and the new version does not.

At any rate, I wanted to write about how to how to configure SyntaxHighlighter with Orchard, as the documentation isn't exactly clear, and the built-in editor doesn't like it very much.
  • Step 1: In the Admin console, go to "Modules | Gallery", search for "SyntaxHighlighter", and install and activate "SyntaxHighlighter for Orchard".
  • Step 2: Go back to the Modules Gallery, search for "CKEditor", and install it.
  • Step 3: Go to Modules, and under the "Input Editor" section, disable "TinyMCE".
Now, when you go to post, wrap your code in <pre class="brush: csharp">Your code here</pre>, and you'll be good to go.
Add a Comment