Add Syntax Highlighter To Your Blog And Highlight Your Coding

Syntax Highlighter For Blogger Using Google Prettify 

In this tutorial we are going to see how to add syntax highter to blogger. I am using google code prettify to add syntax highlighter to blogger.

It’s very very light in weight i.e almost only 16KB.
It’s very very simple to add to your blogger.

Using this syntax highter you can add following languages to your blogger HMTL5, CSS3,  PHP, SQL, Java, XML, Javascript, jQuery, Angularjs, Knockoutjs, Python, Bash, SQL, Makefiles, Ruby, VB, Awk, Perl, Pascal, Dart, Matlab, Clojure and etc.


Syntax Highlighter Blogger Using Google Prettify

Syntax Highlighter Blogger Using Google Prettify



Adding Google Code Prettifier To Blogger:

Copy following line of Google Prettifier javascript library and add it to your blogger just before </head> tag.

https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js

 
Please refer this below image to add Google code highlighter to blogger.

Adding Google Prettifier to Blogger
Adding Google Prettifier to Blogger

Steps:

1. Click on Template in the left side.
2. Now click on Edit HMTL button, it will open html editor.
3. Now search for
tage and paste code just above the tag.

Add HTML Code in Blogger Post:

If you are going to put html in your blogger post, please follow the this few steps.

Note: Before you are going to add html to blogger post you convert it as xml compatible one. that html to plain text usign this html to xml parser tool  .

If I am going  to add following line html code in blogger post.
 

<footer class=”footer”>

Copy right by
Droidadda

</footer>

Copy your html code and paste in the html to xml parser tool, Now it will automatically parse the html code in to xml compatible code.


HMTL TO XML PARSER TOOL
 Now copy the converted code and paste it in your blogger post, between this
<pre class='prettyprin'>...</pre> tag.  
 
<pre class='prettyprin'>...</pre> 


Now switch to html editor and paste your html between <pre class=’prettyprint’>…..</pre> tag. 
 
Once you are to added successfully your code will like this.
<footer class="footer">

Copy right by Droidadda

</footer>

If you are going to add whatever the code to your blogger post, please convert it to xml compatible one before it added to blogger post using that html to xml parser tool.

Add CSS Code in Blogger Post:

<style>
body{
font-family: Droid Sans;
background-color: #fff;
color: #000;
font-size: 14px;
line-height: 20px;
}
</style>

Add PHP Script in Blogger Post: 

<?php
/*
 * Site : http:www.smarttutorials.net
 * Author :muni
 * 
 */
defineundefined'BASE_PATH','http://localhost/copypaste/');
defineundefined'DB_HOST', 'localhost');
defineundefined'DB_NAME','copypaste');
defineundefined'DB_USER','root');
defineundefined'DB_PASSWORD','');

$con=mysqli_connectundefined DB_HOST, DB_USER, DB_PASSWORD, DB_NAME);
// Check connection
if undefinedmysqli_connect_errnoundefined))
{
echo "Failed to connect to MySQL:".mysqli_connect_errorundefined);
}
?>

Add Javascript or jQuery Script in Blogger Post:


$undefineddocument).onundefined'change','.coverimage',functionundefined){
files = this.files;
size = files[0].size;
//max size 50kb => 50*1000
ifundefined size > 50*1000){
alertundefined'Please upload less than 50kb file');
return false;
}
return true;
});

Add Java code in Blogger Post:

class Muni {
public:
// Muni
static const string NAME = "muni";
}

Add SQL query in Blogger Post:

SELECT * FROM sample;


Please refer it official documentation, if you want to add different themes of syntax highlighter.

via Blogger http://www.droidadda.org/2017/02/add-syntax-highlighter-to-your-blog.html https://mtkdr0id.files.wordpress.com/2017/02/edcfe-syntax-highlighter-blogger-using-google-prettify.png?w=300

Advertisements

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s