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 < and > 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.

Posted by Carl in Basic html/css at 14:03 Comments (0)

Defined tags for this entry: blogger

, blogging

, css

, html

, serendipity

, templates

Comments

No comments

Add Comment

Name
Email
Homepage
In reply to
Comment: Standard emoticons like :-) and ;-) are converted to images.
E-Mail addresses will not be displayed and will only be used for E-Mail notifications

To prevent automated Bots from commentspamming, please enter the string you see in the image below in the appropriate input box. Your comment will only be submitted if the strings match. Please ensure that your browser supports and accepts cookies, or your comment cannot be verified correctly.

Enter the string from the spam-prevention image above:
: Remember Information?
Subscribe to this entry
Submitted comments will be subject to moderation before being displayed.

Carl discovers the world

Adding code snippets to your blog entries