WordPress.org

Ready to get started?Download WordPress

Plugin Directory

!This plugin hasn't been updated in over 2 years. It may no longer be maintained or supported and may have compatibility issues when used with more recent versions of WordPress.

WP SyntaxHighlighter

This plugin is code syntax highlighter based on SyntaxHighlighter ver. 3.0.83 and 2.1.382.

Installation

  1. Upload plugin folder to the /wp-content/plugins/ directory.
  2. Activate the plugin through the "Plugins" menu in WordPress.
  3. If 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. With the mouse, select and highlight your code where you want to aplly "SyntaxHighlighter".
  2. Click "pre" button.
  3. Select language and options.
  4. Click "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. Click "CODE" button.
  2. Select language and options and paste your code into textbox.
  3. Click "Insert" button.

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

  1. With the mouse, select and highlight your code.
  2. Click "pre" button.
  3. Change language and options.
  4. Click "Update" button.

Usage: Indent by tabs.

  1. Just 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. With the mouse, select and highlight your code where you want to aplly "SyntaxHighlighter".
  2. Click "SH pre" button.
  3. Select language and options.
  4. Click "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. Just 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

  • e.g. <pre class="brush: php">Your PHP Code</pre>
  • e.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".

  • e.g. <pre class="brush: xhtml; first-line: 10">Your XHTML Code</pre>
  • e.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.

  • e.g. [sourcecode language="php" gutter="true" firstline="1" highlight="" htmlscript="false"]Your PHP Code[/sourcecode]
  • e.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. Paste your code in the comment form.
  2. Select it and then click the language link button.
  3. This 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. Paste your code in the textarea.
  2. Select it and then click the language link button.
  3. This 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. Just wrap Your Code in <pre> tag with the class attribute as when you use HTML editor without "SH pre" button.
<pre class="brush: lang">Your Code</pre>

*"lang" = your language

  • e.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.

  • e.g. [sourcecode language="php" gutter="true" firstline="1" highlight="" htmlscript="false"]Your PHP Code[/sourcecode]
  • e.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. Paste your code in the textarea.
  2. Select it and then click the language link button.
  3. This 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. Paste your code in the textarea.
  2. Select it and then click the language link button.
  3. This 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. Just wrap your code in <pre> tag with the class attribute as when you use HTML editor without "SH pre" button.
<pre class="brush: lang">Your Code</pre>

*"lang" = your language

  • e.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.

  • e.g. [sourcecode language="php" gutter="true" firstline="1" highlight="" htmlscript="false"]Your PHP Code[/sourcecode]
  • e.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.

bbPress

If bbPress plugin(2,0 or higher) is installed and activated, "bbPress Highlighter Button" can be shown above topic/reply form to make easy to post sourcecodes.

Before you use "bbPress Highlighter Button", you must enable "bbPress Highlighter Button" in setting panel.

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: Post a topic/reply with codes using "<pre> tag" button.

  1. Paste your code in the topic/reply form.
  2. Select it and then click the language link button.
  3. This 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 topic/reply with codes using "Shorcode" button.

  1. Paste your code in the topic/reply form.
  2. Select it and then click the language link button.
  3. This 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 "bbPress Highlighter Button".

  1. Just wrap Your Code in <pre> tag with the class attribute as when you use HTML editor without "SH pre" button.
<pre class="brush: lang">Your Code</pre>

*"lang" = your language

  • e.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 "bbPress Highlighter Button".

Note: Before you use "shorcode", you must go to setting panel and activate "Support shortcode" option in "bbPress Settings" section.

  • e.g. [sourcecode language="php" gutter="true" firstline="1" highlight="" htmlscript="false"]Your PHP Code[/sourcecode]
  • e.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.

In Topics/Replies sections on the setting panel

In Topics/Replies sections, Use "pre" and "code" buttons in Visual editor or "SH pre" button in HTML editor.

Note: 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.

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 "bbPress Settings" section.

Note: Don't edit a topic/reply with code 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.

Legacy mode

You can switch to "Legacy mode" through setting panel. "Legacy mode" allows you to use the old style tag in SyntaxHighlighter ver. 1.5 library(Not mean WP SyntaxHighlighter ver. 1.5).

Your codes must be escape to HTML entities, even if using <textarea> method.

Just escape following 5 characters: <, >, &, ", '

See "Ver. 1.5 Usage".

In "Legacy mode", your selected brushes(languages) will be pre-loaded. Only pre-loaded brushes(languages) can highlight your source code with old style tag. The old style tag can't depended on "autoloader" in ver. 3.0 mode. By default, all brushes(languages) will be pre-loaded in "Legacy mode".

"Legacy mode" may save your previous posts with old style tag. However, No one should continue using old style tag. You must use "HTML editor" to type old style tag.

Add new languages(brush files)

You can add new languages(brush files) using "Action hooks" and associative array.

For details, see "sample" directory.

There is a sample plugin for adding new languages.

Requires: 2.8 or higher
Compatible up to: 3.3.2
Last Updated: 2012-2-29
Downloads: 42,362

Ratings

4 stars
4.9 out of 5 stars

Support

Got something to say? Need help?

Compatibility

+
=
Not enough data

1 person says it works.
0 people say it's broken.

100,1,1 100,1,1 100,1,1 100,1,1 100,1,1 100,1,1 100,1,1 100,1,1
100,1,1 100,2,2 100,1,1 100,1,1 100,1,1 100,1,1 100,1,1 100,1,1 100,1,1
100,1,1
100,1,1 100,1,1
100,1,1 100,1,1 100,1,1 100,2,2 100,2,2 100,3,3 100,1,1 100,4,4 100,1,1 100,1,1 100,1,1 100,1,1
100,1,1 100,2,2
100,1,1 100,2,2 100,1,1 100,4,4
100,2,2
100,1,1
83,6,5
100,1,1
100,1,1
100,2,2
100,1,1