Pre Tag As Syntax Highlighter

Syntax highlighter are generally used for those blogs, which have scripting tutorials. There are large number of powerful syntax highlighter tool exist over the Internet (Add syntax highlighter with jQuery). Through which you can make your code more readable to the user. It not only highlight the script but also gives the clear idea, how the script was formulated. But the main disadvantage in using them are they effect the page loading time as they uses powerful jQuery script. So in this tutorial I will tell you to add Syntax highlighter without any jQuery script.

How to add Syntax Highlighter to Blog:-

1. Login to Blogger Dashboard.
2. Create a "New Post"
3. Paste the following code in "Edit HTML" .

<pre ,times,serif;="" new="" roman="" style="-moz-border-radius: 0px 25px 0px 25px; white-space:pre-line; 
 background-color: #e3e3e3; height: 50px; padding: 15px 5px 5px;white-space: normal;  width: 100%px;"> 
..Your text Here..</pre>
 

<pre ,times,serif;="" new="" roman="" style="-moz-border-radius: 30px 30px 30px 30px;border-radius: 25px 25px 25px 25px;
 background-color: #e3e3e3; height: 50px; padding: 15px 5px 5px;  white-space: pre-line;-moz-border-radius: 25px 25px 25px 25px;border-radius: 25px 25px 25px 25px;  width: 100%px;">
..Your text Here.. </pre>
 

<pre ,times,serif;="" new="" roman="" style=" border-left: 8px solid #1C86EE;
-moz-border-radius: 25px 25px 25px 25px; white-space: pre-line;  background-color: #e3e3e3; height: 90px; 
padding: 15px 5px 5px; width: 100%px;border-radius: 25px 25px 25px 25px;">
..Your text Here.. </pre>
 

<pre ,times,serif;="" new="" roman="" style=" border-left: 8px solid #1C86EE;
background-color: #e3e3e3; height: 50px; 
padding: 15px 5px 5px; white-space: pre-line;  width: 100%px;" >..Your text Here..</pre>
 

<pre times,serif;="" new="" roman="" style="color: white; border-left: 8px solid #e3e3e3; white-space: pre-line; 
background-color: #262626; height: 50px; 
padding: 15px 5px 5px; width: 100%px;"> ..Your text Here..</pre>
 

<pre ,times,serif;="" new="" roman="" style="color:black; border-left: 8px solid #8B0000;
background-color: #EEE685; height: 50px; 
padding: 15px 5px 5px; white-space: pre-line;  width: 100%px;">..Your text Here.. </pre>
 

<pre style="color:black; border-left: 16px solid #FFFF00; white-space: pre-line; 
background-color:#c5c1aa; height: 50px; 
padding: 15px 5px 5px; width: 100%px;-moz-border-radius:30px; ">..Your text Here.. </pre>
 

Note:

• To change background color simply change #262626 to any desired value.
• Adjust height: 50px to any desired value.
• Replace ..Your Text Here.. with your code that you want to highlight.

How to use these code:-

1. Click Edit / HTML option of the compose tab.
2. Paste any of the above code in it.

Finally I want to say that I give my best to produce this article if any one find difficulty in doing this process then comment are always open for that or if you like the above article then don't forget to subscribe it for latest updates.

If you enjoyed this article then kindly take 5 seconds to share it!!