Github handles single file downloads differently now so the old download URL is no longer correct, uninstall old plugin (installed before 2013-08-07) and install again using new download URL above.

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.

Update 2013-08-07:

• Fixed problem with the option html-script, always load shBrushXml.js to make it work.
• Convert brush aliases and options to lowercase, SyntaxHighlighter is case sensitive.

Github handles single file downloads differently now so the old download URL is no longer correct, uninstall old plugin and install again using new download URL above.

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.

I've noticed that the latest template / theme for dokuwiki add's a box shadow around normal code blocks
I think it's the Adora Belle theme

This has the affect of adding a box shadow around small bits of code shown via syntax highlighter

The fix I've found is just to add the following line to shCore.css within “.syntaxhighlighter textarea” code,

  box-shadow: none;

The html-script option is not working. For example in this simple example the div isn't syntaxhighlighted:

<sxh php; html-script: true>
<div>Some text</div>
<?php
public function render($mode, &$renderer, $data) {

  if($mode != 'xhtml') return false;
}
?>
</sxh>

Should be fixed now. Remove plugin and install again with download link above, github handles single file downloads differently now so the old URL is no longer correct.

If you trigger a search e.g. “switch” and this searchitem is part of a codeblock, the raw html tag for highlighting will be shown

Yep, the search function seems to insert HTML tags into the code block at each hit.
Don't know if I can do anything about that, the search is done server-side so the HTML code that reaches SXH (client-side) already has the highlighting tags inserted.

According to a very skilled DW dev it is a core DW issue and quite difficult to fix: http://permalink.gmane.org/gmane.comp.web.wiki.dokuwiki.general/16194

Link to related bug report in case the gmane link stops working: https://bugs.dokuwiki.org/index.php?do=details&task_id=2321

I can't do much about it in the plugin.

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.

How can I that?

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.

Since in last version toolbar is not used more, is it possible to disable it by default? _{Boris 2012-02-21}

Modified shCore.js without toolbar : shCore.js _{Boris 2012-02-22}

I prefer to leave SyntaxHighlighter files and functionality untouched. Makes troubleshooting and maintenance easier.

I have considered adding a config setting for default options, but haven't done it because I think it would confuse the end users and it's probably not very easy to agree on what they should be, at least in an environment with a lot of users.

There's also an issue with disabling the toolbar while collapsing code, the code area will disappear completely.

Is there any way to have dw2pdf supported? _{Joachim 2013-04-10}

dw2pdf looks like a great plugin. Unfortunately I don't believe it's possible to use it with SyntaxHighlighter.

SyntaxHighlighter renders it's output locally in the web browser on the client (i.e. “client-side”), dw2pdf renders the PDF file on the web server (i.e. “server-side”).

To have them interact, they both need to be either client-side or server-side.

Is it possible to also copy a trailing newline if included in the sxh block? The double-click to select block is great, but I can't figure out how to include a newline at the end of the last line of the block. Clippy allows this. Of course, clippy is very different and requires flash, so perhaps not a good example.

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