5 syntax highlighters for blogger Blog/Website

5 syntax highlighters for blogger Blog/Website

Syntax highlighter is one in all the principally used widgets in style and development blogs. If you are a programmer or net designer then you need to add an engaging syntax highlighter to your blog. In this post we tend to will discuss five completely different and lovely styles of syntax highlighters for blogger. These syntax highlighters are created by customizing HTML pre tag using CSS.

Design 1: Notebook Style Syntax highlighter

.code{
font-family:  Verdana,"Times New Roman",Georgia,Serif;
font-size:12px;
color: #333333;
sdoverflow:auto;
width: 500px;
padding: 15px 0px 15px;
padding-left:42px;
white-space: pre-wrap;                
white-space: -moz-pre-wrap !important; 
white-space: -pre-wrap;               
white-space: -o-pre-wrap;             
word-wrap: break-word;              
}
.code, .code:before, .code:after
{
background: url("http://4.bp.blogspot.com/-GlhRdQ2lszc/UY38C5a_AvI/AAAAAAAABt0/vsiGbAmbqrs/s1600/stacked-lined.png") repeat-y scroll 0 0 transparent;
border-radius: 5px 5px 0 0;
border: 1px solid #dcdcdc;
box-shadow: inset 0 0 30px rgba(0,0,0,0.1), 1px 1px 3px rgba(0,0,0,0.2);
}

5 syntax highlighters for blogger Blog/Website

Design 2:

.code {
        background-color: #f3f3f3;  
        color: #333333;
        overflow: auto;
        width: 500px;
        padding: 15px 5px 15px;
        border-left:10px solid #333333;

         }

Design 3: Elegant syntax highlighter

.code {
        background-color: #f8f8f8;  
        color: #3399FF;
        overflow: auto;
        width: 500px;
        padding: 15px 5px 15px;
        color:#666666;
        border:1px solid #dcdcdc;
        box-shadow:1px 1px 4px  #dcdcdc;
       -moz-box-box-shadow:1px 1px 4px  #dcdcdc;
       -web-kit-box-shadow:1px 1px 4px  #dcdcdc;
       -goog-ms-box-shadow:1px 1px 4px  #dcdcdc;
       white-space: pre-wrap;                
       white-space: -moz-pre-wrap !important; 
       white-space: -pre-wrap;                
       white-space: -o-pre-wrap;              
       word-wrap: break-word;               
         }

Design 4: Leaf Style syntax highlighter

.code {
        background-color: #f8f8f8;  
        overflow: auto;
        width: 450px;
        padding: 20px;
        color:green;
        border:2px solid green;
        border-top-right-radius:100px;
        -moz-border-radius-topright:100px;
        -webkit-border-top-right-radius:100px;
        border-bottom-left-radius:100px;
        -moz-border-radius-bottomleft:100px;
        -webkit-border-bottom-left-radius:100px;
           box-shadow:1px 1px 4px  green;
       -moz-box-box-shadow:1px 1px 4px  green
       -web-kit-box-shadow:1px 1px 4px  green;
       -goog-ms-box-shadow:1px 1px 4px  green;
       white-space: pre-wrap;                
       white-space: -moz-pre-wrap !important; 
       white-space: -pre-wrap;                
       white-space: -o-pre-wrap;              
       word-wrap: break-word;               
         }

Design 5: Dark Blue

.code {
  background: #2c539e; /* Old browsers */
background: -moz-linear-gradient(top,  #2c539e 0%, #2c539e 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#2c539e), color-stop(100%,#2c539e)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #2c539e 0%,#2c539e 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #2c539e 0%,#2c539e 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #2c539e 0%,#2c539e 100%); /* IE10+ */
background: linear-gradient(to bottom,  #2c539e 0%,#2c539e 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2c539e', endColorstr='#2c539e',GradientType=0 ); /* IE6-9 */
        overflow: auto;
        width: 450px;
        padding: 20px;
        color:#ffffff;
        border:2px solid #2c539e;
        box-shadow:1px 1px 4px  #2c539e;
       -moz-box-box-shadow:1px 1px 4px  #2c539e;
       -web-kit-box-shadow:1px 1px 4px  #2c539e;
       -goog-ms-box-shadow:1px 1px 4px  #2c539e;
       white-space: pre-wrap;                
       white-space: -moz-pre-wrap !important; 
       white-space: -pre-wrap;                
       white-space: -o-pre-wrap;              
       word-wrap: break-word;               
         }

Add these syntax highlighters to blogger

Step 1: Open your blogger dashboard select your blog.
Step 2: Select Template option and Click on Edit HTML option.
Step 3: In the template code find ]]></b:skin>
Step 4: Paste any one of the highlighter codes just above it.

How to use these syntax highlighters ?

Step 1: Create HTML Escape code from your source code.
Step 2: In the blogger post editor Select HTML version of your post.
Step 3: Now enclose the HTML escape code between pre tags like following syntax. and publish the post.

Paste the HTML Escape code Here