How to Author a Code Snippet in WordPress
WordPress is a useful tool for programmers who want to start their own Web development blogs. You can get a WordPress site up in a matter of minutes and begin posting right away, but authoring a code snippet takes some extra work. Like on any Web page, you must remove the HTML brackets to keep the tags in your snippets from rendering as HTML. Adding "<code>" tags gives you mono-spaced text, and using "<pre>" tags keeps your code from displaying in one long line. When working in WordPress, you can also install a plug-in to highlight and line-number your snippets.
Other People Are Reading
Instructions
-
-
1
Go to "Posts" and click "Add New" or select a post to edit by clicking on its title. Click the "HTML" tab to edit your post in HTML mode.
-
2
Write the code snippet out in the post or copy it from another source and paste it in. Replace every instance of "<" with the HTML special character code "<" (without quotes). Use the code ">" to replace every instance of ">" in the snippet. You must do this to keep the browser from attempting to render the code.
-
-
3
Wrap the code snippet in "<code>" tags and wrap the "<code>" tags in "<pre>" tags:
<pre><code><h2>Hello, World! This is an H2 header snippet.</h2></code></pre>
Do not place the "<code>" tags on a new line after "<pre>" because the "<pre>" tags preserve line breaks, indentations and other white space in the code.
-
4
Go to "Plugins" and install a syntax highlighter after publishing the code snippet, if you wish. Small code snippets will look fine without highlighting, but large snippets become difficult to read. Search for "syntax highlighter" and choose a plug-in to install. After installation, follow its directions to edit your snippet to work with the highlighter. Commonly, the plug-in will instruct you to add a special class to the "<pre>" tags:
<pre class="brush: js">
-
1
