How To Add Syntax Highlighter in Blogger - FindersAdda : Tutorials of Make Money, Computer or Internet

Monday, 11 December 2017

How To Add Syntax Highlighter in Blogger

Hello Friends! How are you? I hope you will be well and also hope that you found my last post On "How to integrate Disqus Commenting system in blogger" and it will be very helpful for you.Thank you very much for all lovely comment and suggestion. You've inspired me to write another post.


In this article, I am going to share "How To Add Syntax Highlighter in Blogger". It is the very important article which you should know. Do you know that how to add programming code in blogger with syntax highlighter? Let's begin...

How to add syntax highlighter



What is Syntax Highlighter?

Syntax Highlighter is a code which is used to highlight the syntax according to the program. For example, if you write a blog on the program then you have to highlight the programming syntax so that any person can easily understand the programming language syntax like class, function, keyword etc. Syntax Highlighter is just like a code box which highlights the programming syntax.

There are many plugins are available for Wordpress but there are few plugins are available for blogger. I am not using Wordpress but I am using blogger platform and I want to make blogger platform easy by researching.




That's why I have written this post for all blogger which run a blog on the blogger platform. I was searching this code for many days and today I have written this post after researching. So that you can easily understand and add Syntax highlighter to blogger blog.

As we all know that some plugins are available for blogger but there are more plugins available for Wordpress. But don't worry I will research on blogger plugins and also write a post on plugins. So that you can easily run your blog on blogger platform.




How to Add Syntax Highlighter in Blogger?

Now, I am going to discuss how to add syntax highlighter in blogger. If you want to add this then read this post carefully and follow the below step. If you get any problem to add this code then leave a comment. I will solve your problem as soon as possible. I have divided its process into two parts so that you can easily understand.




Step 1:

  • First of all, copy the below code.
<!--code heighlighter start-->
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js" type="text/javascript"/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushAS3.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushBash.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushColdFusion.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCSharp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCpp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushDelphi.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushDiff.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushErlang.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushGroovy.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJavaFX.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPerl.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPlain.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPowerShell.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPython.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushRuby.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushScala.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushVb.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'/>
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeDjango.css' rel='stylesheet' type='text/css'/>
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeEclipse.css' rel='stylesheet' type='text/css'/>
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeEmacs.css' rel='stylesheet' type='text/css'/>
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeFadeToGrey.css' rel='stylesheet' type='text/css'/>
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeMidnight.css' rel='stylesheet' type='text/css'/>
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeRDark.css' rel='stylesheet' type='text/css'/>
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shCore.css' rel='stylesheet' type='text/css'/>
<script language='javascript' type='text/javascript'>
 SyntaxHighlighter.config.bloggerMode = true;
 SyntaxHighlighter.all();
</script>
<!--code heighlighter end-->

  • Next, open your blogger account in the new tab and log in with your Gmail and password.
  • After login, click on the Theme option besides blogger dashboard.
  • Next, click on the Edit HTML option.
  • Next, click the mouse pointer anywhere between the code and press Ctrl + F and find </head> tag.
  • Now, paste the copied code before </head> tag.
  • Now click on the Save Theme option.

Step 2:

  • Next, click on the Posts option besides blogger dashboard.
  • Now, click on the New post option.
  • Now, write your post and also write any mark for searching it in HTML view easily. For example, write "programming syntax" between post where you want to add program.
  • Now, click on the HTML option which resides in Toolbar of Blogger post.
  • Next, press Ctrl + f and search "programming syntax"
  • Now, remove programming syntax and write the code <pre class="brush:java"> program here </pre>
Write your program in HTML view

  • write your program instead of the program here and write your programming language instead of java. Do not remove brush.


Code for all language

The below code is given for all language. you can choose any one language which you want to write a program.

<pre class="brush:java"> Program here </pre>
<pre class="brush:html"> Program here </pre>
<pre class="brush:js"> Program here </pre>
<pre class="brush:css"> Program here </pre>
<pre class="brush:c"> Program here </pre>
<pre class="brush:php"> Program here </pre>
<pre class="brush:cpp"> Program here </pre>
<pre class="brush:perl"> Program here </pre>
<pre class="brush:csharp"> Program here </pre>
<pre class="brush:python"> Program here </pre>
<pre class="brush:Ruby"> Program here </pre>
<pre class="brush:Sql"> Program here </pre>


Some programming syntax Example.


Java program


class First
{
 public static void main(String[] args)
  {
  System.out.println("Hello! Welcome to Findersadda");
  }
}



C program


void main()
{
 printf("Hello");
 getch();
}

HTML program


<html>
<head>
  <title>Findersadda</title>
</head>
<body>
  <h1>
Findersadda</h1>
</body>
</html>

PHP program


<?php
if(isset($_POST['submit']))
{
 $nm = $_POST['name'];
  $email = $_POST['email'];
   $txt = $_POST['message'];
   $to = 'sumitkumarg960@gmail.com';
   $sub = 'from softinfopro';
   $dis = 'You got mail from $nm <br> from email id $email the message is <br> $txt';
   
   mail($to,$sub,$dis);
   header('location: redirect.php');
   
};
?>

CSS


.advertisement
{
 border-top: 1px solid black;
 border-bottom: 1px solid black;
 align-items: center;
 text-align: center;
}

JavaScript

<script>
var x = 5;
var y = 2;
var z = x + y;
document.getElementById("demo").innerHTML = z;
</script>

Note : Before adding JAVA, C, C++, HTML, PHP, JavaScript, JQuery code, convert these code by using any converter (Click here for convert code). and then add code after converting.

Once again I hope you liked this post so much. If you like this post then share with your friends also ask your problem through comment box. I will try to solve your problem as soon as possible...

Thank You So Much

By Sumit Kumar Gupta

About Author

SUMIT KUMAR GUPTA
SUMIT KUMAR GUPTA

Author & Editor

Myself Sumit Kumar Gupta & 21 year's old person. I am a programmer and blogger. I spend much more time on programming and blogging and helps other programmers and bloggers.

0 comments:

Post a Comment

We are eager to see your comments.
Comment Rule :

1. Don't use any link in the comment box. If you have any problem related to link then contact me with the contact form.

2. Don't use the wrong word if you write the wrong word in comment box then it will get spam.