Using Syntax Highlighter with Telligent Evolution

Telligent Evolution Platform

A description has not yet been added to this group.

Using Syntax Highlighter with Telligent Evolution

  • Comments 3

Syntax Highlighter is a code syntax highlighter written in Javascript.  The following blog post describes how you can use Syntax Highlighter with your Telligent Evolution platform Community, taking you first through setting up the Syntax Highlighter scripts and then installing a plugin for the text editor to make using Syntax Highlighter easier.

Install The Syntax Highlighter Scripts

Note, the following instructions assume that you are running your Telligent Evolution platform community at the root of your domain.  If you are not, you will need to modify the paths for scripts and stylesheets to match the subdirectory your community is installed to.

  1. Download the Syntax Highlighter  3.0 files from http://alexgorbatchev.com/SyntaxHighlighter/download/
  2. Extract the contents of that download to a folder in your Telligent Evolution platform community (e.g. ~/SyntaxHighlighter/)
  3. Go to your community, login as an administrator and go to Control Panel > System Administration > Site Administration > Site Configuration > Setup > General Site Settings
    1. In the “Raw Header” field, add the stylesheets required by Syntax Highlighter.
      <link href="/SyntaxHighlighter/styles/shCore.css" rel="stylesheet" type="text/css" />
      <link href="/SyntaxHighlighter/styles/shThemeDefault.css" rel="stylesheet" type="text/css" /> 
    2. In the Google Analytics  field, add the javascript required by the plugin
      <script src="/SyntaxHighlighter/scripts/shCore.js" type="text/javascript"></script>
      <script src="/SyntaxHighlighter/scripts/shAutoloader.js" type="text/javascript"></script>
      
      <script type="text/javascript">
      SyntaxHighlighter.autoloader(
         'applescript            /SyntaxHighlighter/scripts/shBrushAppleScript.js'
        ,'actionscript3 as3      /SyntaxHighlighter/scripts/shBrushAS3.js'
        ,'bash shell             /SyntaxHighlighter/scripts/shBrushBash.js'
        ,'coldfusion cf          /SyntaxHighlighter/scripts/shBrushColdFusion.js'
        ,'cpp c                  /SyntaxHighlighter/scripts/shBrushCpp.js'
        ,'c# c-sharp csharp      /SyntaxHighlighter/scripts/shBrushCSharp.js'
        ,'css                    /SyntaxHighlighter/scripts/shBrushCss.js'
        ,'delphi pascal          /SyntaxHighlighter/scripts/shBrushDelphi.js'
        ,'diff patch pas         /SyntaxHighlighter/scripts/shBrushDiff.js'
        ,'erl erlang             /SyntaxHighlighter/scripts/shBrushErlang.js'
        ,'groovy                 /SyntaxHighlighter/scripts/shBrushGroovy.js'
        ,'java                   /SyntaxHighlighter/scripts/shBrushJava.js'
        ,'jfx javafx             /SyntaxHighlighter/scripts/shBrushJavaFX.js'
        ,'js jscript javascript  /SyntaxHighlighter/scripts/shBrushJScript.js'
        ,'perl pl                /SyntaxHighlighter/scripts/shBrushPerl.js'
        ,'php                    /SyntaxHighlighter/scripts/shBrushPhp.js'
        ,'text plain             /SyntaxHighlighter/scripts/shBrushPlain.js'
        ,'py python              /SyntaxHighlighter/scripts/shBrushPython.js'
        ,'ruby rails ror rb      /SyntaxHighlighter/scripts/shBrushRuby.js'
        ,'sass scss              /SyntaxHighlighter/scripts/shBrushSass.js'
        ,'scala                  /SyntaxHighlighter/scripts/shBrushScala.js'
        ,'sql                    /SyntaxHighlighter/scripts/shBrushSql.js'
        ,'vb vbnet               /SyntaxHighlighter/scripts/shBrushVb.js'
        ,'xml xhtml xslt html    /SyntaxHighlighter/scripts/shBrushXml.js'
      );
      SyntaxHighlighter.config.stripBrs = true;
      SyntaxHighlighter.all();
      </script>
    3. Save the page

