Markdown Editor — लिखें और लाइव प्रीव्यू देखें

Markdown Editor क्या है?

Markdown Editor एक मुफ़्त ऑनलाइन लेखन वातावरण है जो टाइप करते समय आपके Markdown का लाइव प्रीव्यू रेंडर करता है। एडिटर और प्रीव्यू एक साथ दिखते हैं: बाईं ओर टाइप करें, दाईं ओर फ़ॉर्मेट किया हुआ आउटपुट देखें — तुरंत, बिना रिफ्रेश किए। यह हेडिंग और बोल्ड टेक्स्ट से लेकर fenced code blocks, टेबल और blockquotes तक सब कुछ संभालता है।

यह टूल उन डेवलपर्स के लिए बना है जो README, तकनीकी दस्तावेज़ीकरण, ब्लॉग ड्राफ्ट और रिलीज़ नोट्स लिखते हैं — जहाँ भी Markdown ऑथरिंग फ़ॉर्मेट है। रिपॉजिटरी में बदलाव पुश करके प्रीव्यू रेंडर का इंतज़ार करने या लोकल एडिटर प्लगइन इंस्टॉल करने के बजाय, आपको ब्राउज़र में सटीक रेंडर्ड प्रीव्यू मिलता है। जब आप तैयार हों, फ़ाइल को वर्शन कंट्रोल के लिए .md फ़ाइल के रूप में या वेब पेज के लिए तैयार पूर्ण स्टाइल्ड .html फ़ाइल के रूप में एक्सपोर्ट करें। कोई अकाउंट नहीं, कोई सर्वर अपलोड नहीं, कोई कॉन्फ़िगरेशन नहीं।

मुख्य विशेषताएँ

लाइव Markdown प्रीव्यू — @uiw/react-md-editor द्वारा संचालित, एडिटर उसी Markdown पार्सिंग का उपयोग करके रियल टाइम में प्रीव्यू रेंडर करता है जो लाइब्रेरी के साथ आती है। जैसे ही आप टाइप करना बंद करते हैं, बदलाव प्रीव्यू में दिखाई देते हैं।
सिंटैक्स हाइलाइटिंग — Fenced code blocks ( `javascript , `python , आदि) प्रीव्यू पेन में सिंटैक्स-रंगीन आउटपुट के साथ रेंडर होते हैं। एडिटर का अपना raw Markdown व्यू भी हेडिंग, लिंक, बोल्ड और code spans को अलग करने के लिए सिंटैक्स रंग लागू करता है।
HTML में एक्सपोर्ट — "Download HTML" एम्बेडेड CSS स्टाइल के साथ एक पूरा <!DOCTYPE html> दस्तावेज़ बनाता है जो body font, code blocks, blockquotes और tables को कवर करता है। फ़ाइल document.html के रूप में डाउनलोड होती है और किसी भी ब्राउज़र में बिना बाहरी निर्भरता के सही तरह खुलती है।
.md फ़ाइल के रूप में डाउनलोड — "Download MD" raw Markdown सोर्स को document.md के रूप में सेव करता है, रिपॉजिटरी में कमिट करने या टिकट से अटैच करने के लिए तैयार।
Markdown कॉपी करें — GitHub, GitLab, Confluence, Notion या किसी भी Markdown-aware इनपुट फ़ील्ड में पेस्ट करने के लिए raw Markdown टेक्स्ट को क्लिपबोर्ड पर कॉपी करता है।
HTML कॉपी करें — प्रीव्यू पेन से रेंडर किया हुआ inner HTML कॉपी करता है। उपयोगी जब आपको HTML स्वीकार करने वाले rich-text एडिटर में फ़ॉर्मेट किया हुआ कंटेंट पेस्ट करना हो।
सामान्य फ़ॉर्मेटिंग टूलबार — @uiw/react-md-editor टूलबार bold, italic, headings, lists, links, images, code और अधिक के लिए बटन प्रदान करता है। कोई कीबोर्ड शॉर्टकट याद नहीं करना पड़ता।
क्विक रेफरेंस पैनल — एडिटर के नीचे एक सिंटैक्स चीट शीट नौ सबसे ज़्यादा इस्तेमाल होने वाले Markdown निर्माणों को कवर करती है: headings, bold, italic, links, images, inline code, lists, blockquotes और fenced code blocks।

