सिंटेक्स कोड बॉक्स क्या है वेबसाइट में कैसे लगाए?

नमस्कार दोस्तों! आज हम सिंटेक्स कोड बॉक्स क्या है और वेबसाइट में कैसे लगाए? के बारे में पढ़ने वाले हैं और देखेंगे की इसे कैसे अपने BlogSpot और WordPress के वेबसाइट में लगा सकते हैं.

आपने देखा होगा कि कई ब्लॉगर अपने पोस्ट आर्टिकल के अंदर code box का इस्तेमाल करते हैं, जो की यह किसी भी टेक वेबसाइट के लिए बहुत ही उपयोगी हो सकती है. 
Syntax highlighter Code Box kya hai website me kaise lagaye, Syntax highlighter Code Box kya hota hai, Blogger me syntax highlighter Code Box kaise lagaye, wordpress me syntax highlighter Code Box kaise lagaye,
Code-Box क्या होता है?
कोड बॉक्स एक टेक्स्ट एरिया बॉक्स होता है जो दिखने में किसी वेबसाइट के कमेंट बॉक्स की तरह लगता हैं. पर इसका प्रयोग वेबसाइट में कोडिंग या प्रोग्रामिंग जैसे लैंग्वेज को शेयर करने के लिए किया जाता है. 

वैसे तो बहुत सारे कारण है जिसके लिए हम code box का इस्तेमाल करते हैं, लेकिन आमतौर पर कई ब्लॉगर अपने ब्लॉग्गिंग साइट के पोस्ट में प्रोग्रामिंग लैंग्वेज के बारे में पोस्ट आर्टिकल्स लिखते हैं- जैसे कि Html, Css, JavaScript, Php, MySQL, Python, C++, Java. तब उन्हें code box की जरुरत पड़ती जाती है.

पर यहाँ पर कुछ ब्लॉगर उन कोडिंग लैंग्वेज को code box में न लिख कर सिंपल टेक्स्ट में आर्टिकल्स के अंदर लिख देते हैं. जो दिखने में सही नहीं लगता है. इससे आपके वेबसाइट पर आने वाले Visitors को समझने में दिक्कत भी हो सकती है. 

इसलिए code box का इस्तेमाल करना चाहिए जो दिखने में भी स्टाइलिश लगता है और Visitors को समझने में भी मदद करता है, जो की आप इस image में देख सकते है.  ⇓ 
Syntax highlighter
इस code box के अंदर लिखे html code को कोई भी visitors आसानी से समझ सकता है और उसे चाहे तो कॉपी भी कर सकता है. 

Code-box लगाने के फायदे-

#1 इससे आपके वेबसाइट पर आने वाले visitors को समझने में आसानी होगी की कोड कहाँ से शुरू है और कहाँ पर खत्म है. 

#2 Code-box में प्रोग होने वाले हर एक कोड को आपके visitors आसानी से कॉपी कर सकेंगे. 

#3 अगर आप किसी भी कोडिंग या प्रोग्रामिंग जैसे लैंग्वेज को प्रोवाइड करने के लिए अपने पोस्ट में code box का इस्तेमाल करते हो तो आपकी website साफ-सुथरा और खूबसूरत दिखता है.

#4 लोगों की नज़रों में आपकी वेबसाइट कि authority बढ़ जाएगी, क्योंकि code box प्रोग करने से visitors को एक प्रोफेशनल वेबसाइट लगता है.

जैसे की हमें पता है की ज्यादा तर सभी ब्लॉगर गूगल के Blogger और WordPress CMS को ही ज्यादा पसंद करते है इसलिए हम इन दोनों में ही Code box लगाना सीखेंगे. 

1. Blogger में Code box कैसे लगाए? 

बात करें सबसे पहले ब्लॉगर की तो इसमें आप दो तरीके से cyntax code box लगा सकते हैं जिसमे से पहला तरीका जो है आप कह सकते हो खुद की कोडिंग द्वारा होता है, पर वही आप दूसरा वाला तरीका अपनाते है तो इसमें आपको थर्ड पार्टी वेबसाइट से कोड को जनरेट करना पड़ता है जिसके बाद ही वेबसाइट में कॉपी करके लगा सकते हो यह दिखने में भी काफी आकर्षित होता है.

पहला तरीका- मान लेते है आपको अपने Post में यह Code लगाना है. ⇓ 


<div class="container">  
    <div class="col-lg-4">
      <span class="glyphicon glyphicon-star"></span>
    </div>
      <div class="jumbotron">
          <img  src="../images/demo.png">
          <h1> Demo work </h1> 
     </div>
 </div>

तो इस लिए आपको कुछ steps को flow करना होगा, चलिए उन Steps को देख लेते हैं. 

# सबसे पहले Blogger में उस  1.Step  article को ओपन कर ले जिसमे यह कोड लगाना है. 

# आपको उसमे दो Options मिलेंगे [Compose/HTML] आपको  2.Step  HTML पर क्लिक करना है. 

