How to Display CSS or HTML Code on Your WordPress Blog

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.

Download the plugin

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.

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…

How to write the shortcode

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.

Tags: , , ,

About Luke

My name is Luke, and I’m the Online Media Manager for a technology company, photographer, husband, and father. You can see a snapshot of some of my work at LukeCoburn.com. I cheer for the Red Sox and am completely in love with my wife and four little princesses.

2 Responses to “How to Display CSS or HTML Code on Your WordPress Blog”

  1. Ben Chapman December 13, 2012 at 9:14 am #

    Thanks for the post! For people who are using hosted WordPress accounts (wordpress.com), follow the instructions here: http://en.support.wordpress.com/code/posting-source-code/

  2. Luke February 6, 2013 at 9:31 am #

    Thanks, Ben! Very useful link for hosted WP users.

Your Thoughts...?

Amazon Sales

I've been selling on Amazon for a while now. I want to teach you how.


See my Top 100 Most Profitable Items