Adding code prettify to Blogger
Cutting the crap short:
You simply need to add this line of code in your blogger/blogspot HTML templateany 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:
You simply need to add this line of code in your blogger/blogspot HTML template
New url:<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js?skin=sunburst"></script>
<script src="https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js?lang=css&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 :
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
Last but not the least you need to add this line of code to prevent long lines of code from overflowing in your blog:
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
Post a Comment
Note:Please be gentle while commenting and avoid spamming as comment are anyways moderated thank you.