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 April 11, 2022 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 में जाइये. 

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

  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 डालें.

Blogger Me Syntax Highlighter Add Karke Post Me Code Kaise Dikhaye 2
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 3

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

  • Blogger Template Se Credit & Link Ko Change ya Remove kaise Kare

    Blogger Template Se Credit & Link Ko Change ya Remove kaise Kare

  • Blogger Blog Me Schema.org Data Kaise Add kare.  Google Rich Snippet ke Liye

    Blogger Blog Me Schema.org Data Kaise Add kare.  Google Rich Snippet ke Liye

  • Blogger Blog Ki Traffic Ko Kisi Dusre Blog Me Redirect Kaise Kare

    Blogger Blog Ki Traffic Ko Kisi Dusre Blog Me Redirect Kaise Kare

  • Apne Blog/Website Me Word Counter Tool Kaise Add Kare

    Apne Blog/Website Me Word Counter Tool Kaise Add Kare

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

Google Keyword Ranking Check karne ke liye 5 Best Website

Website Ko User Friendly Banane Ke Liye 5 Secrets

PHP Version Ko Upgrade Karke Site Speed Ko 20% Increase Kare

WordPress Toolbar/Adminbar Ko Hide Aur Customize Kaise Kare

Adsense Account Kaise Banaye [Step By Step]

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

Hostlelo Review – A Great Solution for New Bloggers

QR Code Kya Hai? QR Code Kaise Banaye aur Scan Kaise Kare

Blog Me Live Cricket Score Widget Kaise Add Kare

7 Karn WordPress Me Jyada Plugin Use Nahi Karni Chahiye

Directory Browsing Kya Hota Hai-Isko Disable Karne Ke 2 Tarike

Twitter Account Ko Secure Kaise Rakhe

Blog ko Delete kaise kare aur Delete kiya hua blog wapas kaise laye

About Us

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

SUBSCRIBE OUR NEWSLATTER

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

Posts for WP Users:

Blogspot Ya WordPress Blog Me Calculator Tool Kaise Add Kare

Nulled Theme/Plugin Kya Hota Hai? Isko Use Kyo Nahi Kare – Full Guide

WordPress Blog Ki Loading Speed Ko htaccess Se Fast Kaise Banaye

Kisi Hosting Provider Se Hosting Kharidne Se Pahle 10 Sawal Puchhe

Hacker Kisi WordPress Site Ko Hack Kaise Karte Hai [5 Methods]

More Posts from this Category

DMCA.com Protection Status

Recommended For You

WordPress.co vs wordpress.org: kya Difference hai 

Laptop Ki Battery Saving Kaise Kare? 8 Best Tips in Hindi

Genesis Theme Ko Manually Customize & Design Karne Ki Full Guide

Blogger Ke Liye 10 Free Duplicate Content Checker Tools

Independence day shayari in hindi | Independence day quotes in Hindi स्वतंत्रता दिवस की शायरी, कोट्स, स्टेटस, कविता (हिंदी में)

Newbie Bloggers ko SEO Ke Only 8 Myths Par Dhyan Dena Chahiye

Copyright © 2021 - All rights reserved. AboutContactSitemapDisclaimer