Introduction
A language structure highlighter makes your code perfect and wonderful as well as expands the meaningfulness. In Blogger there is no default choice to add grammar highlighter for the code. So at whatever point we post any source code on the blogger then we are generally terrified about its intelligibility.
Sentence structure Highlighter is a module that most engineers and bloggers have been utilizing, yet it doesn't uphold bloggers. Assuming you are experiencing the same thing, this instructional exercise can assist you with getting the language structure highlighter work on your blogger layouts with lethargic stacking javascript code in blogger.
So now is the ideal time to make a grammar highlighter utilizing the code button and figure out how to add linguistic structure featuring in blogger posts.
Here, We will Learn First what Syntax highlighter is and the way in which it works, and afterward we will perceive the way we can execute this in blogger.
What is a Syntax highlighter ?
Syntax Highlighter is a web-primarily based totally based device for growing syntax-highlighted code in over 50 languages (HTML, C, C++, Java, JavaScript to Fortran, and TeX). This is especially beneficial for those who write approximately programming and percentage pattern code both as syntax-highlighter snippets or entire programs.
How does Syntax Highlighter Works in blogger?
The concept in the back of Syntax Highlighter is straightforward. This syntax highlighter will take the supply code of your weblog post (both in HTML or Markdown format) and feed it piece with the aid of using the piece right into a compiler. The output of the compiler may be used as though it became your post's text. The plugin identifies key phrases withinside the supply code and replaces them with HTML tags, colored or styled with the aid of using CSS to create nice-searching highlighted code blocks.
What are the uses of syntax Highlighter ?
- Gives nice look to your script
- Gives professional interface to your website
- Users can easily understand your content.
How to Add Syntax Highlighter in blogger with copy button?
Before you start, please remove the .pre and .code default CSS code. If you don't remove it, then you cannot run this code.
Step1: First of all, Visit the Blogger.com dashboard.
Step2: Now click on Theme Section.
Step3: In Theme Section Customize, go to the Edit HTML.
Before going to edit your code kindly take an backup if you done any mistake then you can recover your template
Step4: Search in blogger ]]></b:skin> tag via CTRL + F & Paste this Before The ]]></b:skin>tag.
.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%;
}Step5: Now Search </body> tag via CTRL + F.
Step6: Copy and Paste this below given Javascript Code above the </body> tag.
<script src='https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.5.0/highlight.min.js'/>
<script>hljs.initHighlightingOnLoad();</script>
<script src='https://unpkg.com/highlightjs-badge/highlightjs-badge.min.js'/>
<script>
//<![CDATA[
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);
//]]>
</script>Step7: Now go and Create new posts, and wherever you have to, show your syntax highlighter code with the copy button, paste this below given HTML code & show your syntax highlighter code.
<div class="container" style="margin-top: 20px;"> <pre><code class="hljs" id="code"> <!--- Enter your Code --> </code></pre> </div>
Step8: Click on Save and Preview it
Congratulations guys you have successfully learnt how to add syntax highlighter in blogger with a copy button.
Advantages of Using Syntax Highlighter in blogger.
- Syntax Highlighter creates a clear view of your code and makes monitoring changes during a debug session easier than other syntax highlighters.
- It provides a more clean, professional and easy to understand in your blogger templates.
- It takes less time to read the code easily.
Conclusion:
This is the very best and high-quality approach for including syntax highlighting to blogger. Copy button and paste withinside the HTML itself works fantastic.
