5 Syntax Highlighters for Blogger

Syntax highlighter is one of the mostly used widgets in design and development blogs. If you are a programmer or web designer then you must add an attractive syntax highlighter to your blog. In this post we will discuss 5 different and beautiful designs of syntax highlighters for blogger. These syntax highlighters are created by customizing HTML pre tag using CSS.

Design 1: Notebook Style Syntax highlighter

Code:

.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);
}

Design 2:

Code :

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

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

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

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

<pre class="code">Paste the HTML Escape code Here</pre>