Markdown Editor का उपयोग कैसे करें

चरण 1: लिखना शुरू करें या अपना कंटेंट लोड करें

जब पेज लोड होता है, तो एडिटर में एक सैंपल दस्तावेज़ होता है जो headings, bold और italic text, एक unordered list, एक fenced JavaScript code block, एक टेबल, एक blockquote और एक लिंक दर्शाता है। दाईं ओर प्रीव्यू पेन उस सैंपल का रेंडर्ड आउटपुट दिखाता है।

एक्शन बार में "Clear" बटन पर क्लिक करके एडिटर साफ़ करें, या बस सब कुछ सेलेक्ट करें और टाइप करना शुरू करें। एडिटर की ऊँचाई 600px पर फिक्स है, लंबे दस्तावेज़ों के लिए वर्टिकल स्क्रॉलिंग सक्षम है।

चरण 2: टूलबार या कीबोर्ड से Markdown लिखें

एडिटर के ऊपर टूलबार में सबसे सामान्य फ़ॉर्मेटिंग ऑपरेशन के बटन हैं। सेलेक्ट किए गए टेक्स्ट को bold के लिए double asterisks में लपेटने के लिए B क्लिक करें, या italic के लिए single asterisks में लपेटने के लिए I क्लिक करें। Heading बटन #, ## या ### प्रीफ़िक्स इंसर्ट करते हैं। Code fence बटन एक भाषा placeholder के साथ triple-backtick ब्लॉक इंसर्ट करते हैं।

सिंटैक्स हाइलाइटिंग के साथ fenced code blocks के लिए, लिखें:

def greet(name: str) -> str: return f"Hello, {name}!"

print(greet("world"))

प्रीव्यू इसे एक रंगीन code block के रूप में रेंडर करता है। पेज के नीचे क्विक रेफरेंस पैनल सभी नौ सिंटैक्स पैटर्न एक नज़र में दिखाता है।

चरण 3: प्रीव्यू पेन में रेंडर्ड आउटपुट सत्यापित करें

दायाँ पेन टाइप करते समय अपडेट होता है। पूरे दस्तावेज़ की समीक्षा करने के लिए इसे एडिटर से स्वतंत्र रूप से स्क्रॉल करें। data-color-mode="auto" attribute का मतलब है कि एडिटर और प्रीव्यू आपके ऑपरेटिंग सिस्टम की light या dark mode प्राथमिकता के अनुसार स्वचालित रूप से अनुकूलित होते हैं।

जाँचें कि:

टेबल्स बॉर्डर और alternating header स्टाइलिंग के साथ रेंडर होती हैं
लिंक क्लिक करने योग्य हैं (वे रेंडर्ड HTML में href attributes का उपयोग करते हैं)
Code blocks में आपके द्वारा निर्दिष्ट भाषा के लिए सही सिंटैक्स रंग हैं
इमेज दिखती हैं (यदि आपने सार्वजनिक रूप से एक्सेस करने योग्य इमेज URL संदर्भित किए हैं)

चरण 4: अपना दस्तावेज़ एक्सपोर्ट करें

अपने उपयोग के मामले से मेल खाने वाला एक्सपोर्ट चुनें:

Markdown कॉपी करें — raw सोर्स को GitHub PR descriptions, Jira comments, Notion pages या किसी भी Markdown फ़ील्ड में पेस्ट करें
HTML कॉपी करें — रेंडर्ड markup को rich-text editors में पेस्ट करें जो HTML इनपुट स्वीकार करते हैं
MD डाउनलोड — document.md को आपके Downloads फ़ोल्डर में सेव करता है
HTML डाउनलोड — document.html को एम्बेडेड स्टाइल के साथ सेव करता है, static web page के रूप में होस्ट करने के लिए तैयार

एक्सपोर्ट किए गए HTML दस्तावेज़ में <style> ब्लॉक शामिल है जिसमें उचित डिफ़ॉल्ट हैं: system font stack, max-width: 800px centered layout, code background #f4f4f4, blockquote left border और full-width table with bordered cells।

चरण 5: हिस्ट्री से पिछला काम वापस पाएं

Premium supporters एडिटर के नीचे History panel का उपयोग करके पहले auto-saved किसी भी दस्तावेज़ को पुनर्स्थापित कर सकते हैं। Non-premium users को page छोड़ने से पहले अपना काम copy या download कर लेना चाहिए, क्योंकि एडिटर कंटेंट sessions के बीच persist नहीं होता।

व्यावहारिक उदाहरण

प्रोजेक्ट README लिखना

एक डेवलपर एक नए CLI टूल के लिए README बना रहा है। वह लिखता है:

# my-cli

A command-line tool for batch file renaming.

## Installation

npm install -g my-cli


## Usage

my-cli --pattern "*.log" --prefix "archive-"


## Options

| Flag | Description | Default |
|------|-------------|---------|
| `--pattern` | Glob pattern for matching files | `*` |
| `--prefix` | String prepended to filenames | `""` |
| `--dry-run` | Preview changes without renaming | `false` |

लाइव प्रीव्यू कॉलम हेडर के साथ टेबल, सिंटैक्स हाइलाइटिंग के साथ bash code blocks और heading hierarchy दिखाता है। वह "Download MD" क्लिक करता है और फ़ाइल सीधे अपने प्रोजेक्ट रूट में सेव करता है।

दस्तावेज़ीकरण से स्टाइल्ड HTML पेज बनाना

एक technical writer के पास एक API endpoint का वर्णन करने वाला Markdown दस्तावेज़ है। वह कंटेंट पेस्ट करता है, प्रीव्यू सत्यापित करता है, फिर "Download HTML" क्लिक करता है। परिणामी document.html में एम्बेडेड CSS शामिल है और ब्राउज़र में खोले जाने या ईमेल अटैचमेंट के रूप में भेजे जाने पर सही ढंग से रेंडर होता है — कोई बाहरी stylesheet आवश्यक नहीं।

रिलीज़ changelog का मसौदा तैयार करना

2.4.0 version changelog लिखने वाला एक डेवलपर एडिटर का उपयोग करके "Breaking Changes", "New Features" और "Bug Fixes" के लिए ## headings के साथ दस्तावेज़ को संरचित करता है, प्रत्येक के नीचे unordered lists का उपयोग करते हुए। वह "Copy HTML" क्लिक करता है और फ़ॉर्मेट किया हुआ कंटेंट सीधे अपनी कंपनी के release management tool में पेस्ट करता है, जो rich HTML इनपुट स्वीकार करता है।

टिप्स और सर्वोत्तम प्रथाएँ

टूलबार सेलेक्ट किए गए टेक्स्ट के आसपास फ़ॉर्मेटिंग इंसर्ट करता है। एक शब्द सेलेक्ट करें और Bold बटन क्लिक करें; selection word बन जाती है। यदि कुछ सेलेक्ट नहीं है, तो बटन cursor पर bold text जैसा placeholder इंसर्ट करता है।

Fenced code blocks को सिंटैक्स हाइलाइटिंग के लिए language identifier की आवश्यकता होती है। एक खाली ` ब्लॉक plain monospace text के रूप में रेंडर होता है। रंगीन आउटपुट के लिए opening backticks के तुरंत बाद language name जोड़ें ( `typescript , `sql , `yaml )।

HTML कॉपी करें लाइव प्रीव्यू का inner HTML कैप्चर करता है। handleCopyHtml function document.querySelector('.w-md-editor-preview')?.innerHTML पढ़ता है। यदि प्रीव्यू अभी तक रेंडर नहीं हुआ (उदाहरण के लिए, page load के तुरंत बाद), कॉपी किया गया HTML खाली हो सकता है। "Copy HTML" क्लिक करने से पहले प्रीव्यू के भर जाने का इंतज़ार करें।

डाउनलोड किया गया HTML self-contained है। document.html फ़ाइल में सभी ज़रूरी styles inline हैं। आप इसे ईमेल कर सकते हैं, static file server पर होस्ट कर सकते हैं, या बिना किसी अतिरिक्त asset के टिकट से अटैच कर सकते हैं।

Clear पुष्टि नहीं माँगता। "Clear" क्लिक करने से एडिटर तुरंत खाली हो जाता है। यदि आपके पास unsaved काम है, तो पहले download या copy करें।

सामान्य समस्याएँ और समाधान

"एडिटर loading spinner दिखा रहा है।" @uiw/react-md-editor component server-side rendering समस्याओं से बचने के लिए lazy-loaded है। spinner editor bundle लोड होते समय संक्षेप में दिखता है। यह सामान्य कनेक्शन पर एक या दो सेकंड के भीतर गायब हो जाना चाहिए।

"HTML कॉपी करें ने खाली आउटपुट दिया।" Function preview container का innerHTML पढ़ता है। यदि preview अभी तक render नहीं हुआ (असामान्य लेकिन बहुत धीमी connections पर संभव), यह empty string लौटा सकता है। Render trigger करने के लिए preview pane scroll करें, फिर दोबारा कोशिश करें।

"मेरी टेबल render नहीं हो रही।" Markdown tables को header row और data rows के बीच dashes की एक separator row की ज़रूरत होती है: |------|------|। सुनिश्चित करें कि header row की प्रत्येक cell में एक corresponding separator cell हो। Leading और trailing pipe characters (|) optional हैं लेकिन consistency के लिए अनुशंसित हैं।

"Fenced code में कोई syntax highlighting नहीं है।" सत्यापित करें कि language identifier opening backticks के साथ उसी line पर है, कोई space नहीं: `javascript न कि ` javascript । यह भी confirm करें कि language name lowercase है और सही spelled है (python, न कि Python)।

"Downloaded MD file पर macOS में कोई extension नहीं है।" macOS कभी-कभी उन files के लिए .md extension हटा देता है जिन्हें वह standard type के रूप में नहीं पहचानता। Download करने के बाद file को rename करके .md जोड़ें, या अपना browser configure करें ताकि वह हमेशा पूछे कि downloads कहाँ save करने हैं।

गोपनीयता और सुरक्षा

सभी Markdown rendering, HTML conversion और file export पूरी तरह आपके browser में होते हैं। आप जो भी टाइप करते हैं, वह Glyph Widgets servers या किसी third party को transmit नहीं किया जाता। Page load होने के बाद एडिटर offline काम करता है। यह इसे internal documentation, proprietary technical specifications और confidential project details वाले drafts के लिए सुरक्षित बनाता है।

अक्सर पूछे जाने वाले प्रश्न

क्या Markdown Editor मुफ़्त है? हाँ, बिना किसी उपयोग सीमा के पूरी तरह मुफ़्त। किसी भी तरह का registration, subscription या payment आवश्यक नहीं है।

क्या यह offline काम करता है? एक बार page load और editor bundle initialize होने के बाद, सभी writing, preview और export features बिना network connection के काम करते हैं।

क्या मेरा data सुरक्षित है? आप जो भी टाइप करते हैं वह आपके browser की memory में रहता है। कोई content server को नहीं भेजा जाता। Confidential documentation, internal API references या private notes लिखना सुरक्षित है।

यह कौन सा Markdown flavour support करता है? Editor @uiw/react-md-editor का उपयोग करता है, जो remark पर आधारित है और tables, task lists और language identifiers के साथ fenced code blocks सहित GitHub Flavored Markdown extensions के साथ CommonMark syntax support करता है।

क्या मैं images embed कर सकता/सकती हूँ? हाँ, standard Markdown image syntax का उपयोग करके: !alt text। Image publicly accessible होनी चाहिए — browser context में local file paths काम नहीं करते। Image live preview में तुरंत render होती है।

Fenced code blocks में कौन सी languages support की जाती हैं? Preview उन सभी languages के लिए syntax highlighting render करता है जिन्हें underlying remark/highlight.js pipeline support करती है। Common languages — JavaScript, TypeScript, Python, Java, Go, Rust, SQL, Bash, YAML, JSON और कई अन्य — सभी opening fence में language identifier append करने के साथ काम करते हैं।

क्या downloaded HTML file को internet connection की ज़रूरत है? नहीं। exported document.html में <style> block में सभी styles inline हैं। कोई external CSS frameworks, CDN resources या fonts load नहीं होते। यह offline भी identically render होता है।

क्या मैं keyboard shortcuts उपयोग कर सकता/सकती हूँ? @uiw/react-md-editor component platform के आधार पर standard text-editing shortcuts (Ctrl/Cmd+B for bold, Ctrl/Cmd+I for italic) support करता है। यदि shortcuts आपके operating system पर differently behave करते हैं तो formatting insert करने के लिए toolbar buttons सबसे reliable तरीका हैं।

Task list कैसे बनाते हैं? Unchecked item के लिए - [ ] और checked item के लिए - [x] उपयोग करें:

- [x] Write first draft
- [ ] Review with team
- [ ] Publish

जब मैं editor clear करता/करती हूँ तो मेरे content का क्या होता है? Editor तुरंत empty string पर reset हो जाता है। Content tool से recover नहीं किया जा सकता जब तक कि आपने पहले History panel (premium feature) का उपयोग न किया हो या content copy/download न किया हो।

Markdown Editor क्या है?

मुख्य विशेषताएँ

लाइव Markdown प्रीव्यू — @uiw/react-md-editor द्वारा संचालित, एडिटर उसी Markdown पार्सिंग का उपयोग करके रियल टाइम में प्रीव्यू रेंडर करता है जो लाइब्रेरी के साथ आती है। जैसे ही आप टाइप करना बंद करते हैं, बदलाव प्रीव्यू में दिखाई देते हैं।
सिंटैक्स हाइलाइटिंग — Fenced code blocks ( `javascript , `python , आदि) प्रीव्यू पेन में सिंटैक्स-रंगीन आउटपुट के साथ रेंडर होते हैं। एडिटर का अपना raw Markdown व्यू भी हेडिंग, लिंक, बोल्ड और code spans को अलग करने के लिए सिंटैक्स रंग लागू करता है।
HTML में एक्सपोर्ट — "Download HTML" एम्बेडेड CSS स्टाइल के साथ एक पूरा <!DOCTYPE html> दस्तावेज़ बनाता है जो body font, code blocks, blockquotes और tables को कवर करता है। फ़ाइल document.html के रूप में डाउनलोड होती है और किसी भी ब्राउज़र में बिना बाहरी निर्भरता के सही तरह खुलती है।
.md फ़ाइल के रूप में डाउनलोड — "Download MD" raw Markdown सोर्स को document.md के रूप में सेव करता है, रिपॉजिटरी में कमिट करने या टिकट से अटैच करने के लिए तैयार।
Markdown कॉपी करें — GitHub, GitLab, Confluence, Notion या किसी भी Markdown-aware इनपुट फ़ील्ड में पेस्ट करने के लिए raw Markdown टेक्स्ट को क्लिपबोर्ड पर कॉपी करता है।
HTML कॉपी करें — प्रीव्यू पेन से रेंडर किया हुआ inner HTML कॉपी करता है। उपयोगी जब आपको HTML स्वीकार करने वाले rich-text एडिटर में फ़ॉर्मेट किया हुआ कंटेंट पेस्ट करना हो।
सामान्य फ़ॉर्मेटिंग टूलबार — @uiw/react-md-editor टूलबार bold, italic, headings, lists, links, images, code और अधिक के लिए बटन प्रदान करता है। कोई कीबोर्ड शॉर्टकट याद नहीं करना पड़ता।
क्विक रेफरेंस पैनल — एडिटर के नीचे एक सिंटैक्स चीट शीट नौ सबसे ज़्यादा इस्तेमाल होने वाले Markdown निर्माणों को कवर करती है: headings, bold, italic, links, images, inline code, lists, blockquotes और fenced code blocks।

Markdown Editor का उपयोग कैसे करें

चरण 1: लिखना शुरू करें या अपना कंटेंट लोड करें

चरण 2: टूलबार या कीबोर्ड से Markdown लिखें

सिंटैक्स हाइलाइटिंग के साथ fenced code blocks के लिए, लिखें:

def greet(name: str) -> str: return f"Hello, {name}!"

print(greet("world"))

चरण 3: प्रीव्यू पेन में रेंडर्ड आउटपुट सत्यापित करें

जाँचें कि:

टेबल्स बॉर्डर और alternating header स्टाइलिंग के साथ रेंडर होती हैं
लिंक क्लिक करने योग्य हैं (वे रेंडर्ड HTML में href attributes का उपयोग करते हैं)
Code blocks में आपके द्वारा निर्दिष्ट भाषा के लिए सही सिंटैक्स रंग हैं
इमेज दिखती हैं (यदि आपने सार्वजनिक रूप से एक्सेस करने योग्य इमेज URL संदर्भित किए हैं)

चरण 4: अपना दस्तावेज़ एक्सपोर्ट करें

अपने उपयोग के मामले से मेल खाने वाला एक्सपोर्ट चुनें:

Markdown कॉपी करें — raw सोर्स को GitHub PR descriptions, Jira comments, Notion pages या किसी भी Markdown फ़ील्ड में पेस्ट करें
HTML कॉपी करें — रेंडर्ड markup को rich-text editors में पेस्ट करें जो HTML इनपुट स्वीकार करते हैं
MD डाउनलोड — document.md को आपके Downloads फ़ोल्डर में सेव करता है
HTML डाउनलोड — document.html को एम्बेडेड स्टाइल के साथ सेव करता है, static web page के रूप में होस्ट करने के लिए तैयार

चरण 5: हिस्ट्री से पिछला काम वापस पाएं

व्यावहारिक उदाहरण

प्रोजेक्ट README लिखना

एक डेवलपर एक नए CLI टूल के लिए README बना रहा है। वह लिखता है:

# my-cli

A command-line tool for batch file renaming.

## Installation

npm install -g my-cli


## Usage

my-cli --pattern "*.log" --prefix "archive-"


## Options

| Flag | Description | Default |
|------|-------------|---------|
| `--pattern` | Glob pattern for matching files | `*` |
| `--prefix` | String prepended to filenames | `""` |
| `--dry-run` | Preview changes without renaming | `false` |

दस्तावेज़ीकरण से स्टाइल्ड HTML पेज बनाना

रिलीज़ changelog का मसौदा तैयार करना

टिप्स और सर्वोत्तम प्रथाएँ

सामान्य समस्याएँ और समाधान

गोपनीयता और सुरक्षा

अक्सर पूछे जाने वाले प्रश्न

Task list कैसे बनाते हैं? Unchecked item के लिए - [ ] और checked item के लिए - [x] उपयोग करें:

- [x] Write first draft
- [ ] Review with team
- [ ] Publish

Markdown Editor — लिखें और लाइव प्रीव्यू देखें

Markdown Editor क्या है?

मुख्य विशेषताएँ

Markdown Editor का उपयोग कैसे करें

चरण 1: लिखना शुरू करें या अपना कंटेंट लोड करें

चरण 2: टूलबार या कीबोर्ड से Markdown लिखें

चरण 3: प्रीव्यू पेन में रेंडर्ड आउटपुट सत्यापित करें

चरण 4: अपना दस्तावेज़ एक्सपोर्ट करें

चरण 5: हिस्ट्री से पिछला काम वापस पाएं

व्यावहारिक उदाहरण

प्रोजेक्ट README लिखना

दस्तावेज़ीकरण से स्टाइल्ड HTML पेज बनाना

रिलीज़ changelog का मसौदा तैयार करना

टिप्स और सर्वोत्तम प्रथाएँ

सामान्य समस्याएँ और समाधान

गोपनीयता और सुरक्षा

अक्सर पूछे जाने वाले प्रश्न

संबंधित टूल्स

पढ़ना जारी रखें

Markdown Editor — लिखें और लाइव प्रीव्यू देखें

Markdown Editor क्या है?

मुख्य विशेषताएँ

Markdown Editor का उपयोग कैसे करें

चरण 1: लिखना शुरू करें या अपना कंटेंट लोड करें

चरण 2: टूलबार या कीबोर्ड से Markdown लिखें

चरण 3: प्रीव्यू पेन में रेंडर्ड आउटपुट सत्यापित करें

चरण 4: अपना दस्तावेज़ एक्सपोर्ट करें

चरण 5: हिस्ट्री से पिछला काम वापस पाएं

व्यावहारिक उदाहरण

प्रोजेक्ट README लिखना

दस्तावेज़ीकरण से स्टाइल्ड HTML पेज बनाना

रिलीज़ changelog का मसौदा तैयार करना

टिप्स और सर्वोत्तम प्रथाएँ

सामान्य समस्याएँ और समाधान

गोपनीयता और सुरक्षा

अक्सर पूछे जाने वाले प्रश्न

संबंधित टूल्स

पढ़ना जारी रखें