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