How to add Syntax highlighting in Website with using Syntax highlighter or Pretiffy

Syntax highlighters are mostly used by bloggers to shares codes with their readers. Though they have options to opt out from this piece of coding but they prefer it. Why, because if you are serious about your post then you must take your blog appearance in account as well and also the comfort you provide to you readers. It not only makes your blog looks great but it indirectly tells your readers that the author that is you is confident about its codes and his blogging career.

They also provide the clearer visual for the actual blog post and the codes that you have shared with them, and provide way to easily distinguish between the text and the code.

There are Three (A & B) different Highlighter code that made by different developer that could be used for free. I’ll be discussing three basic methods from which you can choose your desired ones. Also in the end of the post I will be comparing the major difference between these three methods so can choose wisely which Syntax Highlighter code is best for you.

The Implementation of the following code is pretty much the same, all you to do is add CSS (for their appearance in A, B & C) and JavaScript (A & B for code recognition).

Method A: 

Pretiffy.

This Syntax Highlighter code is developed by one of the Google employee and is pretty famous among blogger. This is Syntax Highlighter code is been used in this Blog. In this Syntax technique we would be adding both CSS and JavaScript.

1: Add the Following CSS above ]]<b:/skin>

/* Pretty printing styles. Used with prettify.js. */
/* Vim sunburst theme by David Leibovic */
pre .str, code .str { color: #65B042; } /* string  - green */
pre .kwd, code .kwd { color: #E28964; } /* keyword - dark pink */
pre .com, code .com { color: #AEAEAE; font-style: italic; } /* comment - gray */
pre .typ, code .typ { color: #89bdff; } /* type - light blue */
pre .lit, code .lit { color: #3387CC; } /* literal - blue */
pre .pun, code .pun { color: #fff; } /* punctuation - white */
pre .pln, code .pln { color: #fff; } /* plaintext - white */
pre .tag, code .tag { color: #89bdff; } /* html/xml tag    - light blue */
pre .atn, code .atn { color: #bdb76b; } /* html/xml attribute name  - khaki */
pre .atv, code .atv { color: #65B042; } /* html/xml attribute value - green */
pre .dec, code .dec { color: #3387CC; } /* decimal - blue */

pre.prettyprint, code.prettyprint {
        background-color: #000;
        -moz-border-radius: 8px;
        -webkit-border-radius: 8px;
        -o-border-radius: 8px;
        -ms-border-radius: 8px;
        -khtml-border-radius: 8px;
        border-radius: 8px;
}

pre.prettyprint {
        width: 85% !important;
        margin: 1em auto;
        white-space: pre-wrap;
      background:#111;
 font-family:Monaco,Consolas,monospace;
 font-size:15px;
 line-height:1.5;
 -moz-border-radius:8px;
 -webkit-border-radius:8px;
 -o-border-radius:8px;
 -ms-border-radius:8px;
 -khtml-border-radius:8px;
 border-radius:8px;
 width:95%;
 white-space:pre-wrap
}


/* Specify class=linenums on a pre to get line numbering */
ol.linenums { margin-top: 0; margin-bottom: 0; color: #AEAEAE; } /* IE indents via margin-left */
li.L0, li.L1, li.L2, li.L3,
li.L5, li.L6, li.L7, li.L8
{ list-style-type: decimal !important }
/* Alternate shading for lines */
li.L1,li.L3,li.L5,li.L7,li.L9 { background: none repeat scroll 0% 0% rgba(6, 6, 6, 1) !important;}

@media print {
  pre .str, code .str { color: #060; }
  pre .kwd, code .kwd { color: #006; font-weight: bold; }
  pre .com, code .com { color: #600; font-style: italic; }
  pre .typ, code .typ { color: #404; font-weight: bold; }
  pre .lit, code .lit { color: #044; }
  pre .pun, code .pun { color: #440; }
  pre .pln, code .pln { color: #000; }
  pre .tag, code .tag { color: #006; font-weight: bold; }
  pre .atn, code .atn { color: #404; }
  pre .atv, code .atv { color: #060; }
}

pre {
    border-radius: 5px;
    transition: #3A6EA5 200ms linear 0s;
    background: none repeat scroll 0px 0px #EEE;
    font: 12px/1.5 Monaco,"Courier New",Courier,monospace !important;
    white-space: pre-wrap;
    word-wrap: break-word;
}

This above code is bit edited by me it differs from original creator. If you want to try different skin for you Syntax Highlighter code go to this Page.

2: Now add the following JavaScript above

</head> 

<script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js"></script>

Now all you have to add your raw code inside pre tag while posting your article in HTML environment.

<pre class="prettyprint linenums">
Paste parsed your code here
</pre>

Here linenums is used to display line numbers. For more info go to readme page.
NO DEMO since we are using Prettify.

Method B: 

Syntax Highlighter by Alex Gorbatchev.

This is also quite popular among blogger because there are different CSS available for different programming language. And it also provides excellent configuration of the appearance of the code that to be highlighted. This as above highlighting method includes both CSS and JavaScript.
Here in this post we will be using XML code to highlight it.

1: Now add the following codes just above </head >

<link href='http://agorbatchev.typepad.com/pub/sh/3_0_83/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/> 
<link href='http://agorbatchev.typepad.com/pub/sh/3_0_83/styles/shCore.css' rel='stylesheet' type='text/css'/> 
<script src='http://agorbatchev.typepad.com/pub/sh/3_0_83/scripts/shCore.js' type='text/javascript'/>  
<script src='http://agorbatchev.typepad.com/pub/sh/3_0_83/scripts/shBrushXml.js' type='text/javascript'/>

See more themes here and replace with your favorite theme link. 

Here last link is the brush for XML, change this link of this brush by changing its name from shBrushXml.js to shBrushCpp.js in case you want to highlight C++ code in your blog. If you want to highlight others codes then check out this more Brushes for different programming language.

Also note that an XML Brush name/aliase is “xml”. We will use this code to call brush for highlight XML code.

2: Now add the following code above </body>

<script language='javascript'> 
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.all();
</script>

3: Now to applying this to your code place them between the following codes while posting in HTML environment.

<pre class="brush: xml">
Paste Your parsed Code Here
</pre>

Now you can insert numbers of features into it like, highlighting some particular lines and alternate lines. Check more configuration like highlighting here . 
DEMO :

Method C: 

Custom Pre tag
There are people who doesn’t want such complex Highlighting code that may possibly slows their webpage speed, for such user there is way to highlight these code with very less coding. This following CSS is customized for my blog you may change its appearance according to your need if you want to.
Simply add this CSS inside skin tag i.e. just above ]]<b/skin>

pre {
    background: none repeat scroll 0px 0px #EEE;
    font: 12px/1.5 Monaco,"Courier New",Courier,monospace !important;
    white-space: pre-wrap;
    word-wrap: break-word;
background-color: #ececec;
 overflow: auto;
 padding: 18px;
width:85%;
border-left:5px solid #5d5d5d;
margin:0 auto;
}

pre:hover{
background-color:#f8f8f8;
}

@media print {
pre{
background-color:#f8f8f8;
border:none !important;
padding:5px !important;
}
}

Now while posting your article change the editing environment to html and enclose your code within pre tag, i.e. like in following example. 

<pre>
Paste parsed you’re here
</pre>

DEMO :

Note you have to parse the code that you want to highlight so it appears correctly. This is necessary for all the methods that have been discussed here. For parsing the code go to this Page and parse your code. Make sure you Bookmarks this page for future use and references.

Our recommendation : Prettify, its Does its work without any Glitches and without slowing down the webpages. So what do you think about this post do you find it helpful, if you what any help regarding this blog post or have any suggestion, drop your comments below.

Share on Google Plus