At this stage, you should now be able to use syntax highlighter by manually editing the HTML of your posts to include the required syntax for Syntax Highlighter to do it’s work (e.g. <pre class="brush: xml">Here is some code</pre> ), however there is an extension for the Text Editor used by Telligent Evolution that makes it easier to insert code without having to manually edit the HTML.

    Install the SyntaxHl TinyMCE plugin

    There is a SyntaxHl plugin for TinyMCE which makes it easier to insert code samples into content through the TinyMCE text editor.  To install this plugin:

    1. Download the SyntaxHL plugin from http://github.com/RichGuk/syntaxhl
    2. Copy the contents of the download to ~/tiny_mce/plugins/syntaxhl/
    3. Add the following entries to your communityserver_override.config file to register the SyntaxHL plugin 
      <!--
      	TinyMCE extensions for Syntax Highlighter
      	- requires SyntaxHl extension from http://github.com/RichGuk/syntaxhl
      -->
      <!-- Add Pre to the format selection list -->
      <Override xpath="/CommunityServer/Core/editors/editor[@name='Enhanced']/editorOption[@name='theme_advanced_blockformats']" mode="change"
      			 name="value"
      			 value="'h2,h3,h4,p,pre,div'"
      			 />
      <!-- Register the SyntaxHL Plugin -->
      <Override xpath="/CommunityServer/Core/editors/editor[@name='Enhanced']/editorOption[@name='plugins']" mode="change"
      			 name="value"
      			 value="'advhr,advimage,advlink,contextmenu,emotions,fullscreen,iespell,insertmedia,insertvideo,paste,safari,smilies,spellchecker,table,syntaxhl'"
      			 />
      <!-- Add the SyntaxhHL button -->
      <Override xpath="/CommunityServer/Core/editors/editor[@name='Enhanced']" mode="add">
      	<editorOption name="theme_advanced_buttons2_add" value="'syntaxhl'" />
      </Override>

    Using the Syntax HL Plugin

    Now when you use the text editor, you should see a syntax highlighter button on the right of the bottom row.

    image

    Upon clicking this button, you will get a window which allows you to paste in your code sample, specify the language the code is written in, as well as a few more configuration options supported by Syntax Highlighter.

    image

    When you save your content, you should see the code highlighted in colour when you view it.  For example, submitting the code in a forum post gives

    image

    Troubleshooting

    If you have problems, then you most likely haven’t specified the correct path to the syntax Highlighter scripts in the “Install the SyntaxHl TinyMCE plugin” section.  Use a tool such as Fiddler to view the HTTP Traffic when you view a page containing some code blocks configured for Syntax Highlighter – check your browser is successfully requesting the javascript and stylesheet files.  You should also check your browsers for any javascript errors.

    Your comment has been posted.   Close
    Thank you, your comment requires moderation so it may take a while to appear.   Close
    Leave a Comment
    • Post
    • Excellent! Thank you so much!

    • If you’ve been watching the documentation on http://telligent.com over the past 6 months or so, you’ll

    • If you are using SyntaxHighlighter for Telligent Community 7.6, you'll want to use a different override. Here it is below:

         <!-- TinyMCE extensions for Syntax Highlighter - requires SyntaxHl extension from github.com/.../syntaxhl -->

         <!-- Add Pre to the format selection list -->

         <Override xpath="/CommunityServer/Core/editors/editor[@name='Enhanced']/editorOption[@name='theme_advanced_blockformats']" mode="change"

             name="value"

             value="'h2,h3,h4,p,pre,div'"

             />

         <!-- Register the SyntaxHL Plugin -->

         <Override xpath="/CommunityServer/Core/editors/editor[@name='Enhanced']/editorOption[@name='plugins']" mode="change"

             name="value"

             value="'advhr,advimage,advlink,autolink,contextmenu,emotions,fullscreen,insertmedia,paste,smilies,table,tinyautosave,inlinepopups,lists,editoradjustments,mentions,hashtags,syntaxhl'"

             />

         <!-- Add the SyntaxhHL button -->

         <Override xpath="/CommunityServer/Core/editors/editor[@name='Enhanced']/editorOption[@name='theme_advanced_buttons2']" mode="change"

             name="value"

             value="'bold,italic,underline,strikethrough,backcolor,separator,bullist,numlist,separator,outdent,indent,separator,insertmedia,insertvideo,pasteword,link,table,anchor,advhr,smilies,separator,undo,redo,syntaxhl'"

             />

    Page 1 of 1 (3 items)