How WordPress Allows Code Snippets to Be Inserted
If you run any sort of Web development blog, whether it's about HTML, JavaScript or CSS -- Cascading Style Sheet --, you're going to need to display an example of the code. WordPress doesn't have a native element for embedding code; instead you can use either the HTML <code> tag or a more advanced plug-in. The <code> tag doesn't always work with Web-based code, whereas a WordPress plug-in is designed to help you display code in an easy-to-read format.
Other People Are Reading
-
The Code Tag
-
The <code> tag in HTML is designed to make bits of code stand out on your page. All formatting is removed from the text, instead rendering it in an unformatted Courier font. What it lacks in flair, it makes up for in simplicity: You put the code between the opening and closing <code> tags. Unfortunately, this doesn't work on code that would otherwise display correctly on the page. For instance, using <code> to show an example of a CSS element works because CSS is used within a stylesheet, not in the body of a page like HTML; the code doesn't mean anything alone on the page. If you try to use <code> to show the HTML for an image, it doesn't work because the image code is valid HTML; instead you get an image where you wanted code. As such, <code> is really best for non-Web code, such as Unix commands and the like.
Google Syntax Highlighter for WordPress
-
Google Syntax Highlighter is a well-styled way to embed code in your page: not only does it color all the syntax differently, it alternates the background color of each line and gives each line a number, making the code easy to read and understand. To display the code highlighter on your page, click the HTML tab in the upper right corner of the post editor. Once you enter HTML mode, you can't leave; going back to "Compose" will strip the textarea. Put your code snippet inside a <textarea> like so:
<textarea name="code" class="html">
<img src="image.jpg" width="150" height="150" alt="Sample Image" />
</textarea>The name attribute tells WordPress that this is sample code. The class specifies what kind of code it is, so that the box uses the right syntax. For instance, if you were displaying the code from some JavaScript, you could use class="js" or class="javascript".
-
Plum Code Box
-
The Plum Code Box plug-in for WordPress is a little more novice friendly. Once installed, Plum Box adds a module to the Post page, directly below the entry editor. From the drop-down menu, you select what kind of code you're using, then enter the code in the provided box. In the right corner of the box, you'll see "Shortcode: [codebox 1]". This means that you insert "[codebox 1]" wherever you want to the box to appear on your page. If you need multiple boxes, select the relevant number from "Number of Boxes." As with Google Syntax Highlighter, different attributes and values within the box are different colors.
WP Code Highlight
-
Possibly the most simple of the code-based plug-ins, WP Code Highlight requires only that you enter the HTML editing mode on your blog post and flank your code snippet with the "<pre>" tag. It doesn't require any extra formatting and distinctions; it just detects your code and colors it accordingly.
-
References
Resources
- Photo Credit Comstock/Comstock/Getty Images
