5 Secrets of Blogger (Service) You Don't Know

Recent Posts

Adding Specific Code Syntax Highlighter For Blogger

Adding syntax highlighter to your Blogger, will make more beautiful and specific code with formatting to look at. You can use this method to highlight for HTML, CSS, JavaScript, PHP, PYTHON, C, C++, JAVA, PERL, XML, xHTML and many other typical code by using code-prettify.

Why you will choose code-prettify:

1. code-prettify is built by Google.
2. It is full responsive.
3. Easy to use.
4. Faster loading than other syntax highlighter.
5. Access several themes.

How to add Syntax Highlighter to Blogger:

Adding Specific Code Syntax Highlighter For Blogger

Go to blogger dashboard and then Edit HTML. Add the following script code before <body> tag.
<script src='https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js'/>
After saving your template, you are ready to use syntax highlighter on your blogger. Copy the following code and paste to where you want to show. If you want create post/page then enable Compose to HTML.
<pre class="prettyprint"><code class="language-html">YOUR CODE HRER</code></pre>
Above the code is for html. If you want to use  syntax highlighter for specific style or language, you must replace language-html with language-value. Given the value and attribute for some style or language:

Highlight For value Attribute
HTML html language-html
CSS csh language-
JavaScript js language-js
XML xml language-xml
xHTML xhtml language-xhtml
C c language-c
C++ cpp language-cpp
C# cs language-cs
PHP php Language-php
Python py language-py
Java java language-java
Ruby rb language-rb
Perl perl language-perl

*** Beware before using HTML or JavaScript to be syntax highlighted ! If you direct copy and paste HTML or JavaScript, it won't show. Because Blogger CMS will execute this code as you paste HTML or JavaScript on HTML format. But don't worry. You have to just parse your HTML or JavaScript code to XML and it is easy. You can do it just by paste your code on this tool. For better beautification of any code you should use parsed code.
Background and Color Customization

If you want to customize background and color, it is possible to make easily. What we used before is default theme. You can choose different theme from the below demo. To activate specific theme, you have to copy the stylesheet and put into before </b:skin>

Theme One: Default

For the above theme copy the code before </b:skin>

Code link: https://raw.githubusercontent.com/google/code-prettify/master/src/prettify.css

Theme Two: Desert by Anatoly Techtonik

For the above theme copy the code before </b:skin>

Code link: https://raw.githubusercontent.com/google/code-prettify/master/styles/desert.css

Theme Three: Sunburst by David Leibovic

For the above theme copy the code before </b:skin>

Code Link: https://raw.githubusercontent.com/google/code-prettify/master/styles/sunburst.css

Theme Four: Sons-Of-Obsidian by Alex Ford

For the above theme copy the code before </b:skin>

Code Link: https://raw.githubusercontent.com/google/code-prettify/master/styles/sons-of-obsidian.css

Theme Five: Doxy by Robert Sperberg

For the above theme copy the code before </b:skin>

Code Link: https://raw.githubusercontent.com/google/code-prettify/master/styles/doxy.css

If you get this article helpful or you have in trouble to add Google Code Prettify, please share with me on the comment section. Happy Blogging.