အဓိကအကြောင်းအရာသို့ ကျော်သွားရန်

အခမဲ့ Markdown တည်းဖြတ်စက်

Markdown ကို real time တွင် ရေးကာ preview ကြည့်ပါ။ heading, bold, italic, code block, table နှင့် list ပံ့ပိုးသည်。

Load ပြီးသည်နှင့် offline အလုပ်လုပ်သည်
73 စကားလုံးများ · 566 အက္ခရာများ
Markdown
အစမ်းကြည့်
<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 ဖြင့် API စာတမ်းရေးပါMarkdown ရှိ endpoint ကျေးဇူးများ၊ တောင်းဆိုချက်/အမြန်ဆိုင်ရာ ဥပမာများ၊ နှင့် parameter ဇယားများ ပြင်ဆင်သည့်အုပ်စုံများ ရေးသားပါ။
  • မာကဒောင်း မှတ်စုများ ရေးသားခြင်းNotion၊ Obsidian၊ Bear သို့မဟုတ် အခြား Markdown အက်ပ်ထဲသို့ ကူးအင်းနိုင်သည့် ဖွဲ့စည်းတည်ဆောက်ထားသည့် မှတ်စုများကို Markdown တွင် ရေးသားပါ။
  • GitHub README Markdown ႏုံးႏုံးသီးမုံးတြင္ README မီးဖုတ္ႏုံးႏုံးႀကီးႀကီးအုပ္စုႀကီး
  • အီသုံးႏုံးစာမ်ား ႏုံးႏုံးAPI မီးဖုတ္ၸုံး ႏုံးႏုံးႏုံးႏုံးထုံးကုံးႀကီးႀကီးႀကီးႀကီးႏုံးႏုံး
  • Blog Post Markdown ႏုံးႏုံးGhost Jekyll Hugo Hashnode ႏုံးႏုံးႀကီး Markdown ႏုံးႏုံး

မည်သို့ အလုပ်လုပ်သည်

ကြိုကြားမှုကို ကိရိယာထဲသို့ တိုက်ရိုက် တည်ဆောက်ထားသော ကိုယ်တိုင်ရေးထားသော Markdown parser တစ်ခုက render လုပ်ပေးသည် — marked, remark, ပြင်ပ library မပါဝင်ပါ။ ၎င်းသည် source ကို browser ထဲတွင် line-by-line tokenize လုပ်ပြီး syntax ကို HTML သို့ ပြောင်းလဲကာ ပြသမီ sanitizer တစ်ခုကို ဖြတ်သန်းစေသည်။

  1. 1
    စာကြောင်းတစ်ကြောင်းချင်း တိုကင်ခွဲခြင်း
    Custom renderMarkdown function သည် သင့် source ကို newline ပေါ် ခွဲပြီး fenced code block၊ heading (H1–H6)၊ blockquote၊ ordered နှင့် unordered list၊ GFM table (column-alignment ပါ)၊ horizontal rule နှင့် paragraph များကို priority order ဖြင့် single pass တွင် လျှောက်သည်။
  2. 2
    Inline syntax ချဲ့ထုတ်ခြင်း
    စုစည်းထားသော line သို့မဟုတ် cell တစ်ခုစီကို ထို့နောက် inlineMarkdown ဖြင့် လုပ်ဆောင်သည်၊ ၎င်းသည် bold (** and __), italic (* and _), bold-italic (***), strikethrough (~~), inline code (), image ((![alt](url))), နှင့် link ([text](url)) ကို ကိုင်တွယ်သော regex replacement ကွင်းဆက်ဖြစ်သည် — ! prefix ကို မှားယွင်းစွာ မသုံးစေရန် image များကို link များမတိုင်မီ ဖြေရှင်းသည်။
  3. 3
    Sanitization နှင့် remote-resource ပိတ်ဆို့ခြင်း
    Renderer ၏ raw HTML ကို <script>, onerror handler များနှင့် javascript: href များကဲ့သို့ ဘေးကင်းမှုမရှိသော tag နှင့် attribute များကို ဖယ်ရှားရန် sanitizer (sanitize-html) တစ်ခုကို ဖြတ်သန်းစေသည်။ ဒုတိယ pass (neutralizeRemote) တစ်ခုသည် remote image src တန်ဖိုးများကို ပုံသေအားဖြင့် placeholder များဖြင့် အစားထိုးသည်၊ သင် opt-in မလုပ်မီ ကြိုကြားမှုသည် ပြင်ပ server များထံ တိတ်တဆိတ် ဆက်သွယ်ခြင်းကို ကာကွယ်သည်။
  4. 4
    Export as .md သို့မဟုတ် standalone .html
    Markdown ကို copy ယူခြင်း သို့မဟုတ် download ခြင်းသည် raw source စာသားကို ရေးသည်။ HTML ကို download ခြင်းသည် sanitize လုပ်ထားသော output ကို ၎င်း၏ ကိုယ်ပိုင် inline stylesheet ပါသော self-contained document တစ်ခုဖြင့် ခြုံသည် — Tailwind class များသည် site ထဲတွင်သာ အလုပ်လုပ်သဖြင့် export သည် ရိုးရိုး CSS rule များကို အစား ပေါင်းစည်းသည်၊ ဖိုင်ကို ဘယ်နေရာတွင်မဆို ဖတ်နိုင်စေသည်။

ဆက်နွှယ်သော ကိရိယာများ

မကြာခဏ မေးလေ့မေးထရှိသော မေးခွန်းများ