This plugin is code syntax highlighter based on SyntaxHighlighter ver. 3.0.83 and 2.1.382.
This plugin is code syntax highlighter based on Alex Gorbatchev’s SyntaxHighlighter ver. 3.0.83 and 2.1.382.
<pre>
tag and change options of previously-wrapped code.AppleScript, ActionScript3, Bash, ColdFusion, C, C++, C#, CSS, Delphi, Diff, Erlang, Groovy, HTML, Java, Java FX, JavaScript, Pascal, Patch, Perl, PHP, Plain text, PowerShell, Python, Ruby, Ruby on Rails, Sass, SCSS, Shell, SQL, VB, VB NET, XHTML, XML and XSLT
Note: A part of languages are only for SyntaxHighlighter 3.0.
You can also use a bundled plugin to add following languages.
Biferno, Clojure, DOS batch file, F#, LISP, Lua(only for SyntaxHighlighter 3.0), MEL Script, Objective-C, PowerCLI, Processing, R, S, S-PLUS, Tcl, Verilog, Vim Script and YAML
For details, see “sample” directory.
There are many other languages for “SyntaxHighlighter”. But I can’t bundle them because they are not compatible with this plugin license. If you want, try to search.
/wp-content/plugins/
directory.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’.
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.
Usage: Change language and options of previously-markuped code with “SH TinyMCE Button”.
Usage: Indent by tabs.
<pre>
tag, you can not type any tabs.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.
<pre>
tag and escape to HTML entities.Usage: Wrap your code in <pre>
tag without “SH pre” button.
<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
<pre class="brush: php">Your PHP Code</pre>
<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“.
<pre class="brush: xhtml; first-line: 10">Your XHTML Code</pre>
<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.
[sourcecode language="php" gutter="true" firstline="1" highlight="" htmlscript="false"]Your PHP Code[/sourcecode]
[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.
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.
<pre>
tag and format it when submittedYou 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.
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”.
Just 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
<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.
[sourcecode language="php" gutter="true" firstline="1" highlight="" htmlscript="false"]Your PHP Code[/sourcecode]
[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” 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.
<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.
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.
Just 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
<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.
[sourcecode language="php" gutter="true" firstline="1" highlight="" htmlscript="false"]Your PHP Code[/sourcecode]
[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.
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.
<pre>
tag and format it when submittedYou 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.
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”.
Just 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
<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.
[sourcecode language="php" gutter="true" firstline="1" highlight="" htmlscript="false"]Your PHP Code[/sourcecode]
[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.
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.
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.
This is a highlighted code.
This is a highlighted code in comments and buttons added to the form.
This is a highlighted code in bbPress and buttons added to the form
This is setting panel.
This is "SH TinyMCE" button.
This is pop up window at the click of "pre" button.
This is pop up window at the click of "CODE" button.
This is "SH pre" button.
This is pop up window at the click of "SH pre" button.
A. This plugin requires placing <?php wp_head(); ?>
and <?php wp_footer(); ?>
in your theme files. You must place <?php wp_head(); ?>
before the closing head tag in header.php and place <?php wp_footer(); ?>
before the closing body tag in footer.php.
A. This pluguin requires TinyMCE(default Visual editor). If you replaced default Visual editor with other(e.g. CKEditor etc.), Buttons can’t be shown on your Visual editor.
A. You need not to select whole your code. It’s enough to select first line of your code.
A. Old javascript files may be cached. Please clear your browser’s cache or delete cached javascript files.
A. Go to setting panel and enter “notranslate” into “Class name”. When another class has already been defined, add “notranslate” separated by space.
A. The value of textarea contains some character strings that are not allowed to use. Re-enter valid value and save it. It may occur after you upgraded to 1.5.6 or higher.
A. Go to setting panel and try to enable/disable “Load jQuery and jQuery UI” option in “HTML Editor Settings”(or “Comment Editor Settings”) section.
&#xxx;
correctly.</pre>
tag in the code when comment updated.&
, <
, >
, "
, '
😉 correctly.&
, <
, >
, "
, '
😉 correctly.&
, <
, >
, "
, '
😉 correctly.<pre>
tag.<form>
tags in source code of setting panel.<script>
tag.<script>
tag caused HTML validation errors.<pre>
and <textarea>
tags and attribtes to TinyMCE extended_valid_elements.<script>
and <textarea>
tag methods are supported.<pre>
tag in Visual editor.