How to add syntax highlighter Code in Blogger || How to Set Up stylish code box snippet in blogger || ब्लॉगर blog me code box कैसे जोड़ें ? Full Info
How to add syntax highlighter Code in Blogger || How to Set Up stylish code box snippet in blogger || ब्लॉगर blog me code box कैसे जोड़ें ? Full Info
हेल्लो, फ्रेंड नमस्कार! आप सभी का मेरे ब्लॉग “ज्ञान का फूल” में हार्दिक स्वागत है | आज के इस पोस्ट में हम जानेगे की किसी ब्लॉग या वेबसाइट जो की ब्लॉगर plateform में है उस ब्लॉग या वेबसाइट में code एडिटर या coding syntax highlighter का इस्तेमाल कैसे किया जाता है ? एवं इनके इस्तेमाल से contant को कैसे ब्लॉग copy paste porotect होते हुए भी copy paste किया जाता है ? इन्ही के बारे में इस पोस्ट में मैं आपको विस्तार से जानकारी देने वाला हूँ | यदि आप अपने ब्लॉग में custme code box या coding syntex highlither add करना चाहते है तो इस पोस्ट को पूरा जरुर पढ़िए ताकि आपको किसी ब्लॉग या वेबसाइट में code एडिटर या syntax highligher add करने का पूर्ण ज्ञान प्राप्त हो |
दोस्तों! इस पोस्ट में हम जानेगे की -
- सिंटेक्स हाइलाइटर क्या है?
- सिंटेक्स हाइलाइटर ब्लॉगर में कैसे काम करता है?
- ब्लॉगर में सिंटेक्स हाइलाइटर कैसे जोड़ें?
- ब्लॉगर में सिंटैक्स हाइलाइटर का उपयोग करने के लाभ
चलिए दोस्तों ! इनके बारे में अब विस्तार से जानते है -
What is code box or syntax highlighter ?
Syntax highlighter या code बॉक्स किसी ब्लॉग या वेबसाइट में इस्तेमाल किया जाने वाला विजेट होता है , जिसके इस्तेमाल से किसी वेबसाइट या ब्लॉग में ब्लॉग या वेबसाइट के लेखक या पब्लिशर कुछ स्पेशल या विशेष कोडिंग को (जो की html, css, script ..... etc ) किशी भी फोर्माते में हो सकते है , उन्हें ब्लॉग या वेबसाइट में विशेस तरीके से प्रदर्शित करने के लिए ब्लॉग या वेबसाइट में syntax highliter या coding box का इस्तेमाल करते है | जिससे वे अपने ब्लॉग या वेबसाइट में किसी भी coding को coding box या syntax highlighter के माध्यम से स्टाइलिश तरीके से ब्लॉग में शो करते है , इससे कोडिंग को सही तरीके से समझा जा सकता है |
सिंटेक्स हाइलाइटर एक प्लगइन की तरह ही है | जो की प्रोग्रामिंग या कोडिंग फोर्माते में होता है जिनको ब्लॉगर पर उपयोग किया जाता हैं | सिंटेक्स हाइलाइटर 50 से अधिक भाषाओं (एचटीएमएल, सी, सी ++, जावा, जावास्क्रिप्ट से फोरट्रान, और टीएक्स) में सिंटैक्स-हाइलाइट कोड बनाने के लिए एक वेब-आधारित टूल है । यह उन लोगों के लिए विशेष रूप से उपयोगी है जो प्रोग्रामिंग के बारे में लिखते हैं और नमूना कोड या तो सिंटैक्स-हाइलाइटर स्निपेट या पूरे प्रोग्राम के रूप में साझा करते हैं।
code बॉक्स या syntax highlighter html या script कोडिंग से ही बना होता है जिसका इस्तेमाल ब्लॉग या वेबसाइट के template में ही किया जाता है | ब्लॉग में यदि किसी टेक्स्ट या paragraph को यदि copy करने की आवश्यकता होता है तो इसके इस्तेमाल से ब्लॉग के contant copy – paste से protect होने के बावजूद text या coding को copy या paste करने की अनुमति प्रदान करता है | blog या वेबसाइट में कोडिंग बॉक्स में लिखे गये टेक्स्ट को आप आसानी से अपने ब्लॉग को प्रोटेक्ट रखकर अपने ब्लॉग से किसी भी कोडिंग को “syntax highlighter” या “code बॉक्स” में रखकर सामने वाले विसिटर के लीये copy करने के लिए टेक्स्ट या कोडिंग को प्रदर्शित कर सकते है | जिससे सामने वाला व्याक्ति या आप स्वयं उस code बॉक्स से टेक्टस या कोडिंग को आवश्यकता पड़ने पर copy कर सकते है | copy करने के लिए contant को सेलेक्ट करने की भी आवश्यकता नही होता है, code बॉक्स या syntax highlighter के इस्तेमाल से आप सिर्फ code बॉक्स या syntax highlighter टेक्स्ट को डबल click करके सम्पूर्ण कोडिंग को copy कर सकते है | इन्ही सुविधाओं के नाम से ब्लॉग या वेब साईट में code बॉक्स या syntax highlighter का इस्तेमाल किया जाता है |
सिंटेक्स हाइलाइटर ब्लॉगर में कैसे काम करता है?
सिंटैक्स हाइलाइटर किसी भी वेबसाइट या ब्लॉग पोस्ट में एक्टिव होने की दशा में यह use वेबसाइट या ब्लॉग के सोर्स कोड लेगा जो कि या तो HTML फॉर्मेट में होगा या टी फिर मार्कडाउन फॉर्मेट में हो सकता है | syntax highlighter के द्वारा वेबसाइट के इस source कोडिंग का टुकड़े-टुकड़े करके एक कंपाइलर में फीड करता है | जिसके बाद कंपाइलर का आउटपुट का उपयोग इस तरह किया जाएगा जैसे कि वह आपकी पोस्ट का टेक्स्ट हो। प्लगइन स्रोत कोड में कीवर्ड की पहचान करता है और उन्हें HTML टैग्स के साथ बदल देता है, जो अच्छे दिखने वाले हाइलाइट किए गए कोड ब्लॉक बनाने के लिए CSS द्वारा रंगीन या स्टाइल किए गए हैं।
ब्लॉगर में सिंटेक्स हाइलाइटर कैसे जोड़ें ?
ब्लॉगर में सिंटैक्स हाइलाइटर जोड़ने के लिए निम्नलिखित स्टेप्स को फॉलो करने होंगे , जिनके बाद आप अपने ब्लॉग या वेबसाइट में syntax highlighter का इस्तेमाल कर सकते है | ये स्टेप्स निचे दिए गये है |
1. Step : सबसे पहले Blogger.com के डैशबोर्ड पर जाएं।
2. Step :अब थीम सेक्शन में जाएं ।
3. Step : थीम सेक्शन Customize में, Edit HTML पर जाएं ।
4. Step : ब्लॉगर में CTRL + F के जरिए सर्च करें -
]]></b:skin>
उसके बाद निचे दिए गये कोडिंग को ]]></b:skin> टैग के ऊपर / पहले पेस्ट करें।
<!-- css coding start here -->
padding: 0.5em;
background: #1E1E1E;
color: #DCDCDC;
font-weight: normal;
font-size: 1.15em !important;
}
.hljs-keyword,
.hljs-literal,
.hljs-symbol,
.hljs-name {
color: #569CD6;
}
.hljs-link {
color: #569CD6;
text-decoration: underline;
}
.hljs-built_in,
.hljs-type {
color: #4EC9B0;
}
.hljs-number,
.hljs-class {
color: #B8D7A3;
}
.hljs-string,
.hljs-meta-string {
color: #D69D85;
}
.hljs-regexp,
.hljs-template-tag {
color: #9A5334;
}
.hljs-subst,
.hljs-function,
.hljs-title,
.hljs-params,
.hljs-formula {
color: #DCDCDC;
}
.hljs-comment,
.hljs-quote {
color: #57A64A;
font-style: italic;
}
.hljs-doctag {
color: #608B4E;
}
.hljs-meta,
.hljs-meta-keyword,
.hljs-tag {
color: #9B9B9B;
}
.hljs-variable,
.hljs-template-variable {
color: #BD63C5;
}
.hljs-attr,
.hljs-attribute,
.hljs-builtin-name {
color: #9CDCFE;
}
.hljs-section {
color: gold;
}
.hljs-emphasis {
font-style: italic;
}
.hljs-strong {
font-weight: bold;
}
.hljs-bullet,
.hljs-selector-tag,
.hljs-selector-id,
.hljs-selector-class,
.hljs-selector-attr,
.hljs-selector-pseudo {
color: #D7BA7D;
}
.hljs-addition {
background-color: #144212;
display: inline-block;
width: 100%;
}
.hljs-deletion {
background-color: #600;
display: inline-block;
width: 100%;
}<!-- css coding end here -->
5. Step : अब CTRL + F के जरिए </body> टैग सर्च करें।
6. Step : अब निचे दिए गये Javascript कोड को copy करके अपने template के </body> टैग के ऊपर पेस्ट करें ।
<!-- coding start here -->
<script>
//<![CDATA[
setTimeout(function(){for(var e=document.querySelectorAll("pre>code"),o=0;o<e.length;o++)hljs.highlightBlock(e[o]);window.highlightJsBadge({contentSelector:".container",loadDelay:0,copyIconClass:"fa fa-copy",checkIconClass:"fa fa-check text-success",onBeforeTextCopied:function(e,o){return e}})},10);
//]]>
</script><!-- coding end here -->
7. Step : अब, नई पोस्ट बनाएं, और जहां भी आपको करना हो, कॉपी बटन के साथ अपना सिंटैक्स हाइलाइटर कोड दिखाएं, इस HTML कोड को पेस्ट करें और अपना सिंटैक्स हाइलाइटर कोड दिखाएं ।
<!-- coding start here -->
</div><!-- coding End here -->
8. Step : सेव एंड प्रीव्यू पर क्लिक करें।
अब आपके ब्लॉग में इस code के इस्तेमाल से स्टाइलिश code बॉक्स या syntax highlighter इनस्टॉल या add जरुर हो जाएगा | आप अपने ब्लॉग या वेबसाइट में इन सभी कोडिंग को बताये गये स्टेप्स के अनुसार सावधानी रखते हुए add करने का प्रयाश कीजिएगा |
Conclusion :
यदि आपका ब्लॉग या वेबसाइट में contant को protect करने हेतु copy paste protection लगा हुआ है तो आप इसे में syntax highlighter का इस्तेमाल करके आप अपने ब्लॉग या वेब साईट में विसिटर को आवश्यक टेक्स्ट को show करवा सकते है | जिससे आपके ब्लॉग में इन टेक्सट को आसानी से copy और अन्य जगह paste किया जाना संभव होता है | इसके इस्तमाल से टेक्स्ट को मात्र mouse से double click करके ही copy किया जा सकता है | जबकि ब्लॉग में इसके इसके इस्तेमाल से टेक्स्ट या कोडिंग भी स्टाइलिश हो जाता है | इन्ही खूबियों के कारण से किसी भी ब्लॉग या वेबसाइट में syntax highlighter या code बॉक्स का इस्तेमाल किया जाता है |
इस पोस्ट में आपने पढ़ा :
How to add syntax highlighter Code in Blogger || How to Set Up stylish code box snippet in blogger || ब्लॉगर blog me code box कैसे जोड़ें ? Full Info
इस पोस्ट में आपको syntax highlighter के विषय में आपको पूर्ण जानकारी दिया गया है | आशा है की आपको हमारा यह पोस्ट "How to add syntax highlighter Code in Blogger || How to Set Up stylish code box snippet in blogger || ब्लॉगर blog me code box कैसे जोड़ें ? Full Info" जरुर पसंद आया होगा | यदि आपके मन में इस पोस्ट या हमारे ब्लॉग से सम्बंधित किसी भी तरह की कोई सवाल या सुझाव हो तो आप हमसे कमेंट के माध्यम से शेयर कर सकते है | हम आपके सवालों के जवाब देने की पूरी कोशिश करेंगे, साथ ही हम आपके सुझावों को भी अमल में लाने का भी पूरा प्रयास करेंगे |
अंत में दोस्तों इस ब्लॉग को पढ़ने के लिए आपका सादर धन्यवाद् |
वन्दे मातरम ....... !
जय श्री राम ................!!
COMMENTS