Syntax highlighting programming code in your blogger posts can help readers better understand the context of your writing. Additionally, installed by default on Blogger, it automatically adds a Copy Button for any highlighted text that readers can click and then paste the code into their own documents. The syntax highlighting editor is also customizable – much like Visual Code syntax highlighter ;-)
Syntax Highlighter is a plugin that most developers and bloggers have been using, but it does not support bloggers. If you are in the same situation, this tutorial can help you get the syntax highlighter function on your blogger templates with lazy loading javascript code in blogger.
So it's time to make a syntax highlighter using the code button and learn how to add syntax highlighting in blogger posts.
Here, We will Learn First what Syntax highlighter is and how it works, and then we will see how we can implement this in blogger.
What is a Syntax highlighter?
How does Syntax Highlighter Works in blogger?
The idea behind Syntax Highlighter is straightforward. This syntax highlighter will take the source code of your blog post (either in HTML or Markdown format) and feed it piece by piece into a compiler. The output of the compiler will be used as if it was your post's text. The plugin identifies keywords in the source code and replaces them with HTML tags, coloured or styled by CSS to create nice-looking highlighted code blocks.
How to Add Syntax Highlighter in blogger with copy button?
.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%;
}
<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>
<div class="container" style="margin-top: 20px;">
<pre><code class="hljs" id="code"> <!--- Enter your Code --> </code></pre>
</div>
Benefits 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 professional and simple-to-understand look in your blogger templates.
- It takes less time to read the code easily.