Have you ever wondered how different websites that you visit will display color-coded HTML and CSS code inside their blog posts? Me too! When I tried, weird things would happen, and it certainly wouldn’t just be color-coded all by itself.
Today, I decided to figure it out. So I waded through the options for displaying code, and…there are a surprising number of options out there. A lot of them seemed to be pretty complicated to get set up, but I found one that is a simple WordPress widget: easy to install and, more importantly, easy to remember how to use. It’s called SyntaxHighlighter Evolved.
How to Download
All that you need to do to download SyntaxHighlighter Evolved is to go to the download page and download the plugin. To download, just click the download button.
How to Install
Installation is easy. Just unzip the file, then upload the unzipped folder to this folder in your WordPress install:
/wp-content/plugins/
Once it’s uploaded, just navigate to your plugins page and activate the plugin.
How to Use
Using the plugin is easy. Just write out your code and enclose it in special short codes depending on what type of code it is. Like this…
CSS Demo
Here’s a live demo of what it looks like to wrap CSS in the CSS shortcode.
.body { font-size: 18px; font-family: Georgia, Arial, serif; }
HTML Demo
And here’s a live demo of what it looks like to wrap HTML in the HTML shortcode.
<p> <em>This</em> is an <strong>example</strong> of a really long line of code. Will it scroll? Yes it will. Here is some <div style="color=#ccc; display:inline;">light grey</div> text </p>
Did this work for you? Do you have a better way of accomplishing this? Let us all know in the comments.
2 Responses to “How to Display CSS or HTML Code on Your WordPress Blog”