SilverStripe Syntax Highlighter

CMS, CODING

A blog dedicated to software design and development, as our company blog is, usually has many articles that contain program code examples. It would be very useful to have code highlighting enabled by default in SilverStripe CMS.

However, we can add it easyily. One of the most used JavaScript tool fo code highlighting is SyntaxHighligher created by Alex Gorbatchev (http://alexgorbatchev.com). We're going to describe the procedure for implementing SyntaxHiglighter to SilverStripe CMS in step-by-step tutorial.

- Advertisement -

How to add Syntax Highlighter to SilverStripe CMS

1) Download TinyMCE plugin Syntaxhl (http://github.com/RichGuk/syntaxhl)

2) Copy downloaded files to sapphire/thirdparty/tinymce/plugins/syntaxhl

3) Enable the plugin in mysite/_config.php

HtmlEditorConfig::get('cms')->enablePlugins('syntaxhl');
HtmlEditorConfig::get('cms')->insertButtonsAfter('formatselect', 'syntaxhl');

4) Open cms/_config.php file and add the next line to 'extended_valid_elements' array:

textarea[cols|rows|disabled|name|readonly|class]

The line in cms/_config.php should look as follows:

'extended_valid_elements' => "img[class|src|alt|title|hspace|vspace|width|height|align|onmouseover|onmouseout|name|usemap],iframe[src|name|width|height|align|frameborder|marginwidth|marginheight|scrolling],object[width|height|data|type],param[name|value],map[class|name|id],area[shape|coords|href|target|alt],textarea[cols|rows|disabled|name|readonly|class]"

5) Download SyntaxHigligher from the site http://alexgorbatchev.com/SyntaxHighlighter/download/

6) Copy css styles from syntaxhighlighter's folder /styles/ to your site

- Advertisement -
- Advertisement -

7) Copy javascript files from syntaxhighlighter's folder /scripts/ to your site

8) Add lines from below in your tempate file; for this purpose we've added all these lines in head tag:

...
<link rel="stylesheet" href="{$BaseHref}{$ThemeDir}/css/syntaxhl/shCore.css" type="text/css">
<link rel="stylesheet" href="{$BaseHref}{$ThemeDir}/css/syntaxhl/shThemeDefault.css" type="text/css">
  
<script type="text/javascript" src="{$BaseHref}{$ThemeDir}/javascript/syntaxhl/shCore.js"></script>
<script type="text/javascript" src="{$BaseHref}{$ThemeDir}/javascript/syntaxhl/shAutoloader.js"></script>
<script type="text/javascript" src="{$BaseHref}{$ThemeDir}/javascript/syntaxhl/shLegacy.js"></script>
<script type="text/javascript" src="{$BaseHref}{$ThemeDir}/javascript/syntaxhl/shBrushAppleScript.js"></script>
<script type="text/javascript" src="{$BaseHref}{$ThemeDir}/javascript/syntaxhl/shBrushAS3.js"></script>
<script type="text/javascript" src="{$BaseHref}{$ThemeDir}/javascript/syntaxhl/shBrushBash.js"></script>
<script type="text/javascript" src="{$BaseHref}{$ThemeDir}/javascript/syntaxhl/shBrushColdFusion.js"></script>
<script type="text/javascript" src="{$BaseHref}{$ThemeDir}/javascript/syntaxhl/shBrushCpp.js"></script>
<script type="text/javascript" src="{$BaseHref}{$ThemeDir}/javascript/syntaxhl/shBrushCSharp.js"></script>
<script type="text/javascript" src="{$BaseHref}{$ThemeDir}/javascript/syntaxhl/shBrushCss.js"></script>
<script type="text/javascript" src="{$BaseHref}{$ThemeDir}/javascript/syntaxhl/shBrushDelphi.js"></script>
<script type="text/javascript" src="{$BaseHref}{$ThemeDir}/javascript/syntaxhl/shBrushDiff.js"></script>
<script type="text/javascript" src="{$BaseHref}{$ThemeDir}/javascript/syntaxhl/shBrushErlang.js"></script>
<script type="text/javascript" src="{$BaseHref}{$ThemeDir}/javascript/syntaxhl/shBrushGroovy.js"></script>
<script type="text/javascript" src="{$BaseHref}{$ThemeDir}/javascript/syntaxhl/shBrushJavaFX.js"></script>
<script type="text/javascript" src="{$BaseHref}{$ThemeDir}/javascript/syntaxhl/shBrushJava.js"></script>
<script type="text/javascript" src="{$BaseHref}{$ThemeDir}/javascript/syntaxhl/shBrushJScript.js"></script>
<script type="text/javascript" src="{$BaseHref}{$ThemeDir}/javascript/syntaxhl/shBrushPerl.js"></script>
<script type="text/javascript" src="{$BaseHref}{$ThemeDir}/javascript/syntaxhl/shBrushPhp.js"></script>
<script type="text/javascript" src="{$BaseHref}{$ThemeDir}/javascript/syntaxhl/shBrushPlain.js"></script>
<script type="text/javascript" src="{$BaseHref}{$ThemeDir}/javascript/syntaxhl/shBrushPowerShell.js"></script>
<script type="text/javascript" src="{$BaseHref}{$ThemeDir}/javascript/syntaxhl/shBrushPython.js"></script>
<script type="text/javascript" src="{$BaseHref}{$ThemeDir}/javascript/syntaxhl/shBrushRuby.js"></script>
<script type="text/javascript" src="{$BaseHref}{$ThemeDir}/javascript/syntaxhl/shBrushSass.js"></script>
<script type="text/javascript" src="{$BaseHref}{$ThemeDir}/javascript/syntaxhl/shBrushScala.js"></script>
<script type="text/javascript" src="{$BaseHref}{$ThemeDir}/javascript/syntaxhl/shBrushSql.js"></script>
<script type="text/javascript" src="{$BaseHref}{$ThemeDir}/javascript/syntaxhl/shBrushVb.js"></script>
<script type="text/javascript" src="{$BaseHref}{$ThemeDir}/javascript/syntaxhl/shBrushXml.js"></script>
  
<script type="text/javascript">
     SyntaxHighlighter.all()
</script>
...

9) After these steps are finished new icon will be added to TinyMCE toolbar and SilverStripe CMS will be ready to highlight code.

How to add content to SyntaxHighlighter in SilverStripe CMS

10) Click the icon

11) Select supported source language from dropdown list

12) Enter your code in a popup window

13) Click "Insert" button

This page itself contains logic for code formatting so you are currently watching syntax highligher in SilverStripe CMS in action.

- Advertisement -