Adding code snippets to your blog entries

Regular visitors to my site will know I often include code snippets in my posts. To refresh your memory on html in your entries be sure to read adding html code to your blog entries

Including html in your posts isn’t something you need to do very often, and certainly can’t damage your blog, so please feel free to experiment. If you’re familiar with HTML basics you would know that the <code> tag is available to be used for code snippets within webpages, and this is equally true of blog posts.

Where it gets interesting is that actually putting any html into your post will automatically be interpreted by your browser. So lets say for example you wanted to include a code snippet that your site visitors could use to link to your website. If you actually place the direct html into your post you’ll notice that your browser makes this into a link, and not into a code snippet.The solution is to use ascii characters instead of the actual character, let me show you what I mean;

This is the code to make a link;

<a href="#">my link</a>

and if I type that directly into my post I get my link, so to actually get it to display as a code snippet I need to place the following into my post instead;

&lt;code&gt;
&lt;a href="#"&gt;my link&lt;/a&gt;
&lt;/code&gt;

The &lt; and &gt; are the ascii codes used to create the < and > seen in my code snippets.

Finally, many templates don’t include the code tag in their stylesheets, which means you are relying on the default style used by your browser, or worse, the site visitors browser. You could override this by creating your own style like the following;

code {
display:block;
font-size:1.2em;
padding:5px 15px;
border:1px solid #ddd;
background-color:#efefef; }

Which would give you a code snippet that looks like this;
code {
display:block;
font-size:1.2em;
padding:5px 15px;
border:1px solid #ddd;
background-color:#efefef; }

Hope this helps you with your own blog or website.

My Comment Form

Comment Policy: Thank you for reading my blog, and I ask if you like an article please click the Facebook like, or leave a comment.

This will help me improve my blog and give me the motivation to write even more articles that you might find interesting, or create more HTML templates, or even offer advice on writing your own blog.

If you leave a comment please stay on topic and contribute to the discussion. Comments that are spammy or not on topic will be deleted without warning.

Oh one more thing, if you want a photo to show with your comment, go get a gravatar.