Do you want to display Code Snippets on your WordPress development tutorial Posts? By default, WordPress filters out the raw code that added to posts, pages or comments. In this article, I’ll explain how to display code snippets on WordPress Posts easily.
Install and Activate the Syntax Highlighter Evolved Plugin:
Syntax Highlighter Evolved Plugin allows you to add the code snippets on your WordPress website easily without losing its formatting. The plugin uses simple shortcodes to display the code snippets on your WordPress website. Especially, if you write the blog on coding, this plugin allows you to add code snippets easily on your WordPress website.
First, you need to install and activate the Syntax Highlighter Evolved Plugin. Check this step by step guide on how to install WordPress plugins on your website.
After installing the syntax highlighter evolved plugin, navigate to Settings > Syntax Highlighter to configure the settings.
The plugin supports some smart features like
- Different color themes to highlight the code
- Display the line numbers
- Display the toolbar
- Copy/paste code
- Code wrapping
- Tab sizes
- Code title
- Starting line number (default is 1)
- Line number padding
- Tab sizes
Review all the settings and make changes as per your needs. Click on save changes in order to store the settings.
How to display code snippets on WordPress Posts?
Syntax Highlighter Evolved Plugin uses simple shortcodes to display the code snippets on your WordPress website. For each programming language, you need to wrap your code snippets in the shortcodes for that language.
Adding code snippets using this plugin is very easy. All you need to do is add the shortcodes depending upon the language.
You can check shortcode parameters in the Syntax Highlighter settings page.
Example: For PHP you need to wrap your code like this.
[php] your code here [/php]
For CSS you need to wrap your code like this.
[css] your code here [/css]
That’s it. You no need to do anything. It will add line numbers properly. if you don’t want the line numbers, you can turn off from plugin settings.
You no need to add shortcodes in HTML mode, you can add in visual mode in the WordPress post editor.
Do let me know, what process you are using to display code snippets on your WordPress website by commenting below.
I hope this article helped you in displaying code snippets on WordPress Posts.
If you’ve any questions, feel free to contact me and share this post with your friends on Facebook, Twitter and Google +.
The post How to display code snippets on WordPress Posts? appeared first on Royal Ecash.