# HTML पर क्लिक करने के बाद आप Back-end editor पर चले जाओगे जिसके अंदर आपको निचे दिए गए कोड को  3.Step  कॉपी कर ले. 

<textarea style="background-color:black; color:#ADD8E6; font-weight:bold; width:100%; margin:5px 0; padding:7px;" cols="2" rows="10"> 
I'm Code!  
</textarea>

उसके बाद इसे अपने पोस्ट में वहाँ  4.Step  पेस्ट करना है जहाँ आप लगाना चाहते है. 

# अब जहाँ  5.Step  I’m code लिखा है उसे remove करके उसकी जगह पर उस कोड को पेस्ट करें जो आप लगाना चाहते है, पर हमारे case में हम ऊपर दिए गए कोड को पेस्ट करेंगे.
paste code
# अब आपको कुछ नहीं करना simply  6.Step  सेव और पब्लिश कर देना है. सारे steps flow करने के बाद आपको इस तरह का Syntax Code box दिखेगा. 


दूसरा तरीका- अब हम एक थर्ड पार्टी वेबसाइट के सहायता से code box लगाना सीखेंगे .


# सबसे पहले आपको hilite.me site पर जाना है.


# hilite.me site पर जाने के बाद आपको उस पेज में  1.Step  Source code: ऑप्शन दिखेगा, जिसके निचे आपको उस कोड को पेस्ट करना है जिसे आप अपने ब्लॉगर के पोस्ट में लगाना चाहते है.


# उसमे में आपको  2.Step  Style का ऑप्शन दिखेगा. जिसमे आपको 15 से भी ज्यादा अलग-अलग स्टाइल देखने को मिलेगा जिसे आप अपने मुताबिक सेलेक्ट कर के लगा सकते हैं मेरे Case में मेने डिफ़ॉल्ट लिया है.


# जब आप ये सब बेसिक से स्टेप फ्लो कर लेंगे उसके बाद उसी पेज में एक और

ऑप्शन  3.Step  Heighlight के नाम से दिखेगा.. जो की आपको इसे क्लिक करना है. इसे क्लिक करते ही एक कोड generate होगा.


hilite

# जो आपको  4.Step  HTML: ऑप्शन के निचे मिल जाएगी. उसे सिम्पली कॉपी करके अपने Blogger के पोस्ट में वहाँ पेस्ट करना है जहाँ आप Code box लगाना चाहते है.


# जिसके बाद आपको कुछ इस तरह का कोड बॉक्स दिखेगा. ⇓ 


 
  <div class="container">  
    <div class="col-lg-4">
      <span class="glyphicon glyphicon-star"></span>
    </div>
      <div class="jumbotron">
          <img  src="../images/demo.png">
          <h1> Demo work </h1> 
     </div>
 </div>


2. WordPress में Code box कैसे लगाए?


चलिए अब देख लेते हैं कि wordpress में code box कैसे लगाते है, जो की हम एक बहुत ही popular plugin के मध्यम से लगाएंगे.


#  सबसे पहले Plugin के option में जाए जिसमे आपको  1.Step  Add New पर क्लिक करना है.


Add new plugin


# Plugin library में जाने के बाद सर्च बार में  2.Step  “Crayon Syntax Highlighter” सर्च करना है.


plugin Search bar

# Plugin मिल जाने के बाद आपको सिम्पली  3.Step  इनस्टॉल और एक्टिवटे कर दें.


crayon syntax highlighter plugin


# प्लगइन इनस्टॉल करने के बाद आपको अब आप  4.Step  उस पोस्ट पर क्लिक करें. जिसमे आपको सिंटेक्स कोड लगाना है.


# अब आप उस पोस्ट के ऊपर आप देखेंगे एक न्यू फीचर्स आ गया होगा है, जोकि कुछ इस < > सिंबल तरह होगा अब आप इसे  5.Step  क्लिक करें.

Source code symbol


# जिसके बाद आपको एक window popup होगा. अब आप जो भी Syntax code post में लगाना चाहते है  6.Step  सिम्पली पेस्ट करें और “ADD” बटन पर क्लिक कर दें.


crayon syntax highlighter dashbord



बस आपको इतना ही करना था, अब आप Preview पर क्लिक करके syntax code box देख सकते है की पोस्ट में कैसा दिख रहा है.


Conclusion

दोस्त! उम्मीद करता हूं Syntax code box क्या है और अपने पोस्ट में कैसे लगाए आप समझ गए होंगे. अगर आपको यह पोस्ट पसंद आया हो तो कमेंट और शेयर जरूर करें. इसके अलावा अगर आपके पास कोई सवाल और प्रश्न हो ब्लॉग्गिंग और डिजिटल मार्केटिंग इत्यादि से जुड़े तो हमें कमेंट करके बता सकते है क्योंकि यहाँ पर आपके सभी सवालों के जवाब जल्द से जल्द मिल जाएंगे. धन्यवाद! 😊

0 टिप्पणियां

Please, do not enter any spam link in the comment box.

टिप्पणी पोस्ट करें

Please, do not enter any spam link in the comment box.

Post a Comment (0)

नया पेज पुराने