Awesome syntax highlighting with Prism! comment
31.12.14
  I was taking a look at my coding tutorials and realized how quotidian the codes within the <blockquote> tags were. they needed some color, to not only signify how fun they can actually be, but also to differentiate between the different types of languages in coding. One couldn't possibly add CSS styles between codes in a blockquote, as it would not be parsed and, well, you don't want those printed in your blockquote. Hence, I looked up the internet for the help I needed and got what I exactly wanted. In case this was unbeknownst to you, syntax highlighting is something like the example below;

Example:

 body{
      background-image:url(http://i.imgur.com/xN9JYVV.png);
      cursor: url(http://i932.photobucket.com/albums/ad167/DottyDita/1338348137_cursor-small.png), progress !important;
      overflow:auto; 
overflow-y:hidden;
overflow-x: hidden; 
    }
    .header img{
      width:600px;height:auto;
      position:relative;
      top: 50%;
     left: 50%;
      -webkit-transform: translate3d(-50%,-50%,0);
      transform: translate3d(-50%,-50%,0); 
      z-index:99999;border-bottom:16px solid white;
  
}
    .header{
      width:620px;height:auto;background-image:url(http://i.imgur.com/jfRv0Sq.png);
      position:relative;
      top: 50%;top:200px;
     left: 50%;
      -webkit-transform: translate3d(-50%,-50%,0);
      transform: translate3d(-50%,-50%,0); 
      z-index:1;
    }
.title{
      transition: all 0.5s ease;
      font-family: 'Amatic SC', cursive;    
      font-weight:;
      color:rgba(255,255,255,.8);
      width:350px;
      font-size:80px;
      z-index:9999999999;
      position:relative;
      top:100px;
      border: 13px double rgba(255,255,255,.5);
      text-decoration:none;
}
.title:hover{
       color:rgba(255,255,255,.9);
      border: 13px double rgba(255,255,255,.3);
    }
.post-container{   
      height:400px;
      width:620px;
      background-image:url(http://i.imgur.com/jfRv0Sq.png);
      position:relative;
      z-index:9999999999;
      left: 50%;
      margin-top:-30px;
      -webkit-transform: translate3d(-50%,-50%,0);
      transform: translate3d(-50%,-50%,0);
    }
#post-entry{
      background:#ffffff;    
      width:600px; 
      height:350px;
      
      position:relative;
     
      top: 50%;
     left: 50%;
      -webkit-transform: translate3d(-50%,-50%,0);
      transform: translate3d(-50%,-50%,0); 
      z-index:99999999;
      
  line-height: 23px;
  font-size: 16px;font-family:alegreya sans sc;text-align:justify;
      color: #666;padding-top:10px;
    }
    #post-entry-f{
      padding:20px;height:300px;width:550px;
      overflow:auto; 
overflow-y:scroll;
      overflow-x: hidden;background-image:url();
    }
    
    #navis{
      width:520px;
      height:auto;
      border:2px solid transparent;
      position:relative;
       z-index:999999999;
      top: -179px;
     left: 50%;
      -webkit-transform: translate3d(-50%,-50%,0);
      transform: translate3d(-50%,-50%,0); 
      z-index:99999999;
    }
   
    #navis a{
       border-left:solid 3px #fff;border-right:solid 3px #fff;
     border-top:solid 3px #fff;
      width:60px;
      height:auto;
      font-family:alegreya sans sc;
      font-size:15px;
      letter-spacing:2px;
      text-align:center;
      text-decoration:none;
      color:#fff;
      background-image:url(http://i.imgur.com/jfRv0Sq.png);
      border-top-left-radius:5px;
      border-top-right-radius:5px;
      border-bottom:none;
      display:inline-block;
      position:relative;
      margin-right:10px;margin-bottom:15px;
      padding:3px;padding-bottom:10px;
      z-index:99999;
   
    }
    
    #navis .ui-selected , #navis a:hover {  
      box-shadow: 0px 0px 10px 2px rgba(119, 119, 119, 0.7);
-moz-box-shadow: 0px 0px 10px 2px rgba(119, 119, 119, 0.7);
-webkit-box-shadow: 0px 0px 10px 2px rgba(119, 119, 119, 0.7);
    
      
    }
    
    
    a.thingi {
    color: #4db2a3;
    text-decoration:none;
    font-family:"sintony";
    font-size:15px;
    background:url(http://i.imgur.com/Sc5tbfn.gif);
    background-repeat:no-repeat;
    background-size:auto;
    padding-left:20px !important;
    line-height:18px !important;
    margin-left:-30px; 
    text-decoration:none;
}
a.thingi:hover {
    color: #bbb;
    cursor: url('http://media.tumblr.com/tumblr_m2umkkR6T61qfamg6.gif'), auto;
    -webkit-transition:All 0.4s ease;
    -moz-transition:All 0.4s ease;
    background-image:url(http://i.imgur.com/I1K56Ed.gif) !important;
    background-repeat:no-repeat !important;
    background-size:auto !important;
    line-height:18px !important;
    text-decoration:none;
} 
    .linko a{
      color:white;text-decoration:none;
    }
.linko {
    display:inline-block;
    font-family:sintony;
    font-size:12px;
    letter-spacing:1px;
    background:#99c1cf;
    color:#fff;
    width:80px;
    height:auto;
    text-align:center;
    border:none;
    border-radius:5px;
    margin:3px;
    padding:1px;
    transition-duration: 500ms;
    -webkit-transition-duration: 500ms;
    text-decoration:none;
}
.linko:hover {
    color:#fff;
    background:#cecf99;
    text-decoration:none;
}


::-webkit-scrollbar {
    width:10px;
    height:10px;
    width:15px;
    height: 8px;
    margin-left:-2px;
}
::-webkit-scrollbar-track-piece {
    background-color: #ddd;
    border: 5px solid #FFFFFF;
}
::-webkit-scrollbar-thumb:vertical, ::-webkit-scrollbar-thumb:horizontal {
    background-color:#cf9a99;
    border-radius:5px;
    border: 2px solid #fff;
}
::selection {
  background:#ccc; color:white; 
}
::-moz-selection {
  background: #ccc;color:white;
}
    ul{
list-style-type: circle;}

.tr-caption {
font-family:sniglet;font-size:15px;color:#aaa;}
  
    #post-entry-f gp a{
      color:#808080; font-family:sniglet; font-size:15px; text-decoration:none; letter-spacing:1px;
    }

 .main-title{margin-top:10px;text-align:left;font:19px 'alegreya sc'; color: #808080; letter-spacing:1px;  background-color: #fff;margin-bottom: -2px; border-bottom: #ccc 3px double;
}
.main-title:first-letter{
font-family:rochester;padding:3px;
font-size:25px;}
.sec-title{
color:#aaa;} 

.blogger-labels{
margin-top:-10px;padding-bottom:40px;
}
.blogger-labels a{
text-decoration:none;
background-repeat:no-repeat;
padding-left:5px;
padding-right:5px;
padding-top:3px;
padding-bottom:3px;
border-radius:5px;
margin-right:3px;
background:rgba(239,239,239,.7);
color:#aaa;
}
.blogger-labels a:hover{
color:#fff;
background:#ddd;
}


a:hover {
cursor: url('http://media.tumblr.com/tumblr_m2umkkR6T61qfamg6.gif'), auto; }

blockquote {
color: #808080;
font-family: consolas;
font-size: 9pt;
line-height: 13pt;
letter-spacing: 2px;
padding-left: 5px;
padding-top: 0px;
padding-bottom: 0px;
padding-right: 0px;
text-align: left;
background: #ffffff;
background: url('http://d2wss9bif9q3el.cloudfront.net/292/580/images/02.png');
background-repeat: no-repeat;
background-position: right;
width: 350px;
height: auto;
max-height:150px;
border: 2px inset #ddd;
overflow:auto;
overflow-x: hidden;
overflow-y: scroll;

}
 

* don't you just love how meta it looks?

sites like Codrops, Codepen, Github and similar sites alike the aforementioned uses what is called 'Syntax Highlighting' in their respective sites. If you are still not convinced to implement this wonderful thing in your site, you might want to head to Prism and Rainbow to take a look at the demos they have.

Anyway, like always, I'm more than excited to share/tutor on something I've newly learnt.

Both Prism and Rainbow were equally appealing to me, but because of the versatility of the demos in Prism, I almost immediately opted for Prism. The theme I chose was 'Coy'.

After having picked the theme of my choice, I clicked the 'Download' button on the upper-right corner, customized my download and downloaded the JS and the CSS file.

Consequently, I headed on to Dropbox.com to upload the aforementioned files. (In case this was unbeknownst to you, Dropbox is a great place to host files, like really great).



Once uploaded, hover your mouse on one of the uploaded css file and click on the 'Share' button. 



Copy the highlighted link, paste it in a new tab and replace the 'www' with 'dl' and the 'dropbox' with 'dropboxusercontent'.



Copy the following code and paste it under the tag <head>
<link href="themes/prism.css" rel="stylesheet" />

..to be continued...