SyntaxHighlighter is a nice JavaScript-based code highlighter I’ve used for several years, and integrated into TextPattern for the blackrobes.net site, but I haven’t documented the process until now.

Integrating SyntaxHighlighter uses the soo_required_files and soo_plugin_pref plugins. You can find them at http://ipsedixit.net/txp/74/soo_required_files. Install and activate both, keeping the default settings.

Install SyntaxHighlighter in the document root /syntaxhighlighter. No special configuration is needed. SyntaxHighlighter can be found at http://alexgorbatchev.com/SyntaxHighlighter/.

In TextPattern, make a custom field called Requires. By default this is the name soo_required_files uses for per-article script loading.

Add the following forms to the Miscellaneous category to enable SyntaxHighligher scripting functions. The form require_sh_head loads all the necessary SyntaxHighligher processing scripts into the page. Brush files are loaded later, as called for by the article.

1
2
3
4

<!-- form misc/require_sh_head -->
<script type="text/javascript" src="/syntaxhighlighter/scripts/shCore.js"></script>
<link rel="stylesheet" type="text/css" href="/syntaxhighlighter/styles/shCore.css" />
<link rel="stylesheet" type="text/css" href="/syntaxhighlighter/styles/shThemeDefault.css" />

The form require_sh_activate will be called by the article to indicate SyntaxHighlighter should be activated for the article.

1
2

<!-- form misc/require_sh_activate -->
<script type="text/javascript">SyntaxHighlighter.all();</script>

Create forms for any brush files. I name these require_shb_brushname, where shb is a brush file is needed, whereas sh designates a SyntaxHighlighter need. All the brush file forms are similar and only load one brush each.

1
2

<!-- form misc/require_shb_plain -->
<script type="text/javascript" src="/syntaxhighlighter/scripts/shBrushPlain.js"></script>

1
2

<!-- form misc/require_shb_javascript -->
<script type="text/javascript" src="/syntaxhighlighter/scripts/shBrushJScript.js"></script>

1
2

<!-- form misc/require_shb_html -->
<script type="text/javascript" src="/syntaxhighlighter/scripts/shBrushXml.js"></script>

In the article, put the brush name, such as shb_javascript, and sh_activate, each separated with commas, into the Requires custom field. It is recommended that sh_activate is placed last. You do not need to include the require_ because it is added by soo_required_files.

1

shb_html, shb_plain, sh_activate

The brushes in the Requires field must correspond with the brush requested in the article. For example, requesting the JavaScript brush should have the corresponding Requires name.

SyntaxHighlighter can be used with either <script> or <pre> tags. THe advantage of the <pre> tag is the text can be seen by RSS readers and in places where scripting is disabled, but requires that the less-than opening bracket character < be replaced with the entity &lt;. Using the <script> along with <[CDATA[]]> means most anything can be used as-is, but will be invisible to RSS readers and places where scripting is not active. Both examples are shown below.

1
2
3
4

notextile.. <script type="syntaxhighlighter" class="brush:html;" title="Paragraph example">
<![CDATA[
<p>This is a paragraph.<p>
]]></script>

1
2
3

notextile.. <pre class="brush:html;" title="Paragraph example">
&lt;p>This is a paragraph.&lt;/p>
</pre>

1

shb_html, sh_activate

Will render as

1

<p>This is a paragraph.</p>

When using HTML- or XML-like brushes, sometimes tags such as cause problems rendering in SyntaxHighlighter; the most common symptom is a partial or nonrendered highlight, or unwanted characters after the highlight. In this case, use the XML entities such as &lt;: using &lt;/script> will render as </script>.