Adding code prettify to Blogger

Cutting the crap short:
You simply need  to add this line of code in your blogger/blogspot HTML template any where inside header tag <head>Add code Here</head> just before </body> tag this will not block page from loading and your site will stay as fast as it was without Syntax Higlighting:
<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js?skin=sunburst"></script>
And then whenever you have post that involves somekind of code that needs to be pretty printed you wrap that code like shown below in HTML editor of your post editor dont forget to replace the Your code here with your actual code:
<pre class="prettyprint linenums">Your code here</pre>
  • If you want more theme options and styling you need to follow this link : Styling 
  • You can have more reference on adding it to your template at : Reference 
  • You can read about alternatives at : Alternatives 
  • You can read more details about the one we are using here at: Details

Why I am using it on TCBIN ?

Cos its simple,serves my purpose,automatically detects my code language and pretty prints it automatically,does not requires me to Change/upload Js and Css files unlike other pretty printing scripts and you hardly have to make changes to your default template,moreover it is being used by https://code.google.com/ and http://stackoverflow.com/ if that makes you happy about its reliability.Its lightweight small download and does not block page from loading while running.

You can see it in action in below example the theme name in use is : Sunburst sons-of-obsidian
class Voila {
public:
// Voila Sons-Of-Obsidian
  static const string VOILA = "Voila";
// will not interfere with embedded tags.
}

Same code without prettyprint look like this:

class Voila {
public:
// Voila Sons-Of-Obsidian
   static const string VOILA = "Voila";
// will not interfere with embedded tags.
}

Update:
Here is how to prettify inline code using code tags Your code here below is an example showing how to use code tags:
<code class="prettyprint">Your code here</code>


Last but not the least you need to add this line of code to prevent long lines of code from overflowing in your blog:
<style type="text/css">
pre.prettyprint {
overflow-x: auto;
}</style>
Learn more about syntax highlighting

Comments

Popular posts from this blog

Enabling fixed Sidebar for blogger Contempo template for screen sizes smaller than 1440px

Adding copy to clipboard button to every google code prettify pre blocks in blogger

Fixed: Wordpress Visual Post editor not working issue