How to add Syntax Highlighter in blogger Website

Hi Dude, Welcome to our Pixabin Blog. let see " how to add syntax highlighter on blogger Website" in this Blog Article. this syntax highlighter script definitely helps to create Syntaxhigher on your Blogger Website.

What is Syntax Highlighter?

Syntax Highlighter is a small Script Showcase box on the Website and this element uniquely displays the coding you display on your website. This allows you to uniquely display scripts such as HTML, JAVASCRIPT, and CSS on your website.

Uses of Syntax Highlighter

• Gives unique look to your script
• Gives professional look to your website
• User can easily understand your content.

How to add Syntax Highlighter in blogger Website

• Go to blogger dashboard and open theme Section
• Next, select Edit HTML option and click Ctrl+F and find ]]></b:skin> tag on your theme
• Next, copy the below CSS Script and paste above on ]]></b:skin> Tag.
• Save your template.

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

• Go to your blogger post section
• Open post editing section and change to edit html mode
• Copy the any html code on below
• Normally paste this script on blog post and enter your script
• Save the your post.

<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>

Final Words

We hope this script is helpful to your blogger website. One more thing please follow my blog on Google News. Thank you for reading.