मोफत Markdown एडिटर

रिअल टाइममध्ये Markdown लिहा आणि पूर्वावलोकन करा. हेडिंग, बोल्ड, इटॅलिक, कोड ब्लॉक, टेबल आणि याद्यांना समर्थन देते.

एकदा लोड झाल्यावर ऑफलाइन काम करते
89 शब्द · 559 अक्षरे
ease-in
पूर्वावलोकन
<h2 class="text-2xl font-bold text-slate-900 dark:text-slate-50 mt-6 mb-2">Markdown एडिटरमध्ये आपले स्वागत आहे</h2> <p class="my-3 text-slate-700 dark:text-slate-300 leading-relaxed">डावीकडे <strong>Markdown</strong> लिहा, उजवीकडे लाइव्ह प्रीव्ह्यू पाहा.</p> <h3 class="text-xl font-bold text-slate-900 dark:text-slate-50 mt-6 mb-2">वैशिष्ट्ये</h3> <ul class="list-disc list-inside my-3 space-y-0.5 text-slate-700 dark:text-slate-300"><li class="my-0.5"><strong>ठळक</strong>, <em>तिरपे</em>, आणि <del>स्ट्राइकथ्रू</del></li><li class="my-0.5"><code class="bg-slate-100 dark:bg-slate-800 text-pink-600 dark:text-pink-400 rounded px-1 py-0.5 text-[0.85em] font-mono">इनलाइन कोड</code> आणि फेन्स्ड कोड ब्लॉक्स</li><li class="my-0.5"><a href="https://libratool.com" target="_blank" rel="noopener noreferrer" class="text-teal-600 dark:text-teal-400 underline underline-offset-2">लिंक्स</a></li><li class="my-0.5">याद्या, ब्लॉककोट्स, टेबल्स आणि आणखी बरेच काही</li></ul> <h3 class="text-xl font-bold text-slate-900 dark:text-slate-50 mt-6 mb-2">कोड उदाहरण</h3> <pre class="bg-slate-900 dark:bg-slate-950 text-slate-100 rounded-lg p-4 overflow-x-auto text-sm font-mono my-4"><code class="language-javascript">function greet(name) { return `Hello, ${name}!`; }</code></pre> <blockquote class="border-l-4 border-teal-400 dark:border-teal-600 pl-4 my-3 text-slate-600 dark:text-slate-400 italic">Markdown ची निर्मिती John Gruber यांनी 2004 मध्ये वेबसाठी लिहिणे सोपे करण्यासाठी केली.</blockquote> <table class="my-4 w-full text-sm border-collapse"><thead><tr><th class="border border-slate-300 dark:border-slate-600 bg-slate-100 dark:bg-slate-800 px-3 py-2 text-left font-semibold">वैशिष्ट्य</th><th class="border border-slate-300 dark:border-slate-600 bg-slate-100 dark:bg-slate-800 px-3 py-2 text-left font-semibold">समर्थित</th></tr></thead><tbody><tr><td class="border border-slate-200 dark:border-slate-700 px-3 py-2 text-left">मथळे</td><td class="border border-slate-200 dark:border-slate-700 px-3 py-2 text-left">✓</td></tr><tr><td class="border border-slate-200 dark:border-slate-700 px-3 py-2 text-left">याद्या</td><td class="border border-slate-200 dark:border-slate-700 px-3 py-2 text-left">✓</td></tr><tr><td class="border border-slate-200 dark:border-slate-700 px-3 py-2 text-left">तक्ते</td><td class="border border-slate-200 dark:border-slate-700 px-3 py-2 text-left">✓</td></tr><tr><td class="border border-slate-200 dark:border-slate-700 px-3 py-2 text-left">कोड</td><td class="border border-slate-200 dark:border-slate-700 px-3 py-2 text-left">✓</td></tr></tbody></table>
Markdown चीटशीट
# Heading 1H1
**bold**ठळक
*italic*तिरपे
`code`इनलाइन कोड
- itemबुलेट यादी
1. itemक्रमांकित यादी
> quoteब्लॉककोट
[text](url)लिंक
![alt](url)चित्र
---विभाजक

हे कसे कार्य करते

प्रिव्ह्यू साधनात थेट बांधलेल्या गराज-लिहिलेल्या Markdown पार्सरने रेंडर होतो — marked, remark, बाह्य लायब्ररी नाही. तो ब्राउझरमध्ये स्रोताला ओळ-दर-ओळ tokenize करतो, सिंटॅक्सला HTML मध्ये रूपांतरित करत जे नंतर दाखवण्याआधी sanitizer मधून जाते.

  1. 1
    ओळ-दर-ओळ tokenization
    कस्टम renderMarkdown फंक्शन तुमचा स्रोत नवीन ओळींवर विभागतो आणि एका पासमध्ये त्यातून जातो, priority क्रमाने fenced code blocks, headings (H1–H6), blockquotes, ordered आणि unordered lists, GFM tables (column-alignment सह), horizontal rules, आणि paragraphs जुळवत.
  2. 2
    Inline सिंटॅक्स विस्तार
    प्रत्येक गोळा केलेली ओळ किंवा cell नंतर inlineMarkdown द्वारे प्रक्रिया होते, bold (** आणि __), italic (* आणि _), bold-italic (***), strikethrough (~~), inline code (), images (![alt](url)), आणि links ([text](url)) हाताळणारी regex replacements ची साखळी — images links आधी सोडवल्या जातात त्यामुळे ! प्रीफिक्स चुकीने घेतला जात नाही.
  3. 3
    Sanitization आणि remote-resource blocking
    renderer ने तयार केलेला कच्चा HTML <script>, onerror handlers, आणि javascript: hrefs सारखे असुरक्षित tags व attributes काढण्यासाठी sanitizer (sanitize-html) मधून जातो. दुसरा pass (neutralizeRemote) डीफॉल्टने remote इमेज src मूल्यांना placeholders ने बदलतो, तुम्ही opt-in करण्याआधी प्रिव्ह्यू शांतपणे बाह्य सर्व्हर्सशी संपर्क साधण्यापासून रोखत.
  4. 4
    .md किंवा standalone .html म्हणून एक्सपोर्ट करा
    Markdown कॉपी किंवा डाउनलोड केल्याने कच्चा स्रोत मजकूर लिहिला जातो. HTML डाउनलोड केल्याने sanitized आउटपुट स्वतःच्या inline stylesheet सह self-contained दस्तऐवजात गुंडाळले जाते — Tailwind classes फक्त साइटच्या आत काम करतात, त्यामुळे एक्सपोर्ट त्याऐवजी साधे CSS नियम बंडल करते, फाइल कुठेही वाचनीय बनवत.

संबंधित साधने

वारंवार विचारले जाणारे प्रश्न