📝
កម្មវិធីកែ Markdown ឥតគិតថ្លៃ
សរសេរ និងមើលជាមុន Markdown ក្នុងពេលវេលាជាក់ស្ដែង។ គាំទ្រ heading, bold, italic, code block, table, និងបញ្ជី។
ធ្វើការក្រៅបណ្តាញនៅពេលបានផ្ទុករួច
71 ពាក្យ · 570 តួអក្សរ
Markdown
មើលជាមុន
<h2 class="text-2xl font-bold text-slate-900 dark:text-slate-50 mt-6 mb-2">ស្វាគមន៍មកកាន់ Markdown Editor</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> និងប្លុកកូដ fenced</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)តំណភ្ជាប់
រូបភាព
---បន្ទាត់ខណ្ឌចែក
ការប្រើប្រាស់ទូទៅ
- សរសេរ API Documentation នៅក្នុង Markdownស្នើណាដូច endpoint ស្មុគមរ request/response ឧទាហរណ៍ និង parameter តារាង នៅក្នុង Markdown។
- សរសេរចំណាំ Markdownសរសេរចំណាំដែលមានរចនាសម្ព័ន្ធក្នុង Markdown ដែលអាចចូលទៅក្នុង Notion, Obsidian, Bear ឬ Markdown app ផ្សេងទៀត។
- សរសេរ GitHub README ក្នុង Markdownព្រាង និងមើលមុនឯកសារ GitHub repository README របស់អ្នក ដោយលទ្ធផលផ្ទាល់ខ្លួន Markdown rendering
- សរសេរឯកសារបច្ចេកទេសសរសេរ និងមើលមុនឯកសារ API docs វិគីយុគ្គលក្ខណ៍ និងមគ្គុទ្ធិបច្ចេកទេសក្នុង Markdown មុនលេងផ្សាយ។
- សរសេរលិខិតឈានក្នុង Markdownព្រាងលិខិតឈានក្នុង Markdown សម្រាប់ Ghost Jekyll Hugo Hashnode និងឧបករណ៍ផ្សាយផ្សេងទៀតដែលផ្អែកលើ Markdown
វាដំណើរការដោយរបៀបណា
ការមើលជាមុនត្រូវបានបង្ហាញដោយកម្មវិធីញែក Markdown ដែលសរសេរដោយដៃ ដែលបានបញ្ចូលក្នុងឧបករណ៍ដោយផ្ទាល់ — គ្មាន marked គ្មាន remark គ្មានបណ្ណាល័យខាងក្រៅ។ វាបំបែកប្រភពជាបន្ទាត់ម្តងមួយៗនៅក្នុងកម្មវិធីរុករក ដោយបំប្លែងវាក្យសម្ព័ន្ធទៅជា HTML ដែលបន្ទាប់មកឆ្លងកាត់ការសម្អាតមុនពេលបង្ហាញ។
- 1ការញែកជាតូខិន (tokenization) បន្ទាត់ម្តងៗអនុគមន៍ renderMarkdown ផ្ទាល់ខ្លួនបំបែកប្រភពរបស់អ្នកតាមបន្ទាត់ថ្មី ហើយដើរឆ្លងកាត់ពួកវាក្នុងជំហានតែមួយ ដោយផ្គូផ្គងប្លុកកូដដែលមានរបង (fenced) ក្បាលអត្ថបទ (H1–H6) សម្រង់ បញ្ជីតាមលេខ និងគ្មានលេខ តារាង GFM (ជាមួយការតម្រឹមជួរឈរ) បន្ទាត់ផ្តេក និងកថាខណ្ឌតាមលំដាប់អាទិភាព។
- 2ការពង្រីកវាក្យសម្ព័ន្ធក្នុងបន្ទាត់រាល់បន្ទាត់ ឬក្រឡាដែលប្រមូលបានត្រូវបានដំណើរការដោយ inlineMarkdown ដែលជាខ្សែសង្វាក់នៃការជំនួស regex ដោះស្រាយអក្សរដិត (** និង __) អក្សរទ្រេត (* និង _) អក្សរដិត-ទ្រេត (***) ដិតបន្ទាត់ (~~) កូដក្នុងបន្ទាត់ () រូបភាព () និងតំណភ្ជាប់ ([text](url)) — រូបភាពត្រូវបានដោះស្រាយមុនតំណភ្ជាប់ ដូច្នេះសញ្ញា ! មិនត្រូវបានយកទៅប្រើខុសឡើយ។
- 3ការសម្អាត និងការទប់ស្កាត់ធនធានពីចម្ងាយHTML ដើមដែលបង្កើតដោយកម្មវិធីបង្ហាញត្រូវបានឆ្លងកាត់កម្មវិធីសម្អាត (sanitize-html) ដើម្បីលុបស្លាក និងលក្ខណៈសម្បត្តិមិនមានសុវត្ថិភាព ដូចជា <script> ដំណាក់ការ onerror និង javascript: hrefs។ ជំហានទីពីរ (neutralizeRemote) ជំនួសតម្លៃ src រូបភាពពីចម្ងាយដោយកន្លែងដាក់ (placeholder) តាមលំនាំដើម ដោយការពារកុំឲ្យការមើលជាមុនទាក់ទងទៅម៉ាស៊ីនមេខាងក្រៅដោយស្ងាត់ៗ មុនពេលអ្នកជ្រើសរើសអនុញ្ញាត។
- 4នាំចេញជា .md ឬ .html ដាច់ដោយឡែកការចម្លង ឬទាញយក Markdown សរសេរអត្ថបទប្រភពដើម។ ការទាញយក HTML រុំលទ្ធផលដែលបានសម្អាតនៅក្នុងឯកសារពេញលេញដែលមានសន្លឹករចនាប័ទ្មក្នុងខ្លួន — ថ្នាក់ Tailwind ដំណើរការតែក្នុងគេហទំព័រប៉ុណ្ណោះ ដូច្នេះការនាំចេញរួមបញ្ចូលក្បួន CSS ធម្មតាជំនួសវិញ ធ្វើឲ្យឯកសារអានបានគ្រប់ទីកន្លែង។
ឧបករណ៍ពាក់ព័ន្ធ
HTML ទៅ Markdown Converter
បំប្លែង HTML ទៅ Markdown ស្អាត។ ដោះស្រាយ heading, list, link, image, code block, table, និង blockquote។ ល្អឥតខ្ចោះសម្រាប់ការផ្លាស់ប្ដូរខ្លឹមសារពី CMS។
សាកល្បង
Markdown ទៅ HTML Converter
បំប្លែង Markdown ទៅ HTML ស្អាតជាមួយការមើលជាមុនផ្ទាល់។ ប្រើ source view ដើម្បីចម្លង HTML ត្រៀម paste សម្រាប់ blog, CMS, ឬ template អ៊ីមែល។
សាកល្បង
កម្មវិធីកែ Mermaid Diagram
សរសេរ flowchart, sequence diagram, Gantt chart, និងច្រើនទៀតក្នុង Mermaid syntax ជាមួយការមើលជាមុនផ្ទាល់។ នាំចេញជា SVG ឬ PNG។ ដំណើរការទាំងស្រុងក្នុងកម្មវិធីរុករករបស់អ្នក។
សាកល្បង