Subscribe my YouTube channel: Click to Subscribe!

How to add Syntax Highlighter to a Blogger Website 2022 | Satya Ki Pathshala

How to add Syntax Highlighter to a Blogger Website 2022: As you have already read the title I am going to tell you in this article How to add Syntax H
Please wait 0 seconds...
Scroll Down and click on Go to Link for destination
Congrats! Link is Generated
How to add Syntax Highlighter to a Blogger Website 2022: As you have already read the title I am going to tell you in this article How to add Syntax Highlighter to a Blogger Website. You might are using different Blogger Templates in your Blogger Blog.

How to add Syntax Highlighter to a Blogger Website 2022 | Satya Ki Pathshala

So, you might have noticed that every blogger template comes with different features inbuild in that. If you use Pixy Blogger Templates or Sora Templates. Nowadays they come with a shortcode feature. There you have to use just shortcode to add components like Table of Content, Alert Messages, Code Box, etc.


Today in this article you will learn how you can manually use Syntax Highlighter and give your Blogger Website a professional look. So, don't skip any steps otherwise you might find errors in your Blogger Website.

NOTE:     Before applying all these things, don't forget to "Backup" your theme. (alert-success)

What is a Syntax Highlighter

A syntax highlighter is used to display the code section in the post. For example, if you are writing a post where you are going to provide some scripts or codes, then you can use a syntax highlighter in your blogger post.

In that highlighting area, you can write CSS, HTML, JS, and JavaScript code and the visitors can easily copy those codes from your blogger post. And also they can understand if it is HTML, CSS, or JavaScript code by just viewing the code.

You may also like:

Uses of a Syntax Highlighter

By using Syntax Highlighter, you can do the following:
  • It can give a professional look to your blogger's website.
  • Users can easily understand what they are reading.
  • Users can easily understand the code.

How to add Syntax Highlighter in Blogger Blog

  • Go to blogger dashboard.
  • Click on edit HTML.
  • Find ]]></b:skin> tag by typing Ctrl+F.
  • Paste the below CSS code before the ]]></b:skin> tag and save the theme.

.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=''%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=''%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=''%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=''%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")}

  • Now go to the post that you are writing.
  • Now change the editing option in the HTML view.
  • Now you can copy the codes below as per your choice.

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

  • If you want to show the HTML syntax then copy the HTML Syntax code.
  • If you want to show the CSS syntax then copy the CSS Syntax code.
  • If you want to show the JavaScript syntax then copy the JavaScript Syntax code.
  • If you want to show the JQuey syntax then copy the JQuery Syntax code.
  • After that paste the code you want to show within the particular pre-class section.
  • Now publish the post.

Final Words

So, guys, this is it for now. I hope you like the article How to add Syntax Highlighter to a Blogger Website 2022. Don't forget to share this article with others. Because sharing is caring. It takes time and energy to make content and serve you. So, please do support this blog and my YouTube Channel to grow. When you share my content on social media, it inspires me to do something even better.

So keep sharing. See you in the next post. Till then, take care.

Post a Comment

Please don't enter any spam link in the Comment Section. All comments are reviewed by the Admin!
Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.