tutorial, wordpress

Embed code blocks in WordPress posts by html tags/markdown.


It is common to include code blocks in blog posts, especially when you write tutorials about programming languages, softwares, computer science, etc. Posts with code blocks make it extremely clear to read. A common way to do so is use Markdown language.

Now here is an example of inline code. And below shows an example of code block in Java:

//Comment: this is an example of Java code block.Let us create an integer a and increase its value by 1
int a = 1;
a = a + 1;

Nowadays most blog sites are empowered by WordPress. Therefore, in this post, I am going to show you the simplest ways to embed code blocks in your posts powered by WordPress.

There are two ways to embed code blocks in your wordpress posts:
1. HTML code tags
2. Markdown tools (Markdown is a lightweight markup language with plain text formatting syntax, which allows you to format plain text.)

Html code tag

1. Inline code

Html specifically has an code element <code>.
You can simply put your code between <code> and </code>. As the below example shows, in wordpress post editor, first, MUST choose text editor; second, wrap your code by <code> and </code>. All done.

Then you can preview your post and found your inline code is highlighted properly, as shown in the image below:

2. Code block in post

When you want to put a block of code in your post like the following, you need the combination of <pre> and <code> tags of HTML.

This is an example of code block in your post:

First line of your code.
Second line of your code.
Third line of your code.

<pre> means "Preformatted text". Multiple spaces will render as multiple spaces instead of collapsing into a single space as normally happens in HTML. That's perfect for code, because you'll likely want to use indentation in a block of code.

To display the above code block in your post, you need to edit your post as the following image shows:

Markdown plugins in WordPress

Html <pre> and <code> tags provide very basic code block editing ability, in other words, basically only highlighting codes.

Markdown is another alternative that is more powerful and useful. It is a lightweight markup language with plain text formatting syntax. . Put it simple: you can use markdown to edit plain text with rich format and the text can be converted to HTML automatically.

There are many markdown related plugins in WordPress. Here we introduce two of them:
1. Markdown Quicktags and
2. WP Editor.md (Recommended.)

1. Markdown Quicktags

Markdown QuickTags is a plugin for WordPress which replaces the HTML editor with a Markdown-enabled set of buttons and features. It can edit Markdown for saving, or render the finished Markdown to HTML, if you prefer. You can preview the rendered HTML at any time, and there’s even a full-screen editing mode.

The first image shows the post text editor before Markdown Quicktags plugin is installed, where the buttons are html tags. The second image shows the text editor after the plugin is installed and activated. The buttons are replaced by markdown buttons. (You can simply try to click the buttons and get familiar with the very simple markdown syntax. I will not spend time here explaining the syntax details.)

HTML tags

Markdown quicktags

Below image shows how to install AND activate the plugin, just in case you are not familiar with WordPress plugins.

Then you can edit your post following the syntax as the following image shows and after finishing your editing, click the "Render" button on the bottom right next to "Markdownify" to convert your MD post to HTML.

2. WP Editor.md

WP Editor.MD is a beautiful and practical Markdown document editor that is compatible with WordPress. So after installing and activating WP Editor.md, your post editor is a markdown editor essentially as shown below:

As above image shows: the editor is in two columns; the left one is your input following markdown syntax, and on the right, it lively shows the rendered post of your input. You can have code blocks for different programming languages, such as java, c++ ,etc.

This is a pretty simpe UI such that you almost do not need to pre-learn MD syntax.

The below image shows that you can have different levels of headers, bold your text, insert hyperlinks and images ,etc, which are powered by the plugin WP Editor.md editor.

Leave a Reply

Your email address will not be published. Required fields are marked *