How to Post Code Snippets in WordPress

by • On Nov 25, 11 16:58pm, Updated: Jan 28, 12 0:31am • 2582 Views

HTML CodeIf you ever wrote any tutorial post on your WordPress blog, you know how it looks like when your first added the snippet code on your post. At some point may be you got totally frustrated and thought of using some plugins to get your job done. Somehow, you figured it out how to do that & you were happy. But do you know that you do the same thing (more/less) without even using any plugin?

Well, if you are a new WordPress blogger, it might sound bit tricky for you & it goes without any question. Trust me, it’s not hard at all. Today I am going to show you how you can add snippet code & highlight them on your blog post without any plugin. Don’t worry it’s not that hard as it might sound. Are you ready? So, lets get started. Don’t forget to watch my video tutorial.

Step 1: Log in to your WordPress site & go to Appearance -> Editor.
Step 2: From the right hand side of the window click on your style sheet file(style.css) of the theme.
Step 3: Add the following code anywhere on your (style.css) file & save it.

.code {
background-color: #f0f0f0;
border-top: solid 1px #dadada;
border-right: solid 1px #dadada;
border-left: solid 5px #dadada;
border-bottom: solid 1px #dadada;
font-family: courier new, courier;
color: #0000ff;
padding: 5px;
margin: 5px 0 5px 0;
line-height: 180%;
overflow: hidden;
text-align: left;

This code will highlight any text you are going to add within “code” div class.
Step 4: Go to this link or this one, copy & paste any (I tested html, php, css, javascript) code you want to get highlighted on your post. Once you paste the code from that web site, press “convert ad code” button. Copy the new converted code. This web tool will convert all the special characters like “<“,”>”,”{“,”}” etc into browser readable character. You can find a list of such characters from here. Of course you can do that manually as well. But we would be using this tool to make it easier.
Step 5: Go back to your blog post editor & place it in between <div class=”code”></div> tag. Now publish the post.

Wow, you are done! yes, this is it. If you still didn’t get it. I would recommend you to watch my video tutorial. Hope that helps.

You can follow us on Twitter, add on your Google+ circle or Like our Facebook page to get the latest news, updates and reviews.

Posted in: WordPress Tags: , ,