📝
ຕົວແກ້ໄຂ Markdown ຟຣີ
ຂຽນ ແລະ ຕົວຢ່າງ Markdown ໃນເວລາຈິງ. ຮອງຮັບ heading, ໂຕຫນາ, ໂຕຖ່ຽງ, code block, ຕາຕະລາງ ແລະ ລາຍການ.
ເຮັດວຽກແບບອອບໄລນ໌ໄດ້ຫຼັງໂຫຼດແລ້ວ
70 ຄຳ · 542 ຕົວອັກສອນ
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">ລະຫັດ inline</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)ລິ້ງ
ຮູບພາບ
---ເສັ້ນຂັ້ນ
ການນຳໃຊ້ທົ່ວໄປ
- ຂຽນ API ເອກະສານ ໃນ Markdownຮ່າງ endpoint ສະ, ທະນາຄານ/ອອກກຳ ຕົວະ, ແລະ ຕົວກຳ ຕາຕະລາງ ໃນ Markdown.
- ຂຽນບັນທຶກ Markdownຂຽນບັນທຶກທີ່ມີໂຄງສ້າງໃນ Markdown ທີ່ສາມາດວາງໃສ່ Notion, Obsidian, Bear, ຫຼືແອັບ Markdown ອື່ນໆ.
- ຂຽນ GitHub README ໃນ Markdownຮ່າງແລະສະແດງຕົວກ່ອນ GitHub repository README ດ້ວຍ Markdown ສົ່ວນຈິງ
- ຂຽນເອກະສານທາງວິທະຍາສາດຂຽນ ແລະ ເບິ່ງຕົວຢ່າງເອກະສານ API, wiki ແລະ ຄູ່ມືເຕັກນິກໃນ Markdown ກ່ອນເຜີຍແຜ່.
- ຂຽນບົລັອກໂພສ Markdownຮ່າງບົລັອກໂພສ Markdown ສໍາລັບ Ghost Jekyll Hugo Hashnode ແລະໂພສ Markdown ອື່ນໆ
ມັນເຮັດວຽກແນວໃດ
ຕົວຢ່າງຖືກສະແດງໂດຍຕົວແຍກວິເຄາະ Markdown ທີ່ຂຽນເອງ ແລະ ຝັງໄວ້ໂດຍກົງໃນເຄື່ອງມື — ບໍ່ມີ marked, ບໍ່ມີ remark, ບໍ່ມີໄລບຣາຣີພາຍນອກ. ມັນແຍກໂທເຄັນຂໍ້ມູນຕົ້ນສະບັບແຖວຕໍ່ແຖວໃນບຣາວເຊີ, ປ່ຽນໄວຍາກອນເປັນ HTML ທີ່ຈາກນັ້ນຜ່ານຕົວທຳຄວາມສະອາດກ່ອນສະແດງຜົນ.
- 1ການແຍກໂທເຄັນແຖວຕໍ່ແຖວຟັງຊັນ renderMarkdown ແບບກຳນົດເອງແບ່ງຂໍ້ມູນຕົ້ນສະບັບຂອງທ່ານຕາມແຖວໃໝ່ ແລະ ຍ່າງຜ່ານພວກມັນໃນຜ່ານດຽວ, ຈັບຄູ່ບລັອກໂຄ້ດແບບ fenced, ຫົວຂໍ້ (H1–H6), blockquote, ລາຍການລຳດັບ ແລະ ບໍ່ລຳດັບ, ຕາຕະລາງ GFM (ພ້ອມການຈັດຄໍລຳ), ເສັ້ນຂວາງ, ແລະ ຫຍໍ້ໜ້າຕາມລຳດັບບູລິມະສິດ.
- 2ການຂະຫຍາຍໄວຍາກອນພາຍໃນແຕ່ລະແຖວ ຫຼື ຊ່ອງທີ່ເກັບກຳມາຈາກນັ້ນຖືກປະມວນຜົນໂດຍ inlineMarkdown, ຕ່ອງໂສ້ການແທນທີ່ regex ທີ່ຈັດການໂຕໜາ (** ແລະ __), ໂຕອຽງ (* ແລະ _), ໂຕໜາອຽງ (***), ຂີດຄ້ອມ (~~), ໂຄ້ດ inline (), ຮູບພາບ (), ແລະ ລິ້ງ ([text](url)) — ຮູບພາບຖືກແກ້ໄຂກ່ອນລິ້ງ ດັ່ງນັ້ນ ! ນຳໜ້າຈຶ່ງບໍ່ຖືກກິນຜິດ.
- 3ການທຳຄວາມສະອາດ ແລະ ການບລັອກຊັບພະຍາກອນຈາກໄກHTML ດິບທີ່ຕົວແປງສ້າງຖືກສົ່ງຜ່ານຕົວທຳຄວາມສະອາດ (sanitize-html) ເພື່ອລົບແທັກ ແລະ ຄຸນສົມບັດທີ່ບໍ່ປອດໄພ ເຊັ່ນ <script>, onerror handlers, ແລະ javascript: hrefs. ຜ່ານທີສອງ (neutralizeRemote) ຈະແທນຄ່າ src ຮູບພາບຈາກໄກດ້ວຍຕົວແທນໂດຍປົກກະຕິ, ປ້ອງກັນຕົວຢ່າງຈາກການເອີ້ນຫາເຊີບເວີພາຍນອກແບບງຽບໆກ່ອນທ່ານຈະເລືອກອະນຸຍາດ.
- 4ສົ່ງອອກເປັນ .md ຫຼື .html ດ້ວຍຕົນເອງການຄັດລອກ ຫຼື ດາວໂຫຼດ Markdown ຈະຂຽນຂໍ້ຄວາມຕົ້ນສະບັບດິບ. ການດາວໂຫຼດ HTML ຫໍ່ຜົນລັບທີ່ທຳຄວາມສະອາດແລ້ວໄວ້ໃນເອກະສານດ້ວຍຕົນເອງພ້ອມ stylesheet ໃນຕົວມັນເອງ — ຄລາສ Tailwind ເຮັດວຽກສະເພາະພາຍໃນເວັບໄຊເທົ່ານັ້ນ, ດັ່ງນັ້ນການສົ່ງອອກຈຶ່ງລວມກົດ CSS ທຳມະດາແທນ, ເຮັດໃຫ້ໄຟລ໌ອ່ານໄດ້ທຸກບ່ອນ.
ເຄື່ອງມືທີ່ກ່ຽວຂ້ອງ
ຕົວແປງ HTML ເປັນ Markdown
ແປງ HTML ເປັນ Markdown ສະອາດ. ຈັດການ heading, list, link, ຮູບ, code block, ຕາຕະລາງ ແລະ blockquote. ເໝາະສຳລັບຍ້າຍເນື້ອຫາຈາກ CMS.
ລອງໃຊ້
ຕົວແປງ Markdown ເປັນ HTML
ແປງ Markdown ເປັນ HTML ສະອາດ ພ້ອມຕົວຢ່າງ live. ໃຊ້ source view ເພື່ອຄັດລອກ HTML ສຳລັບ blog, CMS ຫຼື template email.
ລອງໃຊ້
ຕົວແກ້ໄຂ Mermaid Diagram
ຂຽນ flowchart, sequence diagram, Gantt chart ແລະ ອື່ນໆ ດ້ວຍ Mermaid syntax ພ້ອມຕົວຢ່າງ live. ສົ່ງອອກເປັນ SVG ຫຼື PNG. ເຮັດວຽກທັງໝົດໃນບຣາວເຊີ.
ລອງໃຊ້