Styling the source code with css

If you want to display code into a beautiful way like this one you need to add a css into your template. The code you display is inside the <pre></pre> tags...  therefor by adding style in the class pre we get awesome results... this is a cool way and visitors feel easy to copy the code and easily recognize the code..
this first style is the current one which i am using on this blog.. in second and third style a yellow pad and a black pad is used.. simple add this code to your design->Template Designer->advanced->add css...add css...

or Edit HTML of your template and paste the code above ]]</b:skin>

Current style:

pre {
     font-size: 12px;
     padding: 20px 0 15px 35px;
     margin: 0;
     background: #ccc;
     border-left: 1px solid #ccc;
     border-bottom: 1px solid #ccc;
     line-height: 20px; /*--Height of each line of code--*/
     background: url(http://3.bp.blogspot.com/-RscyBhrDXU8/TrZBM-T364I/AAAAAAAAEjo/Msg5tjXyFgs/s1600/pre-pad.gif) repeat-y left top; /*--Background of lined paper--*/
     width: 410px;
     overflow: auto; /*--If the Code exceeds the width, a scrolling is available--*/
     overflow-Y: hidden;  /*--Hides vertical scroll created by IE--*/
}

Yellow Pad Background:

pre {
     font-size: 12px;
     padding: 20px 0 15px 35px;
     margin: 0;
     background: #ccc;
     line-height: 20px; /*--Height of each line of code--*/
     background: url(http://3.bp.blogspot.com/-i3A2NMS9ejQ/TrZBNV_RivI/AAAAAAAAEkA/tl5Kp6KLHnk/s1600/pre-yellow.gif) repeat-y left top; /*--Background of lined paper--*/
     width: 410px;
     overflow: auto; /*--If the Code exceeds the width, a scrolling is available--*/
     overflow-Y: hidden;  /*--Hides vertical scroll created by IE--*/
}

Black Pad Background:

pre {
     font-size: 12px;
     padding: 20px 0 15px 35px;
     color: #ffff;
     line-height: 20px; /*--Height of each line of code--*/
     background: url(http://1.bp.blogspot.com/-q2dOtl7q2gI/TrZBNJ2wn-I/AAAAAAAAEjw/21nRnx4lLmQ/s1600/pre-black.gif) repeat-y left top; /*--Background of lined paper--*/
     width: 410px;
     overflow: auto; /*--If the Code exceeds the width, a scrolling is available--*/
     overflow-Y: hidden;  /*--Hides vertical scroll created by IE--*/
}

0 Comments | Post a comment:

Post a Comment

Find us on Facebook