BloggingHindi - Blogging Aur Internet Ki Sabhi Jankari

  • About US
  • Contact Us
  • Blogging
  • WordPress
  • SEO

Blogger Me Syntax Highlighter Add Karke Post Me Code Kaise Dikhaye

Last Updated on January 10, 2023 by Md Arshad Noor 4 Comments

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 कर सके। 

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 करें।

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

  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 करना है।

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

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


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 में है।

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 जरूर करें।

You May Also Like

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

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

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

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

  • Blogger Template Download Karne Ke Liye Top 10 Trusted Websites

    Blogger Template Download Karne Ke Liye Top 10 Trusted Websites

  • PicsArt – Blogger Ke Liye Best Photo Editor & Creator for Android

    PicsArt – Blogger Ke Liye Best Photo Editor & Creator for Android

About Md Arshad Noor

हेलो दोस्तों, मेरा नाम मोहम्मद अरशद नूर है. में इस ब्लॉग में रेगुलर नई नई आर्टिकल्स लिखता हूँ. यहाँ पर हम ज्यादातर Blogging, Make Money, SEO, WordPress आदि से सम्बंधित Article मिलेगी. आपको हमारी लेख पसंद आती है तो इसे सोशल मीडिया में शेयर करें। अगर आपको कोई सहायता चाहिए तो कमेंट कीजिए।

COMMENTs ( 4 )

  1. Technical jankari hindi me says

    Bahut achha sir

    Reply
  2. Afreen says

    Great article sir thank you so much for sharing this…..

    Reply
  3. Md Athar says

    Sub complete karne ke bad post karne ke bad code kaise dikhega yeh bhi dikha dete.

    Reply
    • Md Arshad Noor says

      Visual mode me code add kar sakte ho.

      Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Please do not spam! otherwise your comment will be removed.

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

Useful Articles

WordPress Blog Post URL Ke Last Me .html Kaise Add Kare Aur Q Kare

Adsense se related 30+ important questions & Answers

Kisi Bhi Blogger Ko Link Exchange Kyu Nahi Karna Chahiye? [5 Reasons]

Blogging Ke 10 Important Myths ke Bare Me Apko Pata Hona Chahiye

WordPress Ke Text Widget Me PHP Kaise Use Kare

Successful Blogger 5 Tariko Se INCOME Karte Hai

7 Karn WordPress Me Jyada Plugin Use Nahi Karni Chahiye

Custom Email Account Ko Gmail Account Se Connect Kaise Kare [Step by Step]

10 Chije (Things) Jo Apko Successful Blogger Banne Me Badha Degi

Blog Ki Loading Speed Mayne (Matter) Kyu Rakhta Hai [5 Karan]

WordPress Me Bina Plugin Ke Social Media Sharing Button Kaise Add Kare

CPanel Dwara Blog Ka Backup Kaise Lete Hai

Search Engines se jyada Traffic nahi milne ke 11 Karan (Reasons)

About Us

mdarshadnoorहेल्लो दोस्तों, मेरा नाम मोहम्मद अरशद नूर है. में अररिया, बिहार का रहने वाला हूँ. मुझे नयी चीजें सीखना-सिखाना बहुत पसंद है. में पिछले कई सालों से ब्लॉगिंग के फील्ड में हूँ. इस ब्लॉग में आपको ब्लॉगिंग और इन्टरनेट से सम्बन्धित जानकारी मिलेगी. अधिक जानकारी के लिए यहाँ क्लिक करें।

SUBSCRIBE OUR NEWSLATTER

हमारे नवीनतम पोस्ट की सूचना एवं उपयोगी सामग्री प्राप्त करने के लिए हमसे जुड़ें

Posts for WP Users:

Blog Homepage Layout Post Me Ads Kaise Lagaye [2 Method]

AMP Posts/Pages Me Adsense Ads Insert Kaise Kare [Without Plugin]

WordPress Database Se Orphan/Unused Tables Ko Delete Kaise Kare

More Posts from this Category

DMCA.com Protection Status

Recommended For You

Blogging Ke 10 Important Myths ke Bare Me Apko Pata Hona Chahiye

District Magistrate (DM) कैसे बने? कलेक्टर बनने की जानकारी

Blog me Page navigation kaise add kare

New Blogger Ko Kya Karna Chahiye Aur Kya Nahi Karna Chahiye (Dos and Don’ts)

WordPress Site Slow Hone Ki 10 Biggest Karan (Reasons)

Blog me Anti AdBlock ko Add Karke Adsense Earning 50% Increase kare

Copyright © 2023 - All rights reserved. AboutContactSitemapDisclaimer