Sunday, February 5, 2017

Code Formatting - 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 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.
Elliyas Ahmed
Elliyas Ahmed

Hi, I am Elliyas Ahmed, the founder of ComProMath. I try to share what I learn.

Work With Me - SEO Expert, WordPress, Blogger Theme Developer on Fiverr

Comments:

  1. Hi, For some reason I got no line numbers or colored syntax. My code is just inside a rectangular frame. Any ideas why? I put the script fcall at the end of the head tag

    ReplyDelete
    Replies
    1. Hey Alberto Bar-Noy !
      Have you done copy paste the CSS from the link for specific look what I have mentioned on this Post?

      Delete
  2. Hii sir this is not working in my blog. What should I do?

    ReplyDelete
    Replies
    1. 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.

      Delete
    2. Thank you sir now this is working in my blog. I want to know that will it work also in http version?

      Delete
    3. Yes, It will work in both HTTP & HTTPS.

      Delete
    4. No sir, It doesn't work in http version.

      Delete
    5. I had used in this blog. Let me know the URL of your Blog. Just paste the URL here.

      Delete

We appreciate your comment. Shout here.
But don't Spam. We will mark as Spam and it will harm your SEO.