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, which is the first icon on the formatting toolbar here above, and the full post you’re replying to, will be quoted.
  • बोल्ड: यह ऑप्शन फोर्मेटिंग टूलबार पर दूसरा बटन/ऑप्शन है। 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 ** like this: **Bold 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, like this: *italic text*
  • अंडरलाइन: 4th: Same way, you can underline your text by clicking the underline icon on the F-Toolbar. There is no other way for underline. Don’t try to type Ctrl+u in the FF 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 text/strike-out text: लिखे हुए को आसानी से काट सकते हैं आप। ऐसे <s>कुछ लिखें</s>. या फिर >Del< tag भी काम करता है (लेकिन 's बढ़िया बताया गया है। ऐसे . At some places/In some chats, text surrounded by --- also work.
  • हयपेर्लिंक्स: 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 text to be coloured 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.
  • Then there is an ‘Options’ button at the far end. It has 2 options for normal user. Hide Details and Blur Spoiler.
    हाइड डिटेल्स: तब यूज़ होता है जब हमने कोई ऐसा लंबा मैटर लिखना है, जोकि हम समझते हैं सभी रीडर्स पढ़ने में इंटेरेस्टेड नहीं होंगे। लेकिन कोई-कोई रीडर पढ़ भी सकता है। उस वक़्त के लिए हम उस टेक्स्ट को इस ऑप्शन के साथ हाइड/collapse कर देंगे। इससे वो मैटर छिप जाएगा। और जो बंदा भी पढ़ने का इच्छुक होगा, वो छोटे से एरो पर क्लिक करके उस छिपे हुए मैटर/टेक्स्ट को पढ़ पाएगा।
जैसे इस लाइन के अंदर भी कुछ लिखा हुआ है, जिसको पढ़ने के लिए आपको इस लाइन के शुरू में दिये गए छोटे से काले एरो पर क्लिक करना होगा।

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

येही चीज़ आप मनुयाल्ली भी [details="कुछ भी"] छिपा हुआ मैटर कुछ भी[/details] लिख कर बना सकते हैं।

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

            

              
ब्लॉक-कोट या/और कोड -ब्लॉक।

Then next, 6th icon, named ‘Block-quote’, KBS Ctrl+ Shift+ 9, will make your text in block quote.

कम्पोज़ विंडो की टूलबार में छठा आइकान ब्लॉक-कोट का है।




ब्लॉक कोट: 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.






    

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



इसको पाने के लिए, You can also use Keyboard Shortcut, Ctrl+Shift+C 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.




कोड-ब्लॉक:


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




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

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




कोड ब्लॉक sample 



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



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



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

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


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

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


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



 


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



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

            


            

              
              
              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">