How To Use Syntax Highlighter in Blogger

Add Syntax Highlighter in Blogger Post

नमस्कार दोस्तो ! स्वागत है आपका CjFlare ब्लॉग में। तो  हमने इस CJ Flare Blog में एक नया कैटेगरी बनाया है जिसका नाम है Widgets जी हाँ आपने एकदम सही सुना। मैं आपको बता दूँ की आपको तो ऐसे इस ब्लॉग में ब्लॉगिंग से संबंधित अर्टिकल्स और साथ ही अपडेट और ट्रिक्स की भी अर्टिकल्स मिल जाते है। तो इस Widgets वाले कैटेगरी में मैं ब्लॉगर से संबंधित Widgets के बारे में बताऊंगा। तो आज के इस ब्लॉग पोस्ट में हम बात करने वाले है Syntax Highlighter के बारे में। ये Syntax Highlighter क्या है और इससे क्या फायदा। तो इन सभी चीज़ों के बारे में हम नीचे विस्तारपूर्वक जानेंगे। तो बने रहिये इस आर्टिकल में और जानिये विस्तार पूर्वक।

What is Syntax Highlighter

अगर आप एक Web Developer है या एक Coder है तो आपको इस Syntax Highlighter के बारे में जरूर पता होगा। अगर नही पता तो मैं आपको बता दूं कि जिस Code को किसी भी खास जगह पर Highlight किया जाता है उसे हम Syntax Highlighter कहते है। इसे हम ज्यादातर ब्लॉगिंग करते समय इस्तेमाल करते है। अगर आप एक कोडिंग संबंधित ब्लॉग या वेबसाइट को चलाते है तो आपको यह इस्तेमाल करना चाहिए। क्योंकि किसी भी प्रकार की कोड जैसे HTML, CSS और Javascript को अगर आपको अपने ब्लॉग के पोस्ट में Add करना मुश्किल होता है। लेकिन अगर आप इस Syntax Highlighter को अपने ब्लॉगर ब्लॉग में इस्तेमाल करते है तो आप इन HTML, CSS और Javascript कोड को आसानी से पोस्ट में Add कर सकते है।

Syntax Highlighter in Blogger

तो हमने जान लिया कि Syntax Highlighter क्या है? तो अभी हम जान लेते है कि इस Syntax Highlighter को कैसे हम अपने ब्लॉगर के पोस्ट में Add कर सकते है। तो अगर आप ब्लॉगर पर ब्लॉगिंग करते है तो इस आर्टिकल को नीचे तक पढ़ते रहिये। क्योकि मैंने बताया है कि कैसे आप इस Syntax Highlighter को ब्लॉगर में कुछ Steps को इस्तेमाल करके कर सकते है। तो नीचे मैंने Step By Step बताया है।

Syntax Highlighter Setup in Blogger

Step 1 - सबसे पहले आपको ब्लॉगर के डैशबोर्ड में Login करना है।

Step 2 - अब आप Theme वाले ऑप्शन पर क्लिक करे।

Step 3 - अब आपको Edit HTML पर क्लिक करे।

Step 4 - अब आपको नीचे एक CSS Code मिलेगा। इसे कॉपी करके आपको ब्लॉगर थीम में </head> tag के ऊपर  Paste करना है।

<style type='text/css'>
/* Highlighter */
pre{white-space:pre;word-wrap:normal;overflow:auto;font-size:14px;margin:0;padding:0}hr{margin-top:2rem;background:#ccc;height:1px;border:0;margin-bottom:2rem}
.post-body code{padding:1.2em}.post-body pre{padding:0;border-radius:3px;background-color:#292e34;word-spacing:normal;word-break:normal;line-height:1.4em}.post-body .hljs{display:block;overflow-x:auto;padding:1.2em;background:#2b2b2c;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:bold}.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:#f24a4a;color:#fff;padding:2px 5px;border-radius:2px}.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:#fff;margin:.15rem 0}
</style>

Step 5 - अब नीचे एक और एक कोड मिलेगा। इसे भी कॉपी करके आपको ब्लॉगर के थीम ने </body> tag के ऊपर Paste करना है।

<script type='text/javascript'>
//<![CDATA[
// Highlighter
$('i[rel="pre"]').replaceWith(function(){return $("<pre><code>"+$(this).html()+"</code></pre>")});for(var pres=document.querySelectorAll("pre,code,kbd,blockquote,td"),i=0;i<pres.length;i++)pres[i].addEventListener("dblclick",function(){var e=getSelection(),t=document.createRange();t.selectNodeContents(this),e.removeAllRanges(),e.addRange(t)},!1);
function downloadJSAtOnload(){var e=document.createElement("script");e.src="https://cdn.jsdelivr.net/gh/Arlina-Design/frame@master/highlightr.js",document.body.appendChild(e)}window.addEventListener?window.addEventListener("load",downloadJSAtOnload,!1):window.attachEvent?window.attachEvent("onload",downloadJSAtOnload):window.onload=downloadJSAtOnload;
//]]>
</script>

How To Write Syntax Highlighter in Blogger

ऊपर के Steps को पूरा करने के बाद आपको अब अपने पोस्ट में इसे कैसे add करना है। तो इसे Syntax Highlighter को add करने के लिए आपको New Post पर क्लिक करके आपको HTML पर क्लिक करना है। याद रहे कि आपको यह सुविधा Compose में नही मिलेगा। अब आपको नीचे एक और कोड मिलेगा। इस कोड को कॉपी करके आप HTML में पेस्ट कर दे।

<pre><code>Enter Your CSS/HTML/Javascript Code</code></pre>

ऊपर के कोड में Enter Your CSS/HTML/Javascript Code मिलेगा। इस वाक्य हो हटाकर आप अपना कोड दाल दे।


अंतिम शब्द :- आपको यह Syntax Highlighter in Blogger पोस्ट कैसा लगा।नीचे कमेंट करके जरूर बताएं।और इस पोस्ट को अधिक से अधिक शेयर करे।