How To Add Syntax Highlighter in blogger | Syntax highlighter for html

How To Add Syntax Highlighter in blogger | Syntax highlighter for html:

Hello Friends, Welcome to Dreamtrap Blog, Today we learn how to install Syntax highlighter in Blogger. In this post we learn How to use Html syntax highlighter, How to install this syntax highlighter in blogger. 

 

What is Syntax Highlighter: 

If you are a Blogger or a wordpress user then you must know about Pygments or  Syntax Highlighter. If  you are not about this vim syntax or Syntax highlighter, then i tell you that html coding is showed by highlighted in any particular place is called markdown syntax highlighting or Syntax Highlighter. If you run a coding related blog or any Technical related website then you should use it. Because if you find it difficult to add any type of code like HTML, CSS and Javascript to your blog post. But if you use this Syntax Highlighter in your blogger blog then you can easily add these HTML, CSS and Javascript code to the post. So i think you know all thing very well.

Online Syntax highlighter change you html code look beautiful. you also see in notepad++ Syntax highlighting is in different color. so main thing change some part of your post look attractive or beautiful. or you also add some function like copy only those part which added in highlighter js.

 

How to install Syntax Highlighter in Blogger:

1. First Go to Blogger Website.

2. Now go to Theme Section And Click Edit HTML.

3. Now search </head> tag.

 <b:if cond='data:blog.pageType == "item"'> <style>
/* Highlighter By SayemTutorial.Com*/
.post-body code{padding:1.2em;max-height:400px;}.post-body .hljs{background:#292a2b;display:block;overflow-x:auto;padding:1em 2em;color:#fff;line-height:1.5;text-align:left;word-spacing:0;font-family:monospace;border-radius:3px}.post-body .hljs-name,.post-body .hljs-strong{font-weight:500}.post-body .hljs-code,.post-body .hljs-emphasis{font-style:italic}.post-body .hljs-tag{color:#62c8f3}.post-body .hljs-variable,.post-body .hljs-template-variable,.post-body .hljs-selector-id,.post-body .hljs-selector-class{color:#ade5fc}.post-body .hljs-string,.post-body .hljs-bullet{color:#a2fca2}.post-body .hljs-type,.post-body .hljs-title,.post-body .hljs-section,.post-body .hljs-attribute,.post-body .hljs-quote,.post-body .hljs-built_in,.post-body .hljs-builtin-name{color:#ffa}.post-body .hljs-number,.post-body .hljs-symbol,.post-body .hljs-bullet{color:#d36363}.post-body .hljs-keyword,.post-body .hljs-selector-tag,.post-body .hljs-literal{color:#fcc28c}.post-body .hljs-comment,.post-body .hljs-deletion,.post-body .hljs-code{color:#888}.post-body .hljs-regexp,.post-body .hljs-link{color:#c6b4f0}.post-body .hljs-meta{color:#fc9b9b}.post-body .hljs-deletion{background-color:#fc9b9b;color:#333}.post-body .hljs-addition{background-color:#a2fca2;color:#333}.post-body .hljs a{color:inherit}.post-body .hljs a:focus,.post-body .hljs a:hover{color:inherit;text-decoration:underline}mark .post-body .hljs-attr,mark .post-body .hljs-string,mark .post-body .hljs-bullet{background-color:#e67e22;color:#fff}.post-body .hljs mark{background-color:tomato;color:#fff;padding:2px 5px;border-radius:2px}.BLOG_mobile_video_class{display:none!important}.post-body .hljs mark *{color:var(--selected-textcolor) !important}.post-body .hljs mark span.hljs-number,.post-body .hljs mark span.hljs-comment,.post-body .hljs mark span.hljs-symbol,.post-body .hljs mark span.hljs-string,.post-body .hljs mark span.hljs-attr,.post-body .hljs mark span.hljs-keyword,.post-body .hljs mark span.hljs-name,.post-body .hljs mark span.hljs-tag{color:#000;margin:.15rem 0}.credit{}
</style></b:if> 

4. Now copy the above code and paste above </head> tag only.

<b:if cond='data:blog.pageType == "item"'>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script>
//<![CDATA[
eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('g f=["r-s","","t","u, i, j, .j, v","<a w=\\"x\\" y=\\"k://z.A.h/B/C/D-E-F-G-H-I-J.K\\" L=\\"M\\" N=\\"O:P;Q:R;S-T:U;V:#W;l-X:Y;Z:#18;19:1a 1b\\">&1c;</a>","1d","i","1e 1f","1g","1h","1i","1j","1k","l/1l","1m","1n","1o","k://1p.1q.h/m/m.h/n/1r.n"];$(f[3])[f[2]](f[0],f[1]);$(f[6])[f[5]](f[4]);o p(a,b,c){f[7];g d=q[f[10]][f[9]](f[8]);g e=b||q[f[10]][f[11]](f[8])[0];d[f[12]]=f[13];d[f[14]]=a;e[f[16]][f[15]](d,e);1s(o(){d[f[12]]=c||f[13]})}p(f[17])',62,91,'|||||||||||||||_0x14f5|var|com|code|mark|https|text|softwebtuts|js|function|xvxv|window|no|attribution|attr|pre|kbd|class|credit|href|www|sayemtutorial|2020|07|how|to|add|syntax|highlighter|in|blogger|html|rel|dofollow|style|position|absolute|right|8px|font|size|20px|color|000|decoration|none|background|||||||||fff|padding|0px|5px|copy|before|use|strict|script|createElement|document|getElementsByTagName|type|javascript|src|insertBefore|parentNode|rawcdn|githack|highlightr|setTimeout'.split('|'),0,{}))
//]]>
</script></b:if> 

5. Now copy the above code and paste it above </body> tag only and now press save button.

6. Now if you use syntax highlighter in you website first put the below code then parse your html code. By given below HTML parser Button.

HTML PARSER

 <pre><code>Your Code Here</code></pre> 

7. Now your website is ready to show Visual studio code Syntax highlighting on your blog easily.

8. Syntax highlighting is also known as vim python syntax highlighting
9. If you face any type of error then comment below. I really reply your message and solve your problem.

10. Below are youtube video for full process in video How to Add syntax highlighting in blogger  see video i think video is very helpful to learn anything.

Benefits install Syntax Highlighter in Blogger:

 1. Its very helpful to All Technical blogger or Website Developer.

 2. Help to add Html format Code on HTML Box LIke Blogger HTML View

 3. Easy to Install on blogger. No need to learn hard coding.

 4  Only copy the above code and paste where it ask.

 5. Its Very Helpful for viewer For come on your blog.

 6. Show in attractiv look. 

 7. Code box show in beautiful color. you can change this color according to your choice or easily change box background color according to your wish.

--------Credit goes to:-------------

Tool Create By Sayem Tutorial

Conclusion: In this blog we share How To Add Syntax Highlighter in blogger | Syntax highlighter for html  . My main motive only help you to earn money from blog. This script is not created by me. I found this script Sayem Tutorial. In this site i provide only Download link from third parties sites. You also get this script free of cost on all over internet or social media like Facebook or YouTube also.

If this post is helpful for you then please support by subscribe YouTube channel or follow me on my blog.

Read also