SyntaxHighlighter3 Plugin

The plugin has been adapted to current plugin layout. Unfortunately this means that you have to remove any old version (installed before 2011-06-07) and then install the latest version of the plugin.

Download and install the plugin using the Plugin Manager using the URL given above. Refer to Plugins on how to install plugins manually.

The subfolder sxh3 contains a complete (and untouched) distribution of SyntaxHighlighter 3.0.83.

Client side syntax highlighter (with copy to clipboard functionality) based on SyntaxHighlighter Plugin by David Shin. Main differences:

• Updated to use version 3.0.83 of SyntaxHighlighter by Alex Gorbatchev.
• Does not use <code> tags, enables parallell use with DokuWikis own server side syntax highlighter (GeSHi).
• Does not require Flash for copy to clipboard functionality.

Update 2011-06-07:

• Plugin adapted to current plugin layout.
• Uses Autoloader instead of always loading all brushes on all pages.
• Uses Config Manager to select theme and configure Autoloader brush list. No longer necessary to edit action.php, i.e. plugin updates will not overwrite extra brushes.
• Add support for block title attribute.

Usage:

<sxh [brush alias][; options for SyntaxHighlighter]>
... code/text ...
</sxh>

brush alias - The brush alias (language) that SyntaxHighlighter should use. Defaults to “text” if none is provided. See SyntaxHighlighter Brushes for a complete list of available brushes. Add new brushes to the scripts directory (see plugin structure) and the alias(es) and brush file name to the available brushes string in Config Manager (example: ”…,bat cmd shBrushBat.js”). The brush file name is case sensitive.

options - Semicolon separated options for SyntaxHighlighter, see SyntaxHighlighter Configuration. Block Title isn't a normal configuration option, but the plugin handles it as if it was, i.e. “title: <title string>;”. Do not collapse code and hide the toolbar at the same time, title will not show.

Example:

<sxh php; first-line: 70; highlight: [89,92]; title: New title attribute in action>
    public function render($mode, &$renderer, $data) {
 
        if($mode != 'xhtml') return false;
 
        if (count($data) == 3) {
            list($syntax, $attr, $content) = $data;
            if ($syntax == 'sxh') {
                // Check if there's a title in the attribute string. It can't be passed along as a normal parameter to SyntaxHighlighter.
                if (preg_match("/title:/i", $attr)) {
                    // Extract title(s) from attribute string.
                    $attr_array = explode(";",$attr);
                    $title_array = preg_grep("/title:/i", $attr_array);
                    // Extract everything BUT title(s) from attribute string.
                    $not_title_array =  preg_grep("/title:/i", $attr_array, PREG_GREP_INVERT);
                    $attr = implode(";",$not_title_array);
                    // If there are several titles, use the last one.
                    $title = array_pop($title_array);
                    $title = preg_replace("/.*title:\s{0,}(.*)/i","$1",$title);
                    // Add title as an attribute to the <pre /> tag.
                    $renderer->doc .= "<pre class=\"brush: ".$attr."\" title=\"".$title."\">".$renderer->_xmlEntities($content)."</pre>";
                } else {
                    // No title detected, pass all attributes as parameters to SyntaxHighlighter.
                    $renderer->doc .= "<pre class=\"brush: ".$attr."\">".$renderer->_xmlEntities($content)."</pre>";
                }
             } else {
                $renderer->file($content);
            }
        }
 
        return true;
    }
</sxh>

Expected result (this is a screenshot image, copy to clipboard will not work):

Double click anywhere inside SyntaxHighlighter code area to highlight the text and then copy it using Ctrl/Cmd+C or mouse right click → Copy.

Click outside the code area to restore highlighting.

This plugin conflics badly with “Sidebar” plugin, once the sidebar is displayed in the page, sintax highlighter becomes useless.

I've added sidebar to a test DW (latest RC) with the default template and didn't see any problem. There is however a long list of problems on the sidebar plugin page that haven't been adressed since 2009, there's also a recommendation to change Javascript implementation from a very skilled (former) DokuWiki dev/contributor. I would therefore recommend that you do not use that plugin, it looks unmanaged and is probably abandoned.

I suggest that you try Arctic template instead which doesn't need a separate sidebar plugin.

The “toolbar” option doesn't seem to work (it never shows up when you mouse over the code). The unfortunate side effect is that you get an ugly green ? on every block of code (see the image above) - whether you're moused over it or not. Extremely unattractive particularly for pages that have lots of code segments.

Wrong. The “ugly green ?” is the toolbar, which you can turn off (hide) by adding “toolbar: false” to the option string. The hover (Flash) toolbar has been removed in version 3 of SyntaxHighlighter.

Only when I enabled this plugin, I get this error at http://validator.w3.org result of my wiki start page: “Validation Output: 1 Error <script language='javascript'> The attribute given above is required for an element that you've used, but you have omitted it. For instance, in most HTML and XHTML document types the “type” attribute is required on the “script” element and the “alt” attribute is required for the “img” element. Typical values for type are type=“text/css” for <style> and type=“text/javascript” for <script>.” – 2011-05-28

Should be fixed now, please download plugin again (you can use plugin manager).

I like this plugin! nice job There is a small conflict with the Ace-Editor-Plugin, there comes a message “brushes not found”. After I removed Ace-Editor, everything works fine.

Yep, there seems to be a conflict. I've contacted the author of the Ace Editor plugin, hopefully we will find a solution.

The conflict has been resolved, all credit goes to Albert Gasset who updated Ace Editor plugin with a workaround.

Unfortunately most of the icons in the DW editor disapears after installing this plugin. DokuWiki version: Release 2011-05-25a “Rincewind”, PHP version 5.3.8-1~dotdeb.1 _{Joachim 2011-11-07}

