How to Display Code in WordPress

This video will show you how to display code in a WordPress post/page with or without a plugin.

What's in this video:

Method 1 - Display Code Using The Default Editor in WordPress:

This method is recommended for beginners and users who don’t need to display code very often.

Simply edit the blog post or page where you want to display the code. On the post edit screen, add a new code block to your post.

You can now enter the code snippet in the text area of the block. After that, you can save your blog post and preview it to see the code block in action.

Depending on your WordPress theme, the code block may look different on your website.

Method 2 - Display Code in WordPress Using a Plugin

For this method, we will be using a WordPress plugin to display code in your blog posts. This method is recommended for users who often display code in their articles.

It gives you the following advantages over the default code block:

a) It allows you to easily display any code in any programming language
b) It displays the code with syntax highlighting and line numbers
c) Your users can easily study the code and copy it

First, you need to install and activate the SyntaxHighlighter Evolved plugin.

Upon activation, you can go ahead and edit the blog post where you want to display the code. On the post edit screen, add the "SyntaxHighlighter Code" block to your post.

You will now see a new code block in the post editor where you can enter your code. After adding the code, you need to select the block settings from the right column.

First, you need to select the language for your code. After that, you can turn off line numbers, provide first line number, highlight any line you want, and turn off the feature to make links clickable.

Once you are done, save your post and click on the preview button to see it in action.

The plugin comes with a number of color schemes and themes. To change the color theme, you need to visit Settings » SyntaxHighlighter page.

From the settings page, you can select a color theme and change SyntaxHighlighter settings. You can save your settings to see a preview of the code block at the bottom of the page.

Check us out on Facebook:

Follow us on Twitter:

Check out our website for more WordPress tutorials:

#DisplayCode
#CodeSnippet
#WordPress