Home
Atom Feed

Syntax Highlighting for TinyMCE 3

I have made a plugin for TinyMCE that will let you do just that! In addition, I have also made an Umbraco package out of it, so all you have to do is click install and add a macro to your template.

One of the main issues when posting code on a blog is that it is very hard to read. Several javascript libraries have been made to solve this problem, and the most used one to date is Syntax Highlighter by Alex Gorbatchev.

This website is running on Umbraco and it uses TinyMCE v3 as text editor. Inspired by the old SyntaxHighlighter plugin by Nawaf Albadia I created a new and improved version that is compatible with the latest version of Syntax Highlighter (3.0.83).

I also created a version that is designed to run on Umbraco v4.7 and also leverages the power of Client Dependency Framework. This means that all the necessary stylesheets and javascripts are added and minified automatically. All you need to do is to add one line to your master template.

HOW TO INSTALL: (Regular website)

  1. Extract the content of TinyMCEv3_SyntaxHighlighter.zip to the "plugins" folder in your TinyMCE 3 installation folder.
  2. Locate the code block that initialises the TinyMCE editor.
  3. Add the following string to the "plugins" line:
    ,syntaxhighlighter
  4. Add the following string to the "theme_advanced_buttons3_add_before" line:
    ,syntaxhighlighter
  5. Add the following code to the <head/> section of your content pages:
    <link href="{syntaxhighlighter-plugin-path}/styles/shCore.css" rel="stylesheet" type="text/css" />
    <link href="{syntaxhighlighter-plugin-path}/styles/shThemeDefault.css" rel="stylesheet" type="text/css" />
    
    <script type="text/javascript" src="{syntaxhighlighter-plugin-path}/scripts/shCore.js" ></ script>
    <script type="text/javascript" src="{syntaxhighlighter-plugin-path}/scripts/shAutoloader.js" ></script>
    <script type="text/javascript" >
        $(document).ready(function () { 
            SyntaxHighlighter.autoloader(
                'applescript            {syntaxhighlighter-plugin-path}/scripts/brushes/shBrushAppleScript.js',
                'actionscript3 as3      {syntaxhighlighter-plugin-path}/scripts/brushes/shBrushAS3.js',  
                'bash shell             {syntaxhighlighter-plugin-path}/scripts/brushes/shBrushBash.js',  
                'coldfusion cf          {syntaxhighlighter-plugin-path}/scripts/brushes/shBrushColdFusion.js',  
                'cpp c                  {syntaxhighlighter-plugin-path}/scripts/brushes/shBrushCpp.js',  
                'c# c-sharp csharp      {syntaxhighlighter-plugin-path}/scripts/brushes/shBrushCSharp.js',  
                'css                    {syntaxhighlighter-plugin-path}/scripts/brushes/shBrushCss.js',  
                'delphi pascal          {syntaxhighlighter-plugin-path}/scripts/brushes/shBrushDelphi.js',  
                'diff patch pas         {syntaxhighlighter-plugin-path}/scripts/brushes/shBrushDiff.js',  
                'erl erlang             {syntaxhighlighter-plugin-path}/scripts/brushes/shBrushErlang.js',  
                'groovy                 {syntaxhighlighter-plugin-path}/scripts/brushes/shBrushGroovy.js',  
                'java                   {syntaxhighlighter-plugin-path}/scripts/brushes/shBrushJava.js',  
                'jfx javafx             {syntaxhighlighter-plugin-path}/scripts/brushes/shBrushJavaFX.js',  
                'js jscript javascript  {syntaxhighlighter-plugin-path}/scripts/brushes/shBrushJScript.js',  
                'perl pl                {syntaxhighlighter-plugin-path}/scripts/brushes/shBrushPerl.js',  
                'php                    {syntaxhighlighter-plugin-path}/scripts/brushes/shBrushPhp.js',  
                'text plain             {syntaxhighlighter-plugin-path}/scripts/brushes/shBrushPlain.js',  
                'py python              {syntaxhighlighter-plugin-path}/scripts/brushes/shBrushPython.js',  
                'ruby rails ror rb      {syntaxhighlighter-plugin-path}/scripts/brushes/shBrushRuby.js',  
                'sass scss              {syntaxhighlighter-plugin-path}/scripts/brushes/shBrushSass.js',  
                'scala                  {syntaxhighlighter-plugin-path}/scripts/brushes/shBrushScala.js',  
                'sql                    {syntaxhighlighter-plugin-path}/scripts/brushes/shBrushSql.js',  
                'vb vbnet               {syntaxhighlighter-plugin-path}/scripts/brushes/shBrushVb.js',  
                'xml xhtml xslt html    {syntaxhighlighter-plugin-path}/scripts/brushes/shBrushXml.js' 
            );
            SyntaxHighlighter.all();
        });
    </script>
    
  6. Replace {syntaxhighlighter-plugin-path} with the path to the folder you extracted the plugin to.
HOW TO INSTALL: (Umbraco)
  1. Head over to the project page on our.umbraco.org and download the package there.
  2. Install it in the Developer section in Umbraco by clicking "Packages" -> "Install local package". Browse to the file you downloaded and click install.
  3. Then add the macro "EyeCatch Syntax Highlighter" to the <head /> section of your master template. If you want to use a different theme than the default one, just specifiy the name in the "Theme" parameter. Otherwise leave blank.
  4. Open a content page with a richtext editor on it, and click the code icon to the right on the toolbar. Paste your code in the window that appears, choose the language and then optionally some settings.

HOW TO USE:

  1. Go to a content page with the TinyMCE editor on it. Click the code button that has now appeared on the right side of the toolbar.
  2. Paste your code in the textarea, select the language and optionally set some settings.
  3. Press insert and then save your page.

Thats it! Simple eh?

Download TinyMCE Plugin (Down for maintenance)

Download Umbraco Package

Changelog

1.0

Initial release.