Configuration

These instructions apply to v4 and up. If you are looking for instructions for older version, please see the original manual.

💰 💰 💰 Please click here to donate via PayPal and just like they say on TV – give generously! It motivates me to keep working on this (12 years now and counting).

Global Configuration

You can configure all instance of SyntaxHighlighter on the page via a global variable syntaxhighlighterConfig. For example:

<script src="syntaxhighlighter.js"></script>
<script>
syntaxhighlighterConfig = {
  className: 'custom-class-name'
};
</script>

Per Element Configuration

Alternatively you can pass the same options to each element you want to configure. Key/value pairs are specified in the format similar to CSS and you have to use dash-case. Why not use data-attributes you might be wondering? That was not a thing in 2004 (when #114 lands, it will be supported, PR welcome!)

<pre class="brush: php; auto-links: false; first-line: 10; highlight: [2, 4]">
  /**
    * https://github.com/syntaxhighlighter
    */
  echo("https://github.com/syntaxhighlighter");
</pre>

Options

• autoLinks (Default 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.
• className (Default null) - Allows you to add a custom class (or multiple classes) to every highlighter element that will be created on the page.
• firstLine (Default 1) - Allows you to change the first (starting) line number.
• gutter (Default true) - Allows you to turn gutter with line numbers on and off.
• highlight(Default 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.
• htmlScript(Default 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.
• smartTabs (Default true) - Allows you to turn smart tabs feature on and off.
• tabSize (Default 4) - Allows you to adjust tab size.