WP SyntaxHighlighter

Installation

1. 01Upload plugin folder to the /wp-content/plugins/ directory.
2. 02Activate the plugin through the “Plugins” menu in WordPress.
3. 03If you need, go to “Settings” -> “WP SyntaxHighlighter” to configure.

Usage in Visual editor

Note: The build-in “SH TinyMCE Button” can work only with the default visual editor(TinyMCE). Other visual editors(e.g. CKEditor etc.) are not supported.

Note: If you don’t have “ unfiltered_html ” capability, <!--[XXXX]--> can’t be included in your code.

XXXX = 2-4 letter character string including 0-9, A-F or a-f.

Usage: Wrap your code in <pre> tag with “SH TinyMCE Button”.

If you have previously-written code on your post or page, by this way, you can wrap your code in <pre> tag for ‘SyntaxHighlighter’.

1. 04With the mouse, select and highlight your code where you want to aplly “SyntaxHighlighter”.
2. 05Click “pre” button.
3. 06Select language and options.
4. 07Click “Insert” button.

Usage: Paste your code into the post or page with “SH TinyMCE Button”.

If you want to copy the code from the other document and paste into your post or page, this way is best. Your pasted code will be warpped in <pre> tag automatically.

1. 08Click “CODE” button.
2. 09Select language and options and paste your code into textbox.
3. 10Click “Insert” button.

Usage: Change language and options of previously-markuped code with “SH TinyMCE Button”.

1. 11With the mouse, select and highlight your code.
2. 12Click “pre” button.
3. 13Change language and options.
4. 14Click “Update” button.

Usage: Indent by tabs.

1. 15Just type tab in your code. But till your code is wrapped in <pre> tag, you can not type any tabs.

Usage in HTML editor

Note: If you don’t have “ unfiltered_html ” capability, <!--[XXXX]--> can’t be included in your code.

XXXX = 2-4 letter character string including 0-9, A-F or a-f.

Usage: Wrap your code in <pre> tag with “SH pre” button.

If you have previously-written code on your post or page, by this way, you can wrap your code in <pre> tag for ‘SyntaxHighlighter’.

Note: Before you use “SH pre” button, you may need to go to setting panel and activate “Add Quicktag Button” option in “HTML Editor Settings” section.

1. 16With the mouse, select and highlight your code where you want to aplly “SyntaxHighlighter”.
2. 17Click “SH pre” button.
3. 18Select language and options.
4. 19Click “OK” button. Then your code will be wrapped in <pre> tag and escape to HTML entities.

Usage: Wrap your code in <pre> tag without “SH pre” button.

1. 20Just wrap Your Code in <pre> tag with the class attribute as below in HTML editor or using the “Preformatted” style in Visual editor.

You do not need to escape your code to HTML entities. This plugin will escape your code to HTML entities automatically after saving. However, To prevent destroying your code after switching to “Visual editor”, You had better escape your code to HTML entities or save it before switching to “Visual editor”.

Note: If </pre> tags are included in your code, replace </pre> with <!--[/pre]--> .

<pre class="brush: lang">Your Code</pre> *"lang" = your language

1. 21e.g. <pre class="brush: php">Your PHP Code</pre>
2. 22e.g. <pre class="brush: xhtml">Your XHTML Code</pre>

See “ Available languages “. *”Brush aliases” means “lang”.

You can also use some options with <pre> tag.

See “ Options “.

1. 23e.g. <pre class="brush: xhtml; first-line: 10">Your XHTML Code</pre>
2. 24e.g. <pre class="brush: php; html-script: true">Your PHP Code</pre>

This plugin also can support <script> tag method. However, No one should use <script> tag. You must use “HTML editor” to type <script> tag, and when switching to “Visual editor”, TinyMCE will destroy your tag.

Even if using “” method, your codes must be escape to HTML entities.

Just escape following 3 characters: <, >, &

Usage: Wrap your code in shorcode(without unsig buttons).

You can also wrap your in “shorcode” to highlight your code without using buttons.

Note: Before you use “shorcode”, you must go to setting panel and activate “Support shortcode” option in “HTML Editor Settings” section.

Note: Don’t edit a post/page with codes wrapped in shortcode in “Visual editor” or switch from “HTML editor” to “Visual editor”. When your code wrapped in shorcode is displayed in Visual editor, “Visual editor” will destroy your code.

1. 25e.g. [sourcecode language="php" gutter="true" firstline="1" highlight="" htmlscript="false"]Your PHP Code[/sourcecode]
2. 26e.g. [sourcecode lang="xhtml" gutter="true" firstline="1" highlight="" htmlscript="false"]Your XHTML Code[/sourcecode]

This plugin supports WordPress.com’s posting sourcecode method.

Posting Source Code — Support — WordPress.com

You do not need to escape your code to HTML entities. This plugin will escape your code to HTML entities automatically.

Note: The shorcodes can’t be included in your code.

Post a comment with code(s)

Note: Once you enable “Commnets” in “Higlight your code in” option through the setting panel, this plugin allows visitors to post their source code as comments. Note: The default comment form is required to highlight codes in comments. When default comment system is replaced with other(e.g. DISQUS etc.) or closed, the codes in commnets can’t be highlighted and “Comment Highlighter Button” can’t be shown.

Note: If you don’t have “ unfiltered_html ” capability, <!--[XXXX]--> can’t be included in your code.

XXXX = 2-4 letter character string including 0-9, A-F or a-f.

If you use WordPress 3.0 or higher, you had better enable “Comment Highlighter Button” in the setting panel. “Comment Highlighter Button” will help visitors to post a comment with their sourcecodes and highlight them.

Usage: Post a comment with codes using “ <pre> tag” button.

1. 27Paste your code in the comment form.
2. 28Select it and then click the language link button.
3. 29This will wrap your code in <pre> tag and format it when submitted

You do not need to escape your code to HTML entities. This plugin will escape your code to HTML entities automatically.

Note: <!--[/pre]--> can’t be included in your code.

Usage: Post a comment with codes using “Shorcode” button.

1. 30Paste your code in the textarea.
2. 31Select it and then click the language link button.
3. 32This will wrap your code in shortcode(like a BBcode) and format it when submitted

You do not need to escape your code to HTML entities. This plugin will escape your code to HTML entities automatically.

Note: The shorcodes can’t be included in your code.

Usage: Wrap your code in <pre> tag(without unsig buttons).

You can also enter <pre> tag directly without using “Comment Highlighter Button”.

1. 33Just wrap Your Code in <pre> tag with the class attribute as when you use HTML editor without “SH pre” button. Your Code *”lang” = your language

1. 34e.g. <pre class="brush: php">Your PHP Code</pre>

You do not need to escape your code to HTML entities. This plugin will escape your code to HTML entities automatically.

Note: If </pre> tags are included in your code, replace </pre> with <!--[/pre]--> .

Usage: Wrap your code in shorcode(without unsig buttons).

You can also enter “shorcode” directly without using “Comment Highlighter Button”.

Note: Before you use “shorcode”, you must go to setting panel and activate “Support shortcode” option in “Comment Form Settings” section.

1. 35e.g. [sourcecode language="php" gutter="true" firstline="1" highlight="" htmlscript="false"]Your PHP Code[/sourcecode]
2. 36e.g. [sourcecode lang="xhtml" gutter="true" firstline="1" highlight="" htmlscript="false"]Your XHTML Code[/sourcecode]

This plugin supports WordPress.com’s posting sourcecode method.

Posting Source Code — Support — WordPress.com

You do not need to escape your code to HTML entities. This plugin will escape your code to HTML entities automatically.

Note: The shorcodes can’t be included in your code.

Usage: Update comments.(For administrator)

You can use “SH pre” button in the “Comment editor”.

Note: Note: Before you use “SH pre” button, you may need to go to setting panel and activate “Add Quicktag Button” option in “Comment Editor Settings” section.

You can also wrap your code in <pre> tag or shortcode without using “SH pre” button.

Note: Before you use “shorcode”, you must go to setting panel and activate “Support shortcode” option in “Comment Form Settings” section.

WP SyntaxHighlighter Widget

“WP SyntaxHighlighter Widget” is the widget to show highlighted code.

Before you use “WP SyntaxHighlighter Widget”, you must enable “Use WP SyntaxHighlighter Widget” in setting panel. Then go to “Widgets” section under “Appearance” menu to add the “WP SyntaxHighlighter Widget” in your sidebar.

You can use plain text, html tag and sourcecode in the widget.

Usage: Using “ <pre> tag” button.

1. 37Paste your code in the textarea.
2. 38Select it and then click the language link button.
3. 39This will wrap your code in <pre> tag.

You do not need to escape your code to HTML entities. This plugin will escape your code to HTML entities automatically.

Note: <!--[/pre]--> can’t be included in your code.

Usage: Using “Shorcode” button.

1. 40Paste your code in the textarea.
2. 41Select it and then click the language link button.
3. 42This will wrap your code in shortcode(like a BBcode).

You do not need to escape your code to HTML entities. This plugin will escape your code to HTML entities automatically.

Note: The shorcodes can’t be included in your code.

Usage: Wrap your code in <pre> tag(without unsig buttons).

You can also enter <pre> tag directly without using buttons.

1. 43Just wrap your code in <pre> tag with the class attribute as when you use HTML editor without “SH pre” button. Your Code *”lang” = your language

1. 44e.g. <pre class="brush: php">Your PHP Code</pre>

You do not need to escape your code to HTML entities. This plugin will escape your code to HTML entities automatically.

Note: If </pre> tags are included in your code, replace </pre> with <!--[/pre]--> .

Usage: Wrap your code in shorcode(without unsig buttons).

You can also enter “shorcode” directly without using buttons.

Note: Before you use “shorcode”, you must go to setting panel and activate “Support shortcode” option in “WP SyntaxHighlighter Widget Settings” section.

1. 45e.g. [sourcecode language="php" gutter="true" firstline="1" highlight="" htmlscript="false"]Your PHP Code[/sourcecode]
2. 46e.g. [sou