Mark-Down-Html: आपकी लेखनी को सुंदर बनाने वाली फोर्मेटिंग कैसे करें।

Lessons on Life & Computers
1

While writing a post, you can use following formatting options in the msg compose window. सभी ऑप्शनस फोर्मेटिंग टूलबार, जो की कम्पोज़ विंडो के टॉप में दिखती है, पर लेफ्ट से शुरू होती हैं।

  • कोट: यह ऑप्शन फोर्मेटिंग टूलबार पर सबसे पहला बटन/ऑप्शन है। You can select some text in the post you’re replying to, and click ‘Quote’ there. Or you can directly click quote बटन/icon. यही ‘कुओट’ बटन कम्पोज़ विंडो की formatting toolbar के शुरू में भी है।

  • बोल्ड **bold**: यह ऑप्शन फोर्मेटिंग टूलबार पर दूसरा बटन/ऑप्शन है। You can select some text and click Bold icon, the 2nd icon from the left on the formatting toolbar. Keyboard shortcut Ctrl+b also works. Or you can enclose your text in double astriesks like this: **Bold Text**

  • इट्ट्लिसाइज़ *italic text* : तीसरा बटन: You can italicize your text by selecting text, and clicking third icon from the left. Or you can use keyboard shortcut Ctrl+i or you can even enclose your text in single star/asterisk.

  • अंडरलाइन [u][/u]: वैसे Underline का बटन फोर्मेटिंग टूलबार से हटा दिया गया है। Don’t try to type Ctrl+u in the FF or Chrome browser. It’ll take you away from your current window/session. (Although, in most cases, when you click back, your typed text won’t be lost, and you can open the same as a draft. But why take chances!!)

  • stricken-out/strike-out text <s></s> ऐसे लिखे हुए को आसानी से काट सकते हैं आप। <s>कुछ लिखें</s>. या फिर >Del< tag भी काम करता है (लेकिन s बढ़िया बताया गया है। ऐसे .

  • हयपेर्लिंक्स [kuch bhi](link): 5th: If you want to convert a word into a Hyperlink, you can, by selecting text and clicking the 5th icon looking like a chain, Shortcut: Ctrl+k. And pasting/entering your target URL here. But if the link you’re inserting is of some video or document etc, then you’ve another, better, option also. Just paste that hyperlink into a separate line (of its own, i.e. don’t put any other words before or after the hyperlink in that paragraph/line).

  • ब्लॉक-कोट >>>: यह ऑप्शन आगे कोड-ब्लॉक के साथ समझाई गई है, कोड ब्लॉक और ब्लॉक-क्वोट आपस में काफी मिलते जुलते हैं।

  • फ़ोटो अपलोड: Then there is upload button to upload image/photo/small audio-video file or some document file (all below around 8 MB).

  • बुल्लेटेड लिस्ट *: Then there is bulleted List (Ctrl+Shift+8) button (लिस्ट जैसी की आप पढ़ रहे हैं). You can also achieve bullet list by typing a single star/hyphen plus a space.

  • नंबरड लिस्ट: Then there is numbered list (Ctrl+Shift+ 7). Also you can get the same results by typing any number and a dot or close round parentheses ) to achieve same effect.

  • एमोजी आइकॉन: Then there is emoji button. You can insert as many as you want :slight_smile: You can get the emoji list by typing a colon and closing round parenthesis :).

  • करेंट डेट/टाइम: Then you can insert the current date and time by clicking the next/12th icon. Like this: 2019-06-06T18:30:00Z

#Formatting-Options
#markup
#markdown
#mark-down-writing

2 Likes
2

आप अपने टेक्स्ट को नम्बरिंग भी दे सकते हैं। फिर उसके बाद आप लाइंस ऊपर नीचे करेंगे, तो भी नंबर सही रहेंगे।

  1. पहली लाइन।
  2. दूसरी लाइन। (अब इस दूसरी लाइन के शुरू में मैंने ‘2’ लिखने की बजाय गलती से ‘32’ लिख दिया, तो भी ऑटो मटिक नम्बरिंग की बजह से यह दिखाते वक़्त/प्रीव्यू में भी, सही, यानी, ‘2’ ही दिखाएगा।

ऐसे ही आप बुलेटेड लिस्ट भी बना सकते हैं।

  • एक बुलेट लगाने के लिए बस हरेक लाइन के शुरू में एक हाइफन प्लस स्पेस लगाते जाएं।

    • और दो या तीन बुलेट के लिए उसी ढंग से दो बार हाइफन+स्पेस, हायफ़न+स्पेस लगा दीजिए।
      • ऐसे तीन भी लग जाएंगे।

हॉरिजॉन्टल रूल के लिए तीन हायफ़न लगा दीजिये बस. लेकिन इस हायफ़न वाले पॅरा के ऊपर एक खाली पैरा होना जरूरी है।

  • इमेज url: Then by clicking the 13th icon, you can insert an image’s Url. Its a bit different than inserting the image itself. E.g., when you search an (gif) image from google images, and right click an image, you can either click ‘copy image’ (and then paste the same here directly) or you can click the ‘Image Location’ that you can’t directly paste in this composer window. For that you’ll have to click this button, and then, without clicking anywhere, just paste the url/location copied from google images. And it’ll show like the below given. Now this image isn’t pasted here actually, nor is it occupying any space of this forum. Its lying on the internet, but showing from there to here. And this is a very good and efficient way of inserting the photo (YouTube videos can be directly inserted by copying the url from the address bar of url and pasting here).

यूट्यूब/फ़ेसबुक के विडियो लिंक सीधे ही डाले जा सकते हैं। बस यूट्यूब/फ़ेसबुक के विडियो url को कॉपी करें और यहाँ पेस्ट कर दें। लेकिन लिंक वाली लाइन में कुछ भी और मत लिखें, उस लाइन में केवल येही लिंक होना चाहिए बस। नीचे यह विडियो लिंक वाली लाइन कुछ भी और नहीं है, तो यह लिंक ऐसे विडियो को शो करेगा:

  • टेक्स्ट अलाईनमेंट: Then there are 4 text alignment buttons: left, center, right, and justified.
  • Then there is colour button. You can select your [color=Yellow#]text to be coloured[/color] and then there will be a small code before and after your selected/to be coloured text. There, after color= you’ve to right some desired colour name. But due to some bug, wrong colours show. E.g. if you write Color=Yellow#, then it shows red color.

Next

  • Then there is an ‘Options’ button at the far end. It has 2 options for normal user. Hide Details and Blur Spoiler.
  • हाइड डिटेल्स: तब यूज़ होता है जब हमने कोई ऐसा लंबा मैटर लिखना है, जोकि हम समझते हैं सभी रीडर्स पढ़ने में इंटेरेस्टेड नहीं होंगे। लेकिन कोई-कोई रीडर पढ़ भी सकता है। उस वक़्त के लिए हम उस टेक्स्ट को इस ऑप्शन के साथ हाइड/collapse कर देंगे। इससे वो मैटर छिप जाएगा। और जो बंदा भी पढ़ने का इच्छुक होगा, वो छोटे से एरो पर क्लिक करके उस छिपे हुए मैटर/टेक्स्ट को पढ़ पाएगा। छिपाए जाने वाले मल्टपल पैरा को एक अलग पैरा बना कर इन टैग्स के अंदर रखिए। उद्धरण देखिए:
जैसे इस लाइन के अंदर भी कुछ लिखा हुआ है, जिसको पढ़ने के लिए आपको इस लाइन के शुरू में दिये गए छोटे से काले एरो पर क्लिक करना होगा।

छिपा हुआ/कोल्लापसेड़ मैटर. [details]

डिटेल्स और समरी टैग को एक साथ भी use करके देखिए[/details]

  • इन्ही डीटेल टैग बट [ की जगह <!-- -- ग्रेटर देन साइन के साथ आप कुछ छिपा भी सकते हैं। जो केवल एडिटिंग के वक़्त दिखेगा, फाइनल आउट्पुट (या प्रीव्यू) विंडो में नहीं दिखेगा। जैसे की आगे वाली लाइन :

  • यह युनिकोड हैक काम नहीं करत/किया: [हिडन​](Hide this text by replacing with zero-width spaces)

  • स्पोइलर [spoiler-/spoiler]: उसके बाद एक दूसरी ऑप्शन ‘blur स्पोइलर’ भी है। वो भी लगभग hidden/collapsed टेक्स्ट की तरह ही है। बस जरा सा फर्क है। इस ऑप्शन का use लोग आम तोर पर तब करते हैं, जब उन्होने कुछ ऐसा बताना होता है, जो सब लोग जानना नहीं चाहते। उधारण के तोर पर किसी मूवी का suspense. जब आप मूवी की स्टोरी लाइन बता रहे हैं, तब आप या लोग सस्पेन्स नहीं खोलना चाहेंगे। उस वक़्त आप उस सस्पेन्स वाले हिस्से को स्पोइल कर सकते हैं। यानि धुंधला सा कर देंगे, और जो भी उसको देखना चाहेगा, उस पर क्लिक करके ही देख पाएगा (अगर दोबारा क्लिक करेगा तो वो फिर से छिप जाएगा)। यह छिपना या देखना सिर्फ़ उसी यूसर के लिए होगा। यानि अगर एक यूसर ने उसको शो कर दिया तो भी बाकी users के लिए वो फिर भी छिपा ही रहेगा। उधारण के तोर पर यह शब्द छिपा रखे हैं मैंने: कुछ भी तो नहीं छिपाया था। हा हा
    येही चीज़ आप मनुयाली भी अगर यह टैग में रखेंगे तो हो जाएगा: [spoiler]text[/spoiler]

  • उसके बाद इसी मेनू में, उन users के लिए, जो कम से कम ट्रस्ट लेवेल 1 पर पहुँच चुके हैं, एक तीसरी ऑप्शन भी है। बिल्ड पोल। यानि आप एक पोल भी बना सकते हैं। इसकी डीटेल में फ़िलहाल नहीं जाऊंगा। वैसे कुछ भी मुश्क़ुइल नहीं है इसमें, अगर आप करेंगे तो पता चल जाएगा। पहले सिर्फ़ 2 ऑप्शन वाला पोल बना कर देखिएगा।

1 Like
3

उपर लिखा टॉपिक समझने के बाद, कुछ एडवांस तरीके भी हैं फोर्मेटिंग करने के। तो अपनी सीट कस कर पकड़ लीजिये और आगे बढ़िए:

  • आप अपने टेक्स्ट की किसी भी लाइन को 1 से लेकर 6 तक के हेयडिंग स्टाइल में कन्वर्ट कर सकते हैं। अगर किसी लाइन के शुरू में आप एक hash # प्लस स्पेस दे देंगे तो वो हेयडिंग 1 का स्टाइल बन जाएगा। अगर 2 hash लगा देंगे तो हेयडिंग-2 स्टाइल बन जाएगा। ऐसे 6 तक जाएगा। 6वा हेयडिंग स्टाइल इस नॉर्मल टेक्स्ट से भी थोड़ा सा छोटा हो जाएगा।

एक्जाम्पल: हेयडिंग 1

  • अगर किसी नॉर्मल लाइन/पैरा के नीचे (यानी जो लाइन/पैरा खुद बुल्लेटेड या numbered लिस्ट नहीं है) एक हाइफ़न लगा देंगे तो वो भी (कई बार) हेयडिंग-2 में कन्वर्ट हो जाता है। लेकिन यह एक स्टैंडर्ड feature नहीं है।

ऐसे (इस लाइन के नीचे अब सिर्फ एक हाइफ़न लगा हुआ है और यह 2nd लेवेल की हेयडिंग बन गयी)

  • हॉरिजॉन्टल रूल: अगर किसी लाइन/पैरा के नीचे एक खाली एंटर/लाइन और उसके नैक्सट लाइन में 3 हाइफ़न एक साथ लगा देंगे तो पूरी लाइन में एक हॉरिजॉन्टल लाइन/रूल लग जाएगी। जैसे इसके नीचे लगी है।
  • नोर्मल्ली आप कहीं भी एक से ज्यादा स्पेस या लाइन या पैरा स्पेस देंगे तो वो काम नहीं आएगी। यानी की 2 शब्दों के बीच आप चाहे कितनी ही स्पेस क्यूँ न देने की कोशिश करें, वो एक ही स्पेस दिखाएगा। 2 पैरा के बीच एक ही खाली लाइन दिखाएगा। लेकिन कई बार ऐसी सिचुएशन हो सकती है की आपको ज्यादा स्पेस दिखनी है। इसके लिए <pre></pre> टेग्स का इस्तेमाल करना पड़ेगा। यानी इन दोनों टेग्स के बीच जो भी स्पेस (चाहे वर्ड स्पेस, लाइन स्पेस, पैरा स्पेस) डालेंगे, वो उतनी ही दिखेगी, जितनी आप डालेंगे। उदाहरण के तोर पर, इस पैरा के बाद मैं दो स्पेस डालना चाहता हूँ/डालूँगा। तो मुझे स्पेस से पहले टैग का शुरू/पहले का हिस्सा और एंड में दूसरा हिस्सा टाइप करना पड़ेगा। लेकिन आपको वो टैग टाइप किया हुआ दिखाई नहीं देगा। केवल वांछित स्पेस ही दिखेगी। <pre>
    • 



</pre>


                       यह देखो। यहाँ उपर भी 2 पैरा/लाइन स्पेस हैं और शुरू में भी 


    

  • इसके इलावा, एक और टैग भी है, जो दो शब्दों के बीच में वांछित नॉन-ब्रेयकिंग’ स्पेस देगा। यानि की उस स्पेस से पहले और बाद वाले शब्द एक ही लाइन में होंगे। वो स्पेस बीच में टूटेगी नहीं। वो टैग है: &nbsp; और इसका एक और फाइदा आप एक्सट्रा वर्ड स्पेस में भी ले सकते हैं। यानि एक बार &nbsp; लिखने से आपको एक नॉन ब्रेयकिंग स्पेस मिल गयी, और इसके बाद आप एक और नॉर्मल स्पेस दे सकते हैं। यानी आपके 2 शब्दों के बीच 2 स्पेस हो गईं। और अगर आपको और चाहियें तो आप एक बार और &nbsp; लिख लें और चाहें तो एक और नॉर्मल स्पेस दे दें। इस तरीके से जितनी मर्जी वर्ड स्पेस क्रिएट कर सकते हैं।
    
उधारण देखिये, यहाँ मैं इसी कोड से कितनी ही एक्सट्रा स्पेस             दिखा रहा हूँ
    • 





block कोड/कोट में आप बिना किसी एक्सट्रा एफर्ट के एक्सट्रा स्पेसस दे सकते हैं।




और लास्ट, आप <kbd></kbd> से टेक्स्ट को ऐसे दिखा सकते हैं। 


इसके बाद नैक्सट रिप्लाइ में कोड ब्लॉक और कोड ब्लॉक के अंदर/कोड ब्लॉक की हेल्प से कलर टेक्स्ट समझाया गया है।

            


            

              
              
              1 Like
            


          

          

            

              



              
                  
                  
              4
              
            

            

              
बॉबी जी, आप टूटोरियल बहुत डीटेल में और बहुत अच्छे से बनाते हैं।

            


            

              
              
              1 Like
            


          

          

            

              



              
                  
                  
              5
              
            

            

              
Code Block/Preformatted Text प्रीफॉर्मैटेड टेक्स्ट (इसको पहले कोड-ब्लॉक भी कहा जाता था)


Then कम्पोज़ विंडो की टूलबार में छठा आइकान,  6th icon, Pre-Formatted text/कोड टायपिंग का है। इसको इन-लाइन कोड  ‘pre-formatted text’ भी कह सकते हैं। It is a in-line code type formatting. It looks like this. यानी देखें में यह ब्लॉक-क्वोट सा दिखता है, लेकिन वो लेफ्ट से इंडेन्टेड होता है, और पूरे पेरा ग्राफ के लिए है, जबकि यह कुछ characters पर ही काम आ जाता है, चलती लाइन में।


इसको पाने के लिए, You can also use Keyboard Shortcut, Ctrl+e shortcut. Or you can manually type a single grave accent before your text and after your text. ‘Single grave’ key is just above ‘tab’ key on your keyboard and to the left side of ‘1’ key.


इन-लाइन कोड को दिखने के लिए ऐसा ही एक और इफेक्ट भी है। You can use <kbd></kbd> tags. <kbd></kbd> के साथ डाला गया टेक्स्ट यूँ दिखाई देता है: like this.


Block-Quote (Ctrl+ Shift+ 9) got by >>


‘Block-quote’ will make your text in blocks indented a bit from left side. Example:




ब्लॉक कोट: Block quote looks like this, and the other way to achieve this is typing a greater than sign before your text. You can end your block quote text by selecting text not to be block-quoted and clicking on the same icon two times. Or you can just press ‘enter’ 2 times before the text not to be block quoted.




Also, you can further block quote your text inside block quote. This can be achieved by typing two greater than signs before your text. This way you can go approx 6 levels deep.






पहले पहले ‘कोड ब्लॉक’ देखने में ‘ब्लॉक कोट’ जैसा दिखता/लगता है।




ब्लॉक कोट सेंपल।

ब्लॉक कोट (जिसको फोर्मेटिंग टूलबार के 6वे बटन से प्राप्त किया जा सकता है), या अकेला कोट (पहला बटन) बिलकुल एक बराबर हैं, लेकिन इंका पर्पस थोड़ा अलग अलग है।




कोड ब्लॉक sample 



इस तरह के दिखने वाले code block के लिए, अपने मैटर से पहले और बाद में, एक नयी/अलग लाइन में तीन 
ग्रेव एक्सेंट (```) जो की आपके कीबोर्ड की टैब-की के बिल्कुल उपर या '1' की बाई तरफ होती है, लगाएँ। 
कोड ब्लॉक में लाइन तब तक/अपने आप रैप नहीं होती, जब तक की आप खुद लाइन या पैरा ब्रेक नहीं देते। 



वैसे कोड ब्लॉक वाक्य के शुरू में 4 स्पेसस लगा कर भी बन जाता है।
लेकिन इसका फर्क यह है की स्पेसस आपको अपनी हर लाइन/पैरा के शुरू में लगाने पड़ेंगे। 



इसके इलवा, कोड ब्लॉक के अंदर आप जितनी भी वर्ड/लाइन/पैरा स्पेस लगाएंगे, उतनी ही दिखाएगा (नोर्मल्ली एक्सट्रा स्पेस गायब हो जाती है)।

और एक चीज़, जो कोड ब्लॉक के अंदर अभी हमें भी क्लियर नहीं है। कई बार कोड ब्लोक्क्स के अंदर, कुछ कैरक्टर अपने बाद वाले मैटर का कलर अपने आप चेंज कर देते हैं। लेकिन वो समझ में नहीं आ रहा की कौन सा कैरक्टर, किस ढंग से, कौन सा कलर कर रहा है। उसकी कुछ एक्जाम्पल नीचे दे रहे हैं।


** नीचे वाला दोनों कोड ब्लॉक के अंदर यूं ही sample टेक्स्ट के तोर पर कलर दिखाने के लिए लिखा गया है, इसका सही से पता नहीं चल रहा की किस अक्षर से कौन सा रंग हो रहा है।

बस इतना है की बॉक्स के अंदर tilde से या slashes से कलर बदलते हैं। शायद यह प्रोग्रामिंग कोड को पहचानने की कोशिश करता है और उसको उसी हिसाब से कलर करता है। **


`red color`
//gray color 
3 11 tum 12 



 


/सारा कोड़ मैटर ग्रीन हो सकता है/



[color=Yellow#]इसके इलावा, जैसा की इस टॉपिक की पहली पोस्ट में बताया है, आप उपर फोर्मेटिंग टूलबार के 2nd लास्ट आइकॉन से भी अपने टेक्स्ट को कलर कर सकते हैं।[/color]

            


            

              
              
              1 Like
            


          

          

            

              



              
                  
                  
              6
              
            

            

              
हाइपर लिंक डालने का के तीनों तरीके:

<http://foo.com> : http://foo.com

[foo.com](http://foo.com) : foo.com

<a href="http://foo.com">foo.com</a> : foo.com


इमेज डालने का एक अलग तरीका, जिसमें आप इमेज साइज़ भी डिसाइड कर सकते हैं।

<img src="%{base_uri}/plugins/discourse-narrative-bot/images/font-awesome-ellipsis.png" width="16" height="16">