ब्लॉगर में कभी कभी हम पोस्ट लिखते है। जिसमें आपको HTML, CSS, जावास्क्रिप्ट, java, python जैसे प्रोग्रामिंग लैंग्वेज के source कोड embed करने आवश्यकता पड़ती है। ताकि यूजर उस कोड को समझ पाये साथ ही आवश्यकता अनुसार कही Copy और Paste कर पाये।
Copy कर लें और अपने ब्लॉग के पोस्ट में paste कर दे जहाँ आप source code को दिखाना चाहते है।
//your source code को अपने HTMl, CSS, Javascript और अन्य प्रोग्रामिंग लैंग्वेज के कोड से बदल दे।
XML+HTML(XHTML) अन्यथा HTML Markup लैंग्वेज में होने वाला Reserverd Text Character से संबंधित जानकारी होना चाहिए क्योंकि जब आप source code के text <, > जैसे Text Character का उपयोग करेंगे।
तब आपके HTML Document के एलिमेंट टैग or Layout break होता है। अतः इन HTML मार्कअप के reserverd text character के जगह आवश्यकता अनुसार इन HTML Entity को इस्तेमाल करें। ताकि आपके Webpage के layout break न हों।
Markup Character
HTML Entity
<
<
>
>
&
&
<style>
pre.code{
background:rgb(237, 234, 222);
padding: 10px;
margin: 15px auto;
border : 1px solid gold;
white-space: pre-wrap;
word-break: break-word;
border-radius: 10px;
}
</style>
<pre class="code">
// your source code
</pre>
Preview
Blogger Codebox in Post with Syntax Highlighter
ऊपर के कोड बॉक्स बहुत ही साधारण है जो मैंने आपके CSS (Cascading Style Sheets) की मदद से तैयार किया है। किन्तु ये कोड बॉक्स आपके Programming Language और Web used markup दोनों को Syntax को Highlight करेंगी। जिससे आपके Code वेबसाइट को वेबपेज पर Professional Editor की तरह Look देगा। साथ ही यूजर की Reabilty भी बढ़ेंगी।
ब्लॉगर में कोडबॉक्स Syntax highlighter feature कैसे लगायें?
सबसे पहले अपने ब्लॉगर के HTML Editor को खोल लें।
अब <head/> टैग के अंदर नीचे के दोनों cdn लिंक को Copy करके पेस्ट कर दे। और theme को Save कर दे।
<script src="http://cdnjs.cloudflare.com/ajax/libs/prettify/r298/run_prettify.js" type="text/javascript"><script> <link href="http://cdnjs.cloudflare.com/ajax/libs/prettify/r298/prettify.css" type="text/css"/>
अब ब्लॉगर के किसी भी पोस्ट में Codebox को उपयोग करना चाहते है। तब pre टैग के साथ prettyprint class attribute को use करें।
<pre class="prettyprint">
//codes रखें।
</pre>
Preview
आपको इसे भी पढ़ना चाहिए
हिंदी में ब्लॉग कैसे बनाएं। Hindi Me Blog Banaye Free
Blogspot में Costom Robot Header Tags को कैसे Setting और Enable करें?
At Last
आप ऊपर दिये गये blogger के पोस्ट में code को दिखाने के कोई भी codebox के लिए style इस्तेमाल कर सकते है। साथ ही और भी codebox को पोस्ट अपडेट के साथ इस पोस्ट में जोड़ने वाला हूँ। आशा करता हूँ कि की ये दोनों कोड बॉक्स आपको अच्छा लगा हो।अगर कोई सवाल मन मे हो, तो नीच कमेंट बॉक्स में कमेंट करे।
No comments:
Post a Comment