Blogger Me Syntax Highlighter Add Karke Post Me Code Kaise Dikhaye

Sometime हमें अपने ब्लॉग post में code को show करना होता है. जिससे हमारा visitor उस code को आसानी से copy कर पाता है. हम अपने WordPress ब्लॉग में Syntax highlighter plugin का use करके easily पोस्ट में code highlight कर लेते हैं. लेकिन जिसका ब्लॉग Blogger में है तो वो क्या करे?? उसके लिए भी कई सारे ways हैं. में इस post में आप सभी को उन्ही के बारे में बताने वाला हूँ. जिससे आप अपने Blogger ब्लॉग में भी Code को Highlight करके अपने visitors को share कर पाओगे। 

Blogger me Syntax Code Highlighter Kaise Add Kare Code dikhane ke liye.
आपने बहुत सारे blogs में देखा होगा की वहाँ पर post में code दिखाई देता है. जिससे हम उस code को आसानी से copy करके अपने ब्लॉग में add कर पाते हैं. WordPress में code highlight कैसे करते हैं? इसके बारे में तो लगभग सभी को पता होगा की Crayon Syntax Highlighter plugin से हम post में code को highlight कर सकते हैं. लेकिन जिसका ब्लॉग Blogger में है वो post में code को कैसे highlight करें? इसके बारे में बहुत कम लोगो को पता होता है. इसीलिए हम इस tutorial में आपको Blogger में code highlighter को कैसे add करते हैं? इसके बारे में बताने वाले हैं।

Recently, मुझसे एक friend ने सवाल पूछा था की “जब में अपने ब्लॉग post में code को डालता हूँ तो वह show नही होता है, बल्कि work करने लगता है. क्या करूँ” तो इसीलिए आज में आपको ये तो बताऊंगा की blog post में code को highlight कैसे करते हैं और साथ ही में आपको ये भी बताऊंगा की जब ब्लॉग post में code add करते हैं तो show होने की बजाय work क्यों करता है? 
किसी भी website को developing में coding की ही जरुरत होती है और किसी भी site को design करने के लिए भी coding को use किया जाता है. Website development और डिज़ाइन के लिए css, php, html जैसे coding languages का use किया जाता है.  बहुत सारे लोग हैं, जिन्हें coding की जानकारी नही होती है तो वो internet पर search करके website develop और design करता है. जिसको coding की अच्छी जानकारी होती है तो वो इसी topic पर अपना site बनाता है और वो website development और design के बारे में post share करता है. इस तरह के topic में हमें अक्सर post में coding भी share करना पड़ता है. ताकि उस coding की help से हमारे visitor अपने website को develop और design कर सके। 

See also  [Manually] Blog Ki CSS Ko Compress Karke Loading Speed Fast Kare

In my case, जब मेने wordpress पर first time अपना ब्लॉग बनाया था तो मुझें plugin के बारे में कुछ भी जानकारी नही थी और में उस समय यह सोचता था की wordpress पर सारे plugins activated होते है, बस हमें सिर्फ उन plugins का use करना होता है. लेकिन मुझे बाद में पता चला की plugin को install करके activate करना होता है. मेरे लिए starting में सबसे बड़ी problem यही थी की मुझें ये पता नही था की post में code को कैसे show कराते है! इसके बारे में मुझे बाद में पता चला था but इसके लिए मुझे बहुत सारे परेशानियों का सामना करना पड़ा. ये अक्सर new bloggers के साथ होता है.  इसीलिए मेने सोचा की इसके बारे में एक पोस्ट लिखना जरुरी होगा।

अगर आप एक wordpress user हो तो में आपको बता देता हूँ की आप code को highlight करने के लिए Crayon Syntax Highlight Plugin का use कर सकते हो. इसके अलावा अगर आप चाहो तो Syntax Highlighter Evolved प्लगइन का भी use कर सकते हो और आप GitHub की site में अपना account बनाकर code को host कर सकते हो. यदि आप एक Blogger user हो तो हम आपको निचे इसी के बारे में बताने वाले हैं. 

Blogger ब्लॉग में Syntax Code Highlighter कैसे Add करें.

जिस तरह WordPress में Syntax Highlighter plugin के द्वारा हम Code को post में highlight या show कराते है, उसी तरह यदि आपका ब्लॉग Blogger में है तो आपको Syntax Highlighter का Script अपने ब्लॉग में add करना होगा. हम आपको निचे में इसी के बारे में बता रहे है. चलिए step by step जानते हैं की Blogger ब्लॉग में Syntax Highlighter कैसे Add करें।

See also  Blogspot Ke Ye Limits Jo Blogger Users Ko Janna Jaruri Hai

Step 1: सबसे पहले आप Syntax Script Generator Tool में जाइये. 

