Hello, Bloggers! Welcome to Raghavendra Technic.
In this tutorial, we are going to show you How to Add Syntax Highlighter in Blogger
Most of you somehow will have noticed on many of blogs they have code box with Syntax highlighter and copy button.Syntax highlighter is widely used in WordPress platform. This is a feature of text editors used for programming, scripting, or markup languages. Display text, especially code snippets, in different colors and fonts depending on the category of terms in the content.Today in this tutorial we will learn about What is Syntax highlighter? , its advantages and how to implement it in blogger.Without wasting our time let's move forward.
What is Syntax Highlighter?
Syntax Highlighter is a web-based tool for writing code with syntax highlighting in over 50 languages (HTML, C, C++, Java, JavaScript to Fortran and TeX). This is especially useful for those who write about programming and share sample code as syntax highlighter snippets or entire programs.
Advantages
- You will be able to display code snippets in different colors
- You will be able to separate and display CSS, HTML, Jquery and JavaScript in a different color box.
- Syntax Highlighter is a lightweight, powerful and elegant syntax highlighter
- Creates a clear view of your code and makes it easier than other syntax highlighters to monitor changes during debugging sessions.
- Line numbering makes it easy to identify specific codes.
- Provide a more professional and friendly look.
- It's making easier to copy code script with just one click.
How to Add Syntax Highlighter in Blogger
Important!Before we start adding codes in XML, I will recommend you to take a Backup of your current theme. By chance if any problem occurs, you can restore it later.
Step 1: First of all Login to your Blogger Dashboard.
Step 2: On Blogger Dashboard, click Theme.
Step 3: Click the arrow down icon next to 'customize' button.
Step 4: Click Edit HTML, you will be redirected to editing page.
Before proceeding forward , You need to remove .pre and .code default CSS code. Otherwise , You won't be able use Syntax highlighter.
Step 5: Now search the code ]]></b:skin> and paste the following CSS Codes just above to it.
/* Syntax Highlighter by (T_Mk) */.hljs {display: block;overflow-x: auto;padding: 0.5em;background: #1E1E1E;color: #DCDCDC;font-weight: normal;font-size: 1.15em !important;}
.hljs-keyword, .hljs-literal, .hljs-symbol,
.hljs-name {color: #569CD6;}
.hljs-link {color: #569CD6;text-decoration: underline;}.hljs-built_in,
.hljs-type {color: #4EC9B0;}.hljs-number,
.hljs-class {color: #B8D7A3;} .hljs-string,
.hljs-meta-string {color: #D69D85;} .hljs-regexp,
.hljs-template-tag {color: #9A5334;} .hljs-subst, .hljs-function, .hljs-title, .hljs-params,
.hljs-formula {color: #DCDCDC;} .hljs-comment,
.hljs-quote {color: #57A64A; font-style: italic;}
.hljs-doctag {color: #608B4E;}
.hljs-meta, .hljs-meta-keyword,
.hljs-tag {color: #9B9B9B;}
.hljs-variable, .hljs-template-variable {color: #BD63C5;}
.hljs-attr, .hljs-attribute,
.hljs-builtin-name {color: #9CDCFE;}
.hljs-section {color: gold;}
.hljs-emphasis {font-style: italic;}
.hljs-strong {font-weight: bold;}
.hljs-bullet,.hljs-selector-tag,.hljs-selector-id,.hljs-selector-class,.hljs-selector-attr,
.hljs-selector-pseudo {color: #D7BA7D;}
.hljs-addition {background-color: #144212;display: inline-block;width: 100%;}
.hljs-deletion {background-color: #600;display: inline-block;width: 100%;}Step 6: Now search the code </body> and paste the following Codes just above to it.
<script src='https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.5.0/highlight.min.js'/>
<script src='https://unpkg.com/highlightjs-badge/highlightjs-badge.min.js'/>
<script>/*<![CDATA[*/
/* Syntax Highlighter */ setTimeout(function(){for(var e=document.querySelectorAll("pre>code"),o=0;o<e.length;o++)hljs.highlightBlock(e[o]);window.highlightJsBadge({contentSelector:".container",loadDelay:0,copyIconClass:"fa fa-copy",checkIconClass:"fa fa-check text-success",onBeforeTextCopied:function(e,o){return e}})},10); hljs.initHighlightingOnLoad();
/*]]>*/</script>
Create new posts , whenever you have to show your syntax highlighter code with the copy button, paste below mentioned HTML code.
<div class="container" style="margin-top: 20px;">
<pre><code class="hljs" id="code">
<!--[ Enter your Syntax highlighter Codes ]-->
</code></pre>
</div>
Step 7: Now click on Save by clicking this icon
Step 8: That's done!
Conclusion
In this article I have made a tutorial on How to Add Syntax Highlighter in Blogger. I hope you have liked it and Please do share with your friends and follow our blog for more
If you face any problems in code or have any questions please feel free to ask in comments section or join our Telegram Group for discussion.
Our All Posts Are Protected By DMCA. So Don't Try To Copy Our Posts And Reproduction In Any Way Is Strictly Prohibited! Or else Legal Actions Will Be Taken. © Raghavendra Technic | All Rights Reserved
© Copyright:
raghavendratechnic.blogspot.com