How to display code in WordPress posts?

If you are running a website or a blog about development, you may want to display code previews for your visitors. With WordPress, the easiest approach is to install a plugin that does it. WPTipster uses a plugin called SyntaxHighlighter Evolved. You can download the plugin from here. You can also find the plugin from WordPress Packakist, if you prefer to install your plugins with composer like we do.

Setting up the plugin

After installation, it is time to run through the basic setup. To open the settings for SyntaxHighlighter, navigate to Settings -> SyntaxHighlighter. From here, you can choose between different colour schemes and set up the basic rules for the preview. You can also include your own CSS classes, if you want.

SyntaxHighlighter Evolved settings page
Wordpress SyntaxHighlighter settings

Adding the code previews

To add code previews on your site, you need to wrap the code around shortcodes. The available shortcodes are displayed on the plugin settings page. For example, to display the following php code, you would have to wrap the code inside the php shortcode.

echo 'Hello visitor';
SyntaxHighlighter Evolved available shortcodes
Syntax highlighter shortcodes

While there are tons of other options to display code on WordPress site, the SyntaxHighlighter Evolved -plugin is an easy way to do the job. If you have other ideas and ways how to display code on WordPress, comment below and share it with others.