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 much other typical codes by using code-prettify. Why you will choose code-prettify:

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

How to add Syntax Highlighter to Blogger:

Adding Specific Code Syntax Highlighter For Blogger

1. Install Google Code Prettify JavaScript:

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'/>

2. Install Syntax Highlighter Theme CSS:

Next, you have to install Syntax Highlighter Theme CSS. I have put several CSS on several themes at the end of the post. Choose one of them. You will get the link for the CSS code. Just visit the link in new tab. Copy the whole CSS and paste just before </head> of your Blogger theme.

3. Use Syntax Highlighter while posting:

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 to create post/page then enable Compose to HTML and put your code to be highlighted according to below.

<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 of 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 directly 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 pasting your code into 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 the default theme. You can choose the 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 </head>

<!--Default theme-->
<style type="text/css">.pln{color:#000}@media screen{.str{color:#080}.kwd{color:#008}.com{color:#800}.typ{color:#606}.lit{color:#066}.clo,.opn,.pun{color:#660}.tag{color:#008}.atn{color:#606}.atv{color:#080}.dec,.var{color:#606}.fun{color:red}}@media print,projection{.kwd,.tag,.typ{font-weight:700}.str{color:#060}.kwd{color:#006}.com{color:#600;font-style:italic}.typ{color:#404}.lit{color:#044}.clo,.opn,.pun{color:#440}.tag{color:#006}.atn{color:#404}.atv{color:#060}}pre.prettyprint{padding:2px;border:1px solid #888}ol.linenums{margin-top:0;margin-bottom:0}li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8{list-style-type:none}li.L1,li.L3,li.L5,li.L7,li.L9{background:#eee}</style>


Theme Two: Desert by Anatoly Techtonik

For the above theme copy the code before </head>

<!--Desert theme-->
<style type="text/css">pre .atn,pre .kwd,pre .tag{font-weight:700}pre.prettyprint{display:block;background-color:#333}pre .nocode{background-color:none;color:#000}pre .str{color:#ffa0a0}pre .kwd{color:khaki}pre .com{color:#87ceeb}pre .typ{color:#98fb98}pre .lit{color:#cd5c5c}pre .pln,pre .pun{color:#fff}pre .tag{color:khaki}pre .atn{color:#bdb76b}pre .atv{color:#ffa0a0}pre .dec{color:#98fb98}ol.linenums{margin-top:0;margin-bottom:0;color:#AEAEAE}li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8{list-style-type:none}@media print{pre.prettyprint{background-color:none}code .str,pre .str{color:#060}code .kwd,pre .kwd{color:#006;font-weight:700}code .com,pre .com{color:#600;font-style:italic}code .typ,pre .typ{color:#404;font-weight:700}code .lit,pre .lit{color:#044}code .pun,pre .pun{color:#440}code .pln,pre .pln{color:#000}code .tag,pre .tag{color:#006;font-weight:700}code .atn,pre .atn{color:#404}code .atv,pre .atv{color:#060}}</style>

Theme Three: Sunburst by David Leibovic

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

<!--SunBurst theme-->
<style type="text/css">code .str,pre .str{color:#65B042}code .kwd,pre .kwd{color:#E28964}code .com,pre .com{color:#AEAEAE;font-style:italic}code .typ,pre .typ{color:#89bdff}code .lit,pre .lit{color:#3387CC}code .pln,code .pun,pre .pln,pre .pun{color:#fff}code .tag,pre .tag{color:#89bdff}code .atn,pre .atn{color:#bdb76b}code .atv,pre .atv{color:#65B042}code .dec,pre .dec{color:#3387CC}code.prettyprint,pre.prettyprint{background-color:#000;border-radius:8px}pre.prettyprint{width:95%;margin:1em auto;padding:1em;white-space:pre-wrap}ol.linenums{margin-top:0;margin-bottom:0;color:#AEAEAE}li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8{list-style-type:none}@media print{code .str,pre .str{color:#060}code .kwd,pre .kwd{color:#006;font-weight:700}code .com,pre .com{color:#600;font-style:italic}code .typ,pre .typ{color:#404;font-weight:700}code .lit,pre .lit{color:#044}code .pun,pre .pun{color:#440}code .pln,pre .pln{color:#000}code .tag,pre .tag{color:#006;font-weight:700}code .atn,pre .atn{color:#404}code .atv,pre .atv{color:#060}}</style>

Theme Four: Sons-Of-Obsidian by Alex Ford

For the above theme copy the code before </head>

<!--Sons of Obsidian theme-->
<style type="text/css">.str{color:#EC7600}.kwd{color:#93C763}.com{color:#66747B}.typ{color:#678CB1}.lit{color:#FACD22}.pln,.pun{color:#F1F2F3}.tag{color:#8AC763}.atn{color:#E0E2E4}.atv{color:#EC7600}.dec{color:purple}pre.prettyprint{border:0 solid #888}ol.linenums{margin-top:0;margin-bottom:0}.prettyprint{background:#000}li.L0,li.L1,li.L2,li.L3,li.L4,li.L5,li.L6,li.L7,li.L8,li.L9{color:#555;list-style-type:decimal}li.L1,li.L3,li.L5,li.L7,li.L9{background:#111}@media print{.kwd,.tag,.typ{font-weight:700}.str{color:#060}.kwd{color:#006}.com{color:#600;font-style:italic}.typ{color:#404}.lit{color:#044}.pun{color:#440}.pln{color:#000}.tag{color:#006}.atn{color:#404}.atv{color:#060}}</style>

Theme Five: Doxy by Robert Sperberg

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

<!--Doxy theme-->
<style type="text/css">a,code.prettyprint a,pre.prettyprint a{text-decoration:none}code .str,pre .str{color:#fec243}code .kwd,pre .kwd{color:#8470FF}code .com,pre .com{color:#32cd32;font-style:italic}code .typ,pre .typ{color:#6ecbcc}code .lit,pre .lit{color:#d06}code .pun,pre .pun{color:#8B8970}code .pln,pre .pln{color:#f0f0f0}code .tag,pre .tag{color:#9c9cff}code .htm,pre .htm{color:plum}code .xsl,pre .xsl{color:#d0a0d0}code .atn,pre .atn{color:#46eeee;font-weight:400}code .atv,pre .atv{color:#EEB4B4}code .dec,pre .dec{color:#3387CC}code.prettyprint,pre.prettyprint{font-family:'Droid Sans Mono','CPMono_v07 Bold','Droid Sans';font-weight:700;font-size:9pt;background-color:#0f0f0f;-moz-border-radius:8px;-webkit-border-radius:8px;-o-border-radius:8px;-ms-border-radius:8px;-khtml-border-radius:8px;border-radius:8px}pre.prettyprint{width:95%;margin:1em auto;padding:1em;white-space:pre-wrap}ol.linenums{margin-top:0;margin-bottom:0;color:#8B8970}li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8{list-style-type:none}@media print{code.prettyprint,pre.prettyprint{background-color:#fff}code .str,pre .str{color:#088}code .kwd,pre .kwd{color:#006;font-weight:700}code .com,pre .com{color:#oc3;font-style:italic}code .typ,pre .typ{color:#404;font-weight:700}code .lit,pre .lit{color:#044}code .pun,pre .pun{color:#440}code .pln,pre .pln{color:#000}code .tag,pre .tag{color:#b66ff7;font-weight:700}code .htm,code .xsl,pre .htm,pre .xsl{color:#606;font-weight:700}code .atn,pre .atn{color:#c71585;font-weight:400}code .atv,pre .atv{color:#088;font-weight:400}}</style>

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


About The Author

Comments

  • Hi Sumit Kumar !
    Probably, you didn't install Syntax Highlighter Theme CSS. Whatever, I have updated this post just now. Try again. If you don't be successful, please paste the URL of your Blog.
    Thanks.

  • Write a Reply or Comment

    Your email address will not be published. Required fields are marked *