Just another Blog

My Technical, Professional and at times Personal Blog

Showing posts with label Format. Show all posts

Highlight code with JavaScript Pretty Print

I use Windows live to write my blog posts. There are a few plugins with Windows live that can help with formatting the code. I tried a couple of these plugins but it never seemed to work for me. I’m not sure why. It seems Prettyprint is a popular JavaScript Code Prettifier. So, I decided to give it a spin. Here are a few themes available, but I’m sure with CSS you can create your own custom theme.


image


Prettyprint Setup is fairly easy:


image


Here is an example:

 $(document).ready(function(){
    alert('I am ready!');
    var oTable = $('#example').dataTable(
    {        
        "bPaginate": true,        
        "bLengthChange": true,        
        "bFilter": true,        
        "bSort": true,        
        "bInfo": true,        
        "bAutoWidth": true,
        "bJQueryUI": true,        
        "sPaginationType": "full_numbers",
        "sSearch": "Search all columns:",
        "aoColumnDefs": [            
                        { "sWidth": "10%", "aTargets": [ -1 ] }        
                        ],
        "aaSorting": [ [0,'asc'], [1,'asc'] ]        
        }
    );
    
                    $("tfoot input").keyup( function () {
                    /* Filter on the column (the index) of this element */
                    oTable.fnFilter( this.value, $("tfoot input").index(this) );
                } );
                              
                
                /*
                 * Support functions to provide a little bit of 'user friendlyness' to the textboxes in 
                 * the footer
                 */
                $("tfoot input").each( function (i) {
                    asInitVals[i] = this.value;
                } );
                
                $("tfoot input").focus( function () {
                    if ( this.className == "search_init" )
                    {
                        this.className = "";
                        this.value = "";
                    }
                } );
                
                $("tfoot input").blur( function (i) {
                    if ( this.value == "" )
                    {
                        this.className = "search_init";
                        this.value = asInitVals[$("tfoot input").index(this)];
                    }
                } );

});
 

Code with NO Pretty Print

$(document).ready(function(){ alert('I am ready!'); var oTable = $('#example').dataTable( { "bPaginate": true, "bLengthChange": true, "bFilter": true, "bSort": true, "bInfo": true, "bAutoWidth": true, "bJQueryUI": true, "sPaginationType": "full_numbers", "sSearch": "Search all columns:", "aoColumnDefs": [ { "sWidth": "10%", "aTargets": [ -1 ] } ], "aaSorting": [ [0,'asc'], [1,'asc'] ] } ); $("tfoot input").keyup( function () { /* Filter on the column (the index) of this element */ oTable.fnFilter( this.value, $("tfoot input").index(this) ); } ); /* * Support functions to provide a little bit of 'user friendlyness' to the textboxes in * the footer */ $("tfoot input").each( function (i) { asInitVals[i] = this.value; } ); $("tfoot input").focus( function () { if ( this.className == "search_init" ) { this.className = ""; this.value = ""; } } ); $("tfoot input").blur( function (i) { if ( this.value == "" ) { this.className = "search_init"; this.value = asInitVals[$("tfoot input").index(this)]; } } ); });


Download here


The CSS can be easily added to the blogger template. But before you proceed, backup your template!


image


image


Click Proceed and check Expand Widget Templates


Search for “]]></b:skin>” and add the CSS before this tag


image


I also added the JavaScript references to blogger template under the header section.


image


Add OnLoad method in the body tag:
image

Google+ Followers