I have been searching for Syntax Highlighter plug-in for Wordpress and Drupal, and decided to install the one available from Alex Gorbatchev. The module makes use of the Syntax Highlighter Javascript Library, and does the job I wanted. In order for Syntax Highlighter plug-in to work, you'll have to install both Javascript library and the module developed for Durpal or Wordpress. Once the module is installed, the syntax for using it is pretty much the same.
Syntax Highlighter Class Example
<pre class="brush: php; auto-links: true; class-name: custom;
collapse: false; first-line: 10; gutter: true; hightlight: 10;
html-script: true; smart-tabs: true; tab-size: 4;
toolbar: false;">
One of the problem that you may see with the default Syntax Highlighter is that you may see vertical scroll bar even though there is nothing to scroll vertically. This only happens to Google Chrome and Safari browsers, and it doesn't show on Firefox and Internet Explorer. To correct this problem, you may want to remove the lines that that defines overflow css property in shCore.css file.
overflow: visible !important; overflow: auto !important;
Bundled Brushes
Syntax Highlighter provides a number of pre-built brushes for various programming languages, scripts, markup languages and it even provides "shell" and "text" brushes for bash and plain old text messages. Unless you use WYSIWYG editor with an integrated Syntax Highlighter plug-in, you'll have to remember to use the correct brush and configuration options when you're using them. Here is the cheatsheet for how you can get best out of Syntax Highlighter.
| Brush Name | Brush Aliases | Javascript Filename |
|---|---|---|
| ActionScript3 | as3, actionscript3 |
shBrushAS3.js |
| ColdFusion | cf, coldfusion |
shBrushColdFusion.js |
| C# | c-sharp, csharp |
shBrushCSharp.js |
| C++ | cpp, c |
shBrushCpp.js |
| CSS | css |
shBrushCss.js |
| Delphi | delphi, pas, pascal |
shBrushDelphi.js |
| Diff | diff, patch |
shBrushDiff.js |
| Erlang | erl, erlang |
shBrushErlang.js |
| Groovy | groovy |
shBrushGroovy.js |
| JavaScript | js, jscript, javascript |
shBrushJScript.js |
| Java | java |
shBrushJava.js |
| JavaFX | jfx, javafx |
shBrushJavaFX.js |
| Perl | perl, pl |
shBrushPerl.js |
| PHP | php |
shBrushPhp.js |
| Plain Text | plain, text |
shBrushPlain.js |
| PowerShell | ps, powershell |
shBrushPowerShell.js |
| Python | py, python |
shBrushPython.js |
| Ruby | rails, ror, ruby |
shBrushRuby.js |
| Scala | scala |
shBrushScala.js |
| SQL | sql |
shBrushSql.js |
| Visual Basic | vb, vbnet |
shBrushVb.js |
| XML | xml, xhtml, xslt, html, xhtml |
shBrushXml.js |
Configuration Options
The table below describe all available Syntax Highlighter configuration options and their default values. These options are local to each Syntax Highlighter element, and the author may change individually by changing the value of the parameters described below.
| Name | Default Value | Description |
|---|---|---|
auto-links |
true |
Allows you to turn detection of links in the highlighted element on and off. If the option is turned off, URLs won’t be clickable. |
class-name
|
'' |
Allows you to add a custom class (or multiple classes) to every highlighter element that will be created on the page. |
collapse |
false |
Allows you to force highlighted elements on the page to be collapsed by default. |
first-line |
1 |
Allows you to change the first (starting) line number. This is only valid if you have the gutter turned on with line numbers. |
gutter |
true |
Allows you to turn gutter with line numbers on and off. |
highlight |
null |
Allows you to highlight one or more lines to focus user’s attention. When specifying as a parameter, you have to pass an array looking value, like [1, 2, 3] or just an number for a single line. If you are changing SyntaxHighlighter.defaults['highlight'], you can pass a number or an array of numbers. |
html-script |
false |
Allows you to highlight a mixture of HTML/XML code and a script which is very common in web development. Setting this value to true requires that you have shBrushXml.js loaded and that the brush you are using supports this feature. |
smart-tabs |
true |
Allows you to turn smart tabs feature on and off. |
tab-size |
4 |
Allows you to adjust tab size. |
toolbar |
true |
Toggles toolbar on/off. The toolbar is a small square box shown on the syntax highlighted element, and gives credit to the author when clicked on the toolbar. You may set this to false by default by entering SyntaxHighlighter.defaults['toolbar'] = false; in the default expression. |
For more information on Syntax Highlighter, please consult Alex Gorbatchev's website below:
Syntax Highlighter Bundled Brushes
Syntax Highlighter Configuration Options
Comments
Yes, it's Drupal installation
Yes, it's Drupal installation.
Add new comment