Blogger Me Syntax Highlighter Add Karke Post Me Code Kaise Dikhaye 5

  1. यहाँ पर theme select करें, जो की code highlight में show होगा. I think, Default ही select करें।
  2. आप post में किस किस language के code को दिखाना चाहते हो, उसे tick करें. जैसे में अपने ब्लॉग में mostly, PHP, HTML, CSS, Javascript use करता हूँ तो में Action script को HTML दिखाने के लिए tick किया है. इसी तरह आप जो coding को अपने post में दिखाना चाहते हो, उसे tick करें।
  3. अब Generate Code की बटन पर Click करें।
  4. अब आपका code generate हो गया है. इस box के code को copy करके Notepad में save कर लीजिए।

Step 2: अब Blogger में Login करें और Dashboard ->Themes ->Edit HTML में जाएँ और CTRL+F का बटन दबा कर </head> को Find करें. उसके बाद आपने जो code ऊपर बताये गए tool से generate किया था, उसे </head> के पहले add कर दीजिए और template save कर दीजिए।

अब आपके ब्लॉग में Syntax Highlighter Add हो चूका है. अब आपको ये जानना बहुत जरुरी है की Post में Code को Show या Highlight कैसे करें. तो चलिए हम इसके बारे में भी निचे जान लेते है।

Post में Code को Highlight या Show कैसे करवाये।

ऊपर बताये गए process को follow आपके आपने अपने ब्लॉग में Syntax Highlighter को add कर लिया होगा. अब हम आपको निचे बता रहे हैं की post में code को highlight करने के लिए क्या करना होगा। इससे पहले हम आपको निचे ये पता देते हैं की

किस Code Language में क्या tag use करना है.

CSS  –   <pre class=”brush:css;”>जो code दिखाना है उसे Encode करके यहाँ लिखें </pre>

HTML
–  <pre class=”brush:html;”> जो code दिखाना है उसे Encode करके यहाँ लिखें </pre>

JavaScript
–  <pre class=”brush:javascript;”> जो code दिखाना है उसे Encode करके यहाँ लिखें </pre>
आप जिस coding को use कर रहे हो, उसका tag use करना होगा. तो चलिए अब हम step by step निचे जानते हैं की Post में code कैसे add करना है।

See also  Blog Post Me Bit.ly Dwara Auto Short URL Generation Ko Kaise Add Kare

Step 1: अपने ब्लॉग में जिस post में आप code दिखाना चाहते हो, उसे editor में open करें.

  1. अब Compose की टैब पर Click करें.
  2. जहाँ पर आपको code दिखाना है, वहाँ पर code डालें.

Blogger Me Syntax Highlighter Add Karke Post Me Code Kaise Dikhaye 6
Note: हमने पहले आपको compose टैब में code इसीलिए डालने को कहा क्योकि इससे आपका code automatic encode होगा. यदि आप code को बिना encode किये HTML टैब में डालोगे तो ये Show नही work करेगा।

Step 2: 

  1. अब HTML टैब पर Click करें. इसके बाद automatic आपका code encode हो जायेगा।
  2. अब आपका code encode होगा तो पहले जैसा नहीं दिखेगा. < के स्थान पर &lt; और > स्थान पर &gt; होगा. कुछ इसी तरह होगा. Post में code को दिखाने के लिए HTML mode में code को encode करके add करना होता है. अब अपने code के पहले <pre class=”brush:html”> या जो coding language है, उसका tag use करना होगा और code के last में </pre> को use करना होगा. जैसे निचे screenshot में है।

Blogger Me Syntax Highlighter Add Karke Post Me Code Kaise Dikhaye 7

That’s it.

इस तरह से आप अपने ब्लॉग के post में code की highlight करके दिखा सकते हो. में उम्मीद करता हूँ की आप ऊपर बताये गए process को समझ गए होंगे. अगर कोई दिक्कत हो तो हमें comment करें. जब आप code को अपने post में लिखोगे तो वो automatic highlight हो जायेगा. यानि उसका color और style change हो जायेगा. यदि आप WordPress user हैं तो आप Crayon Syntax Plugin का use कर सकते हो. यह plugin बहुत अच्छा है और easily code को highlight कर देता है. 


में उम्मीद करता हूँ की अपने इस post की मदद से अपने ब्लॉग में syntax highlighter को अपने ब्लॉग में add कर लिया होगा. अगर आपको इस post से सम्बंधित कोई सवाल पूछना है तो comment करें. इस post को social media में share जरूर करें।

Like the post?

Also read more related articles on BloggingHindi.com Sharing Is Caring.. ♥️

Sharing Is Caring...

4 thoughts on “Blogger Me Syntax Highlighter Add Karke Post Me Code Kaise Dikhaye”

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

×