Hmm, I've never seen that in my wikis.

Tried a clean install of Rincewind/Apache 2/PHP 5.3.8-1 on Debian Squeeze and added SyntaxHighlighter3, no problem with DW editor.

Also tried the latest RC (“Angua”), no problem with DW editor.

Difficult to track down if I can't reproduce … maybe there's a conflict with another plugin? Could you list all extra plugins installed in your wiki?

This plugin renders beautifully! If possible it would be nice to have a title at the top of the code block like the default <code></code> functionality. – Jeff

Hmmm, there is the "Block title" support in SyntaxHighlighter, unfortunately it isn't a “normal” configuration option, it can't be passed along like the other parameters.
Might be doable, I'll add it to the todo-list for when I have the time and energy to update the plugin. Could be a while.

Should be fixed now, remove old version of plugin and install again using download link above.

I would like to use this plugin for highlighting and showing code from a file I have uploaded via mediamanager into a data/media/… directory.
Could it be possible to patch or enhance this plugin to do this? _{Joachim 2011-11-07}

Don't think it's possible, the plugin only deals with the wiki code, not external files.

These files and directories are included in the plugin:

syntaxhighlighter3
|-- action
|   `-- action.php
|-- conf
|   |-- default.php
|   `-- metadata.php
|-- lang
|   `-- en
|       `-- settings.php
|-- plugin.info.txt
|-- README
|-- sxh3
|   |-- compass
|   |   |-- config.rb
|   |   |-- shCoreDefault.scss
|   |   |-- shCoreDjango.scss
|   |   |-- shCoreEclipse.scss
|   |   |-- shCoreEmacs.scss
|   |   |-- shCoreFadeToGrey.scss
|   |   |-- shCoreMDUltra.scss
|   |   |-- shCoreMidnight.scss
|   |   |-- shCoreRDark.scss
|   |   |-- shCore.scss
|   |   |-- shThemeDefault.scss
|   |   |-- shThemeDjango.scss
|   |   |-- shThemeEclipse.scss
|   |   |-- shThemeEmacs.scss
|   |   |-- shThemeFadeToGrey.scss
|   |   |-- shThemeMDUltra.scss
|   |   |-- shThemeMidnight.scss
|   |   |-- shThemeRDark.scss
|   |   `-- _theme_template.scss
|   |-- index.html
|   |-- LGPL-LICENSE
|   |-- MIT-LICENSE
|   |-- scripts
|   |   |-- shAutoloader.js
|   |   |-- shBrushAppleScript.js
|   |   |-- shBrushAS3.js
|   |   |-- shBrushBash.js
|   |   |-- shBrushColdFusion.js
|   |   |-- shBrushCpp.js
|   |   |-- shBrushCSharp.js
|   |   |-- shBrushCss.js
|   |   |-- shBrushDelphi.js
|   |   |-- shBrushDiff.js
|   |   |-- shBrushErlang.js
|   |   |-- shBrushGroovy.js
|   |   |-- shBrushJavaFX.js
|   |   |-- shBrushJava.js
|   |   |-- shBrushJScript.js
|   |   |-- shBrushPerl.js
|   |   |-- shBrushPhp.js
|   |   |-- shBrushPlain.js
|   |   |-- shBrushPowerShell.js
|   |   |-- shBrushPython.js
|   |   |-- shBrushRuby.js
|   |   |-- shBrushSass.js
|   |   |-- shBrushScala.js
|   |   |-- shBrushSql.js
|   |   |-- shBrushVb.js
|   |   |-- shBrushXml.js
|   |   |-- shCore.js
|   |   `-- shLegacy.js
|   |-- src
|   |   |-- shAutoloader.js
|   |   |-- shCore.js
|   |   `-- shLegacy.js
|   |-- styles
|   |   |-- shCore.css
|   |   |-- shCoreDefault.css
|   |   |-- shCoreDjango.css
|   |   |-- shCoreEclipse.css
|   |   |-- shCoreEmacs.css
|   |   |-- shCoreFadeToGrey.css
|   |   |-- shCoreMDUltra.css
|   |   |-- shCoreMidnight.css
|   |   |-- shCoreRDark.css
|   |   |-- shThemeDefault.css
|   |   |-- shThemeDjango.css
|   |   |-- shThemeEclipse.css
|   |   |-- shThemeEmacs.css
|   |   |-- shThemeFadeToGrey.css
|   |   |-- shThemeMDUltra.css
|   |   |-- shThemeMidnight.css
|   |   `-- shThemeRDark.css
|   `-- tests
|       |-- brushes
|       |   `-- sass.html
|       |-- brushes_tests.html
|       |-- cases
|       |   |-- 001_basic.html
|       |   |-- 002_brushes.html
|       |   |-- 003_script_tag.html
|       |   |-- 004_url_parsing.html
|       |   |-- 005_no_gutter.html
|       |   |-- 006_pad_line_numbers.html
|       |   |-- 007_collapse.html
|       |   |-- 007_collapse_interaction.html
|       |   |-- 008_first_line.html
|       |   |-- 009_class_name.html
|       |   |-- 010_highlight.html
|       |   |-- 011_smart_tabs.html
|       |   |-- 012_server_side.html
|       |   |-- 013_html_script.html
|       |   `-- 014_legacy.html
|       |-- commonjs_tests.js
|       |-- js
|       |   |-- jquery-1.4.2.js
|       |   |-- qunit.css
|       |   `-- qunit.js
|       |-- syntaxhighlighter_tests.html
|       |-- theme_tests.html
|       |-- webrick.rb
|       `-- webrick.sh
`-- syntax
    `-- syntax.php