How To Add Syntax Highlighter in Blogger Website.

Syntax Highlighter is the main features to show the Coding Part of any programming language like HTML, CSS, JS etc. So I will share blogger syntax highlighting features code in this post.


The use of this feature is indeed commonly found on sites or blogs that discuss a lot about blogging tutorials to put codes in their posts. The name of this feature is really cool so it's not surprising that some of us might just know that it's called Syntax highlighter. 

Maybe you are wondering why my blog doesn't use this feature even though this blog also sometimes discusses blogging tutorials that contain html codes?. Yes, I'm not really interested in installing it so far, so I still use the Prism Syntax Highlighter With Copy Button for placing these codes. 

Even so, I am interested in learning how to install this Syntax highlighter and want to share a tutorial on how to install it in this article. Syntax Highlighter is a special feature that functions for the placement of certain programming codes so that it is easier for visitors to read or study them. With this feature, visitors will find it easier when they want to copy codes such as CSS, HTML, or Javascript because it looks different from the usual written text in posts. 


Usually this feature also makes the code colorful so that it looks more attractive. There are many tuts on How to Implement Syntax Highlighter in Blogger Articles. One of them is like the tutorial below. If you want to follow this tutorial, it will look like the following screenshot:

Tips
It should be noted that if you have previously installed Syntax Highlinter or have already coded CSS .post-body pre and .post-body pre code, please delete them first so they don't clash.

Follow These Steps To Add Syntax Highlighter in Blogger Website —

Warning!
Before starting this tutorial, make sure you have to back up your blogger template first.

How To Add Syntax Highlighter Css Code in Blogger Website —

  1. Go to your Blogger Theme and click Customize to access Blogger Theme Designer 
  2. Then choose Advanced > Add CSS 
  3. Copy the following code and paste and click Apply to Blog
css

.post-body pre,#comments pre,#comments .comment-content i{background-color:#25294a;border-left:5px solid #1a73e8;margin:.5em auto;white-space:pre;word-wrap:break-word;overflow:auto;position:relative;-moz-tab-size:2;-o-tab-size:2;tab-size:2;word-break:normal;user-select:text;-webkit-user-select:text;-khtml-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}.post-body pre code,#comments pre code{color:#bfbf90;font-size:12px;max-height:250px;line-height:1.5em;display:block;background:0;border:0;padding:10px 15px;font-family:'source code pro',menlo,consolas,monaco,monospace;white-space:pre-wrap;overflow:auto;user-select:text;-webkit-user-select:text;-khtml-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text}.post-body pre mark,.post-body code mark,.post-body pre code mark{background-color:#95b2f6;color:#292e34;margin:0;padding:0}.post-body pre.html:before,.post-body pre.css:before,.post-body pre.javascript:before,.post-body pre.jquery:before{background-color:#78b2ff;font:500 14px "Google Sans",-apple-system,BlinkMacSystemFont,"Segoe UI","Oxygen","Roboto","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",Arial,sans-serif;color:#333;display:block;padding:10px 35px;font-size:16px;background-repeat:no-repeat;background-size:20px 20px;background-position-x:7px;background-position-y:center}.post-body pre.html:before{content:"HTML";background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12,17.56L16.07,16.43L16.62,10.33H9.38L9.2,8.3H16.8L17,6.31H7L7.56,12.32H14.45L14.22,14.9L12,15.5L9.78,14.9L9.64,13.24H7.64L7.93,16.43L12,17.56M4.07,3H19.93L18.5,19.2L12,21L5.5,19.2L4.07,3Z' fill='%231d2129'/%3E%3C/svg%3E")}.post-body pre.css:before{content:"CSS";background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5,3L4.35,6.34H17.94L17.5,8.5H3.92L3.26,11.83H16.85L16.09,15.64L10.61,17.45L5.86,15.64L6.19,14H2.85L2.06,18L9.91,21L18.96,18L20.16,11.97L20.4,10.76L21.94,3H5Z' fill='%231d2129'/%3E%3C/svg%3E")}.post-body pre.javascript:before{content:"Javascript";background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3,3H21V21H3V3M7.73,18.04C8.13,18.89 8.92,19.59 10.27,19.59C11.77,19.59 12.8,18.79 12.8,17.04V11.26H11.1V17C11.1,17.86 10.75,18.08 10.2,18.08C9.62,18.08 9.38,17.68 9.11,17.21L7.73,18.04M13.71,17.86C14.21,18.84 15.22,19.59 16.8,19.59C18.4,19.59 19.6,18.76 19.6,17.23C19.6,15.82 18.79,15.19 17.35,14.57L16.93,14.39C16.2,14.08 15.89,13.87 15.89,13.37C15.89,12.96 16.2,12.64 16.7,12.64C17.18,12.64 17.5,12.85 17.79,13.37L19.1,12.5C18.55,11.54 17.77,11.17 16.7,11.17C15.19,11.17 14.22,12.13 14.22,13.4C14.22,14.78 15.03,15.43 16.25,15.95L16.67,16.13C17.45,16.47 17.91,16.68 17.91,17.26C17.91,17.74 17.46,18.09 16.76,18.09C15.93,18.09 15.45,17.66 15.09,17.06L13.71,17.86Z' fill='%231d2129'/%3E%3C/svg%3E")}.post-body pre.jquery:before{content:"jQuery";background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M22.88,10.41C20.77,12.18 17.61,11.9 15.84,9.79C14.06,7.67 14.34,4.5 16.45,2.75L16.96,2.37C15.27,4.19 15.16,7.03 16.8,9C18.43,10.94 21.25,11.32 23.34,9.97L22.88,10.41M21.1,14.5C17.93,17.17 13.2,16.76 10.54,13.58C7.87,10.41 8.29,5.68 11.46,3L12.38,2.36C9.96,5.09 9.84,9.26 12.26,12.14C14.68,15 18.8,15.63 21.91,13.72L21.1,14.5M19.97,19.38C15.53,23.11 8.9,22.53 5.17,18.08C1.45,13.64 2.03,7 6.47,3.29L7.58,2.5C4.07,6.3 3.85,12.23 7.28,16.32C10.71,20.4 16.59,21.22 20.96,18.43L19.97,19.38Z' fill='%231d2129'/%3E%3C/svg%3E")}

How to use Syntax Highlighter on Blogger Website —

When you want to use this feature for your post, then please enter edit post and open it using html mode. Then use the following format for how to write it:

html
<pre class="html"><code> <!-- Enter all HTML code here --> </code></pre> <pre class="css"><code> <!-- Enter all CSS code here --> </code></pre> <pre class="javascript"><code> <!-- Enter all JAVASCRIPT code here --> </code></pre> <pre class="jquery"><code> <!-- Enter all JQUERY code here --> </code></pre>

Please replace the sentence marked in red above with the Css, Html, Javascript or Jquery code that you want to add. Don't forget to parse the codes first before adding them.

Conclusion —

After the post is complete and the code has been added to the Syntax Highlighter, please publish the post and you can see the results.