If you want to share code snippets in a website that is powered by WordPress then one of the finest plugin that you can use is titled: Syntax Highlighter Evolved. This is a powerful plugin that allows you to present code snippets within blog posts or pages. The syntax of code snippets will be automatically highlighted and color coded along with the display of line numbers.

To highlight the syntax, the code has to be wrapped within certain tags. Before wrapping the code, you must know the language the code snippet is in. Then highlight using the large or square braces with the language name in between.

Here’s how you the highlighted PHP code looks like

[php]<?php
echo "Hello World";
?>[/php]

Note: A space has been added in [ php] to display the code as it is.

This plugin supports a large number of languages. It basically is an implementation of SyntaxHighlighter Javascript Package by Alex Gorbatchev for WordPress. Hence, the plugin supports all the languages supported by this Javascript Package.

The list of popular languages supported by this plugin :

The source of this list is here. If you can’t find your language, then please check the list in this page as well.

Accessing the Plugin Options

From WordPress administration visit Settings > SyntaxHighlighter to access the options of this plugin.

SyntaxHighlighter Settings

You can choose the Highlighter Version, color theme and whether or not to load all the brushes.

SyntaxHighlighter Settings

Note: You can leave the options as they are.

Defaults

Under Defaults, you can choose additional options like whether or not to display line numbers, toolbar etc.

Default SyntaxHighlighter Settings

For these options as well, the default choices are good enough. Don’t change them unless you know what you’re doing and you have a specific requirement.

Adding Code Snippets in Posts/Pages

Adding code snippets is possible in two ways

Way 1

[ php]<?php echo "Hello World"; ?>[/php]

Way 2

[ code language="php"]<?php echo "Hello World"; ?>[/code]

Notes:

  1. You can replace language with lang.
  2. I have entered a space bar in front so that the code is not highlighted.

Options and Parameters

This plugin offers a range of parameters that allow you to configure the display of syntax. The options from Settings > SyntaxHighlighter can be left intact. Instead, parameters can be used to configure display on an individual basis.

Few Examples of Using Parameters

For unlinking the hyperlinks [ php autolinks=”false”]

[php autolinks=”false”]<?php echo ‘<a href="http://www.wpcraze.com">’; ?>[/php]


For collapsing the code [ php collapse=”true”]

[php collapse=”true”]<?php
$hello = "Hello World";
echo $hello;
?>[/php]


For specifying first line [ php firstline=”10″]

[php firstline=”10″]<?php
$hello = "Hello World";
echo $hello;
?>[/php]


For removing left-side numbering [ php gutter=”false”]

[php gutter=”false”]<?php
$hello = "Hello World";
echo $hello;
?>[/php]


For highlighting line numbers [ php highlight=”2,4-5″]

[php highlight=”2,4-5″]<?php
$hi = "Hi Person";
$hello = "Hello World";
echo $hello;
echo $hi;
?>[/php]


For light mode [ php light=”true”]

[php light=”true”]<?php
$hello = "Hello World";
echo $hello;
?>[/php]


For setting padding of line numbers [ php padlinenumbers=”3″]

[php padlinenumbers=”3″]<?php
$hello = "Hello World";
echo $hello;
?>[/php]


For setting a title for the code [ php title=”My PHP Code”]

[php title=”My PHP Code”]<?php
$hello = "Hello World";
echo $hello;
?>[/php]


Hide the Question Mark for accessing About SyntaxHighlighter part [ php toolbar=”false”]

[php toolbar=”false”]<?php
$hello = "Hello World";
echo $hello;
?>[/php]


You can combine the parameters [ php collapse=”true” title=”My PHP Code” highlight=”2″]

[php collapse=”true” title=”My PHP Code” highlight=”2″]
<?php
$hello = "Hello World";
echo $hello;
?>
[/php]

You can see all the parameters under Shortcode Parameters.

Leave a Reply

Your email address will not be published. Required fields are marked *