5 Syntax Highlighters For Blogger

Views:

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>