Sunday, February 5, 2017

Code Formatting - Syntax Highlighter For Blogger

Learn How to add Google syntax highlighter code prettify on Blogger and also any Website with cdn. Syntax highlighting is available for HTML,
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.

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

We appreciate your comment. Shout here.