GWcode SyntaxHighlighter Installation

Please note, you need to have Wygwam version 2.0.1 or above installed to get this working.

  1. Download SyntaxHighlighter and upload it to your server in a directory of choice:
    http://alexgorbatchev.com/SyntaxHighlighter/download/
    The EE brush works with both SyntaxHighlighter 2.x and 3.x, so feel free to use the SyntaxHighlighter 2.x version if you prefer.
  2. Upload the "syntaxhighlighter/scripts/shBrushEE.js" and "syntaxhighlighter/styles/shEE.css" files to your SyntaxHighlighter folder from step 1.
  3. Upload the "themes/third_party/wygwam/lib/ckeditor/plugins/syntaxhighlight" folder to
    "themes/third_party/wygwam/lib/ckeditor/plugins/". 1
  4. Upload the "system/expressionengine/third_party/gwcode_syntaxhighlighter" folder to "system/expressionengine/third_party/"
  5. Enable the extension in "Add-Ons → Extensions".
  6. Go to "Add-Ons → Fieldtypes → Wygwam". Click on the Wygwam Editor Configuration where you would like
    to add the button to. Under "Advanced Settings", select "entities_additional" and use "#39,#123,#125" as
    the value.2 Then, underneath that, select "extraPlugins" and use "syntaxhighlight" as the value.
    Update the configuration settings.
  7. Add SyntaxHighlighter to your site. Instructions on how to do so can be found on the SyntaxHighlighter site:
    http://alexgorbatchev.com/SyntaxHighlighter
    Make sure you include the shBrushEE.js and the shEE.css files in the header of your pages.

 

1) CKeditor plugins need to be placed inside the ckeditor/plugins folder. Unfortunately, this means that you will need to remember to not delete the "themes/third_party/wygwam/lib/ckeditor/plugins/syntaxhighlight" folder when you upgrade Wygwam to a new version.

2) This will make sure that all open and closing curly braces will be converted to their HTML entities, which prevents any EE tags from actually being parsed.

I recommend using John D Wells' excellent Minimee extension to combine and minify the javascript and css files.