Creating A Syntax Highlighter On Blogger

Table of Contents

Syntax highlighter is a text editor feature that is used to highlight various types of programming languages, scripts or markup, such as HTML, CSS, JavaScripts and other.

Snytax highlight it a feature in the text editor to highligth code writing and fungtions to make it easier to read and understand.

Creating a syntax highlighter for posts that display coding such as HTML, CSS, JavaScript and so on is very important. When displaying this highlighter in posts.

I will give a tutorial on making a syntax highlighter with the code copy fungtions. Just double click to copy all the code in the syntax highlighter.

Benefit Of Syntax Highlighter

Using a syntax highlighter has several benefits for improving a appearance quality of blogs posts. The following are the benefits of syntax highlighter, including:

1. Improve the readability of HTML, CSS, JavaScript and other code so that it is easy to understand.

2. Gives a professional impression to the appearance of blog article posts.

3. Helps readers to see the structure and logic behind the implementation of the code.

Using this highlighter is very helpful for developing the appearance of blogger posts, and is suitable for content with tutorial topics that require displaying source code.

Make a Syntax Highlighter

Way to install a syntax highlighter on blogger using the tag atribute with <pre> <code>. Here are the steps to create the syntax highlighter.

Please copy the CSS code below and paste it just above the code </style>.

:root {
  --bs-body-color: #444;
  --synBg: #f6f6f6;
  --bd-color: #cdcdcd;
}
code,pre{font-size:13px}
pre,pre code{display:block}
pre,pre::before{color:var(--bs-body-color)}
pre{background-color:var(--synBg);direction:ltr;position:relative;border-radius:3px;margin:1.7em auto;border:1px solid var(--bd-color);padding:20px;-moz-tab-size:2;tab-size:2;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;overflow:auto;direction:ltr;white-space:pre}
code{display:inline;padding:5px;border-radius:3px;line-height:inherit;color:var(--bs-body-color);background-color:var(--synBg);}
pre code{background:0 0;padding:.5em;overflow-x:auto}
pre::before{content:'</>';display:flex;justify-content:flex-end;position:absolute;right:0;top:0;width:100%;background:transparent;font-size:10px;padding:0 10px;z-index:2;line-height:30px}
pre.html::before{content:'.html'}
pre.css::before{content:'.css'}
pre.js::before{content:'.js'}
pre.css:hover::before,pre.html:hover::before,pre.js:hover::before,pre:hover::before{content:'Double click to copy'}
.copyCode span{position:fixed;left:24px;bottom:-70px;display:inline-flex;align-items:center;text-align:center;justify-content:center;margin-bottom:20px;z-index:99981;background-color:var(--synBg);color:var(--bs-body-color);font-size:14px;font-family:inherit;border-radius:3px;padding:13px 24px;box-shadow:0 5px 35px rgba(149,157,165,.3);opacity:0;transition:.1s;animation:2s forwards slideinwards;-webkit-animation:2s forwards slideinwards}
@media screen and (max-width:500px){.copyCode span{margin-bottom:20px;left:20px;right:20px;font-size:13px}}
@keyframes slideinwards{0%{opacity:0}20%,50%,80%{opacity:1;bottom:0}100%{opacity:0;bottom:-70px;visibility:hidden}}
@-webkit-keyframes slideinwards{0%{opacity:0}20%,50%,80%{opacity:1;bottom:0}100%{opacity:0;bottom:-70px;visibility:hidden}}

Next, activate the copy code fungtions by double clicking to copy all the code in the syntax highlighter. Please copy javascript code below, and paste it above the code </body>

<script>/*<![CDATA[*/ for(var preClick=document.getElementsByTagName("pre"),i=0;i<preClick.length;i++)preClick[i].addEventListener("dblclick",function(){var e=getSelection(),o=document.createRange();o.selectNodeContents(this),e.removeAllRanges(),e.addRange(o),document.execCommand("copy"),e.removeAllRanges(),document.querySelector("#cpCode").innerHTML="<span><i class='clipboard'></i>Copied to clipboard!</span>"},!1); /*]]>*/</script>
<div class='copyCode' id='cpCode'/>

Next, create a blogger posts using the following caller tag.

<pre class="html/css/js"><code>code here</code></pre>

You can adjust the color yourself according to you wishes on css:root.

Creating a syntax highlighter is very useful for placing source code for blogger posts. Apart from that, by adding a copy function so that readers can easily apply it directly from the tutorial provided.