There are times when we want to add a block of source-code in our articles, especially if we’re writing tech-related articles, such as Tutorials, How-To’s etc. There are many different ways to include a piece of language, script, or markup code, the most popular being the use of HTML <PRE> tags, which escapes formatting for the content enclosed in-between. However, I recommend avoiding the use of simple <PRE> tags (especially for blocks of code containing more than a couple of lines) because of the following two reasons:
- The output generated by <PRE> tags is not fancy, and makes it hard for us to interpret and understand the code.
- Sometimes, the special characters or symbols we use as a part of our code, are ignored by <PRE> tags. This usually happens, when the content (including source-code) is parsed by some text-editor (such as TinyMCE, or even WordPress default content-editor).
This is how the output of content inside <PRE> tags look like. It also preserves line-breaks and spaces.
So, you might be wondering if using simple <PRE> tags are not the perfect solution, then what is?
Solution: A WordPress Plugin, called WP SyntaxHighlighter.
WP SyntaxHighligher beautifies your code, by adding color highlighting, line numbers, tab-spacing, and many other small but visually-recognizable features. Personally, I’ve tried many similar plugins in the past, but this plugin satisfied me the most. The level of customization it provides is very high, and the installation & configuration part is extremely easy as well.
The usage of this plugin also requires <PRE> tags, however, a “class” attribute is specified along with it. The content inside the “class” attribute is what makes this plugin so special, and different from just using simple <PRE> tags. It is specified in the form of an associative array (key:value pairs). The “brush” key is the most important one, and it’s value part contains the name of the language which is to be embed, inside the <PRE> tags. The “brush” key is required with each block of code because, it informs the plugin to highlight relevant keywords after parsing the block of code, based on the language specified inside the “class” attribute.
For example, if you want to display some PHP code in your articles, using the WP SyntaxHighlighter plugin, this is how you could do it.
<pre class="brush: php">
<?php echo "Hello World!"; ?>
</pre>
The above piece of code is an example itself of how the final code would look on your end. Quite fancy isn’t it?
There are many different key:value pairs which could be used inside the “class” attribute, and you could learn more about them, from the official documentation page.
To setup WP SyntaxHighlighter plugin on your WordPress site, please proceed with the following steps:
Step 1: Install the Plugin
The first step is to install and activate the WP SyntaxHighlighter plugin from your WordPress back-end. After activation, a new menu-item titled “WP SyntaxHighlighter” would appear under the “Settings” tabs.
Step 2: Configure WP SyntaxHighlighter
After installation, you may want to modify some configuration settings, and customize the way the code should look on the front-end of your site. The settings page could be located at Settings >> WP SyntaxHighlighter, from your WordPress back-end.
There are a lot of customization options available (divided into 9 sections), but we can’t go through all of them here, so we’re going to discuss about a few important ones only.
Basic Settings
Wrap Lines – Sometimes, a line of code is long, and requires more width than the theme layout allows it. Hence, by default, the plugin adds a vertical scrollbar in-case if it encounters a long line of code. However, if you want to eliminate scrollbars (have to agree they look annoying), you could wrap those long lines of code into multiple smaller-width lines. Tick the “Wrap Lines” option, under the “Basic Settings” section to enable this behavior.
Please note that, if you plan to enable the “Wrap Lines” option, you need to make sure that the “Library version” is set to 2.1.382, otherwise, it won’t work.
Toolbars – If you’re using Library version 2.1.382, a toolbar would also appear on the front-end, along with the code, displaying a few quick-access buttons, such as, copy the code to clipboard, view-source, print code, etc. You may disable the toolbar from this page if you don’t want to display it to your site visitors.
Stylesheet – If you plan to add your own CSS rules or modify the already existing ones, in order to customize the appearance of the code-box, you need to tick the checkbox in front of the “Stylesheet” option, and use the text-area below, for CSS addition or modification.
HTML Editor Settings
Support Shortcode – This is the last option which we’re going to discuss here, but it’s also an important one. By enabling this option, you could also use the shortcode “[ sourcecode]” in your WordPress Content editor, as an alternative to using <PRE> tags.
Considering the same PHP example, used above, the source-code could be embed using shortcode as
[sourcecode language='php']
<?php echo "Hello World!"; ?>
[/sourcecode]
Make sure you don’t forget to save changes to the settings page, after making all the necessary modifications.
Step 3: Insert Source-code
After you’ve configured the plugin, the way you want, it’s time to insert blocks of code into your articles. You may use any of the two methods discussed above i.e. either using <PRE> tags with “class” attribute, or using shortcode. There’s another way you could add a code snippet, using the HTML Content editor. After the plugin is activated, two new buttons would be added to your default WordPress Editor.
Note: The buttons may not appear if you’re using a custom HTML Editor, instead of the default one provided by WordPress.
You may use these buttons to add new code, by simply choosing the language from the dropdown, and copy-pasting the code in the box, before hitting the “Insert” button. And, that’s it! You’ve successfully added a new piece of fancy-looking source-code in your WordPress article. Let us know if find this tutorial helpful.