DpSyntaxHighlighterPlugin
This plugin provides client side syntax highlighting using the
dp.SyntaxHighlighter by Alex Gorbatchev. JavaScript needs to be enabled on the clients web browser for this to work.
Syntax Rules
The code goes between the tags
%CODE{...}%
and
%ENDCODE%
.
%CODE{...}%
can have the following parameters:
Parameter |
Description |
"..." or lang="..." |
The programming language to be highlighted. See Supported Languages. |
nogutter="on" |
Will not display the gutter. |
nocontrols="on" |
Will not display controls at the top. |
collapse="on" |
Will collapse the block by default. |
firstline="value" |
Will begin line count at value. Default value is 1. |
showcolumns="on" |
Will show row columns in the first line. |
el="..." |
HTML element to display the code in. Can be pre or textarea . Default is pre . See DpSyntaxHighlighterPlugin. |
rows="value" cols="value" |
Sets the rows and columns attributes. Recommend if using textarea so the code can be seen clearly when JavaScript is not available. |
nowrap="on" |
Prevents line wrapping |
ruler="on" |
Adds a line character ruler to the top |
nosmarttabs="on" |
Semi-intelligent tabbing (Demo) |
tab-size="value" |
Set the tab size for tab expansion |
highlight="1,2,3" |
Highlight specific lines of code |
noautolinks="on" |
Prevent links in the highlighted code being clickable |
Plugin Preferences
The following options can be set, either in
SitePreferences or
WebPreferences.
Example |
Description |
DPSYNTAXHIGHLIGHTERPLUGIN_THEME = Default |
The theme to use for code highlighting - several are included with SyntaxHighlighter |
DPSYNTAXHIGHLIGHTERPLUGIN_HIDE_ABOUT = ON |
Hides the "About" button if enabled. |
DPSYNTAXHIGHLIGHTERPLUGIN_HIDE_PRINT = ON |
Hides the "Print" button if enabled. |
DPSYNTAXHIGHLIGHTERPLUGIN_SPACEWIDTH = 8 |
Number of pixels to use for a space when expanding tabs. Normally discovered through javascript but may be incorrect depending on the wiki skin. 8 is a good value for PatternSkin in my environment. |
Currently all the Foswiki syntax highlighting plugins use the same
%CODE%
syntax. This allows you to switch the highlighter you use without having to update all your topics to the new syntax. However, it also means that if you have two or more highlighting plugins installed on your system, the plugin that is first in
$Foswiki::cfg{PluginsOrder}
(or by default, first alphabetically) will consume all the
%CODE%
blocks.
Version 1.2 of this plugin added support for using the
%CODE_DP%
syntax, which allows you to explicitly which plugin you want to highlight your code.
Clearly this is not the best solution to the problem of using more than one highlighting plugin. You can read the background on why this approach was taken in the
task report.
Pre vs Textarea
There are known problems when displaying XML (and HTML) in a
pre
element. See
http://code.google.com/p/syntaxhighlighter/wiki/PreAndTextarea for more information.
Supported Languages
The following languages are supported:
- as3, actionscript3
- bash
- css
- c#, c-sharp, csharp
- c, cpp, c++
- delphi, pascal
- diff
- groovy
- js, jscript, javascript
- java
- javafx
- pl, perl
- plain, text, ascii (no highlighting)
- php
- py, python
- ruby
- scala
- sql
- vb, vb.net
- xml, xhtml, xslt, html, xhtml
Any of these can be used in the
lang
parameter.
Examples
Below is a screen shot of how the rendered code will look.
Installation Instructions
You do not need to install anything in the browser to use this extension. The following instructions are for the administrator who installs the extension on the server.
Open configure, and open the "Extensions" section. Use "Find More Extensions" to get a list of available extensions. Select "Install".
If you have any problems, or if the extension isn't available in
configure
, then you can still install manually from the command-line. See
http://foswiki.org/Support/ManuallyInstallingExtensions for more help.
If the plugin is installed correcty, the following should be rendered:
%CODE{ lang="javascript" }%
function hello () {
alert('hello // world');
}
%ENDCODE%
BaseStyle.css sets
%CODE{"css"}%.natMainContents {
min-height: 40em;
}%ENDCODE%
You should add an override to your CSS customisations that has the following effect:
%CODE{"css"}%.natMainContents {
min-height: 0;
}%ENDCODE%
Plugin Info