WordPress Posting Source Code with Line Number

While WordPress.com doesn’t allow you to use potentially dangerous code on your blog, there is a way to post source code for viewing. We have created a shortcode you can wrap around source code that preserves its formatting and even provides syntax highlighting for certain languages, like so:

html{height:100%;}
body{font-size:11px; margin:0; padding:0; height:100%; }
#container{width:100%; margin:0px auto; height:100%; clear:both}

To accomplish the above, just wrap your code in these tags:

[sourcecode language=”css”]
your code here
[/sourcecode]

The language parameter controls how the code is syntax highlighted. The following languages are supported:

• actionscript3
• bash
• clojure
• coldfusion
• cpp
• csharp
• css
• delphi
• erlang
• fsharp
• diff
• groovy
• html
• javascript
• java
• javafx
• matlab (keywords only)
• objc
• perl
• php
• text
• powershell
• python
• r
• ruby
• scala
• sql
• vb
• xml

Source: http://en.support.wordpress.com

CSS Pseudo Classes

• link – this is a link that has not been used, nor is a mouse pointer hovering over it
• visited – this is a link that has been used before, but has no mouse on it
• hover – this is a link currently has a mouse pointer hovering over it/on it
• active – this is a link that is in the process of being clicked

Example:

a:link {color:#FF0000;}
a:visited {color:#00FF00;}
a:hover {color:#FF00FF;}
a:active {color:#0000FF;}

Note: The states must be defined in the correct order

Scroll area with overflow in CSS

CSS overflow  property :

• overflow: auto – This will create a scrollbar – horizontal, vertical or both only if the content in the block requires it. For practical web development, this is probably the most useful approach to creating a scrollbar.
• overflow: scroll – This will will insert horizontal and vertical scrollbars. They will become active only if the content requires it.
• overflow: visible – This will cause the content of the block to expand outside of it and be visible at the same time.
• overflow: hidden – This forces the block to only show content that fits in the block. Other content will be clipped and not visible. There will be no scrollbars

CSS Example :

#scroll {
height: 200px;
width: 300px;
overflow: auto;
border: 1px solid #666;
background-color: #ccc;
padding: 8px;
}