Do you want to display the code on your WordPress site? By default, WordPress filters any raw code added in blog posts, pages, widgets, or comments. In this article, we'll show you how to easily display the code on your WordPress site.
First you need to install and activate the Syntax Highlighter Evolved plugin. For more details, check out our step-by-step guide on how to install a WordPress plugin.
Upon activation, you need to visit Settings »Syntax highlighter to configure the plugin settings.
The plugin's default settings should work for most websites. However, you should review all settings and make changes if necessary.
Each option has a detailed description to explain what it does. Once you're done, simply click the Save Changes button to store your settings.
Syntax Highlighter Evolved uses simple shortcodes to display code. For each programming language you need, put your code in that language's shortcode.
For PHP you would wrap your code like this:
[php]
echo "Hello World";
?>
[/php]
It will appear in your post like this:
For CSS you will wrap your code like this:
[css]
.input title
font-family:"Open Sans", arial, sans-serif;
font size:16px;
colour:#272727;
[/css]
It will appear on your site like this:
.entrada-título font-family: "Open Sans", arial, sans-serif; tamaño de fuente: 16px; color: # 272727;
The syntax highlighter will automatically highlight the code for that particular language. It will also add line numbers and handle tab indentation correctly. Your users will be able to easily copy and paste code snippets from your WordPress site.
Many bloggers don't run a development blog, so they don't need to add sample code snippets to their posts very often. In rare cases, you can add code by encoding the code in HTML entities. I like this:
>? php echo "Hello World"; ?<
The problem with converting code to HTML entities is that it's hard to do manually. You can use online tools like this one to convert code into HTML entities.
By converting PHP, HTML, JavaScript code into HTML entities, you can paste them into your WordPress posts. For additional styling you can wrap the code in y labels.
We hope this article helped you find the best syntax highlighter plugin for WordPress. You may also enjoy our article on 13 plugins and tips to improve your WordPress admin area.
If you enjoyed this article, please subscribe to our WordPress YouTube Channel video tutorials. You can also find us on Twitter and Facebook.
