ຂ້ອຍຈະແປງ HTML ເປັນ Markdown ໄດ້ແນວໃດ?

ວາງ HTML ຂອງທ່ານລົງໃນຊ່ອງ HTML ນຳເຂົ້າ, ຫຼື ໃຊ້ ໂຫລດຕົວຢ່າງ. ຜົນ Markdown ຈະອັບເດດໃນຂະນະທີ່ທ່ານພິມ. ກົດ ສຳເນົາ, ຫຼື ດາວໂຫຼດ .md ເພື່ອບັນທຶກຜົນໄດ້ຮັບເປັນໄຟລ໌.

ຂ້ອຍສາມາດວາງຂໍ້ຄວາມໂດຍກົງຈາກໜ້າເວັບ, Word ຫຼື Google Docs ໄດ້ບໍ່?

ໄດ້. ເມື່ອທ່ານວາງ rich text, ເຄື່ອງມືຈະກວດຈັບ HTML ຂອງມັນໂດຍອັດຕະໂນມັດ, ດັ່ງນັ້ນທ່ານຈຶ່ງບໍ່ຈໍາເປັນຕ້ອງເບິ່ງ source code ກ່ອນ. ຜົນ Markdown ຈະສະແດງຂຶ້ນຢູ່ເບື້ອງຂວາ.

ອົງປະກອບ HTML ໃດແດ່ທີ່ຖືກແປງ?

ຫົວຂໍ້, ຫຍໍ້ໜ້າ, ລິ້ງ, ຮູບພາບ, ຕົວໜາ, ຕົວອຽງ, ຂີດຂ້າ, ລາຍການແບບມີລໍາດັບ ແລະ ບໍ່ມີລໍາດັບ, blockquotes, code blocks, ເສັ້ນຂັ້ນຕາມແນວນອນ ແລະ ຕາຕະລາງພື້ນຖານ ຈະຖືກປ່ຽນເປັນ Markdown. ສ່ວນຕາຕະລາງຈະຖືກແປງເປັນ pipe tables ໂດຍໃຫ້ແຖວທຳອິດເປັນຫົວຂໍ້.

ເປັນຫຍັງການຈັດຮູບແບບ, ສະຄຣິບ ຫຼື ຄຸນລັກສະນະ class ຈຶ່ງຫາຍໄປ?

ເນື່ອງຈາກ Markdown ບໍ່ມີສິ່ງທີ່ທຽບເທົ່າກັບພວກມັນ, ຮູບແບບ inline styles, classes, ສະຄຣິບ ແລະ ເນື້ອຫາໃນສ່ວນ head ຈຶ່ງຖືກຕັດອອກ. ຕາຕະລາງທີ່ມີຄວາມຊັບຊ້ອນກໍຈະຖືກປັບໃຫ້ງ່າຍດາຍຂຶ້ນ, ດັ່ງນັ້ນຄວນກວດສອບຜົນໄດ້ຮັບກ່ອນນຳໄປເຜີຍແຜ່.

HTML ຂອງຂ້ອຍຖືກສົ່ງໄປຍັງເຊີບເວີເພື່ອແປງບໍ່?

ບໍ່. ການແປງເຮັດວຽກຢູ່ເທິງບຣາວເຊີຂອງທ່ານໂດຍກົງດ້ວຍລະຫັດທີ່ຂຽນຂຶ້ນເອງ ແລະ ບໍ່ມີໄລບຣາຣີພາຍນອກ, ດັ່ງນັ້ນ HTML ຈຶ່ງຍັງຄົງຢູ່ໃນອຸປະກອນຂອງທ່ານ. ມັນບໍ່ໄດ້ດຶງຮູບພາບມາ, ດັ່ງນັ້ນລິ້ງຮູບພາບຈຶ່ງຍັງຄົງຊີ້ໄປຫາໂຮສຕ໌ຕົ້ນສະບັບຄືເກົ່າ.

ຟຣີແທ້ບໍ?

ແມ່ນແລ້ວ. ທຸກເຄື່ອງມືແມ່ນໃຊ້ຟຣີ, ບໍ່ຕ້ອງມີບັນຊີ ແລະ ບໍ່ຕ້ອງໃຊ້ບັດເຄຣດິດ. ການເຮັດວຽກທັງໝົດແມ່ນດຳເນີນຢູ່ໃນອຸປະກອນຂອງທ່ານແທນທີ່ຈະຢູ່ໃນເຊີບເວີຂອງພວກເຮົາ, ເຊິ່ງເຮັດໃຫ້ເຮົາສາມາດໃຫ້ບໍລິການໄດ້ຟຣີ.

ມັນເຮັດວຽກຢູ່ໃນມືຖືບໍ?

ໄດ້. ມັນເຮັດວຽກໃນບຣາວເຊີມືຖືລຸ້ນໃໝ່ເທິງ iOS ແລະ Android ໂດຍບໍ່ຕ້ອງຕິດຕັ້ງຫຍັງ.

📝

ຕົວແປງ HTML ເປັນ Markdown ຟຣີ

ແປງ HTML ເປັນ Markdown ສະອາດ. ຈັດການ heading, list, link, ຮູບ, code block, ຕາຕະລາງ ແລະ blockquote. ເໝາະສຳລັບຍ້າຍເນື້ອຫາຈາກ CMS.

ເຮັດວຽກໃນບຣາວເຊີບໍ່ຕ້ອງລົງທະບຽນ, ບໍ່ມີໜ້າຕ່າງປັອບອັບບໍ່ຈໍາເປັນຕ້ອງເຂົ້າສູ່ລະບົບຟຣີຕະຫຼອດໄປ

ເຮັດວຽກແບບອອບໄລນ໌ໄດ້ຫຼັງໂຫຼດແລ້ວ

ວາງ HTML ທາງຊ້າຍ; Markdown ທີ່ສະອາດຈະປາກົດທາງຂວາ. Markdown ງ່າຍກວ່າ HTML ດັ່ງນັ້ນ style, script, ແລະ ຕາລາງສລັບສັບຊ້ອນຈະຖືກໃລ່ງ່າຍ ຫຼື ລຶບຖິ້ມ.

HTML ນຳເຂົ້າ

ເຄັດລັບ: ວາງຂໍ້ຄວາມ rich text ທີ່ສຳເນົາຈາກໜ້າເວັບ, Word ຫຼື Google Docs - HTML ຂອງມັນຈະຖືກຈັບອັດຕະໂນມັດ.

ຜົນ Markdown

ຜົນ Markdown ຈະປາກົດທີ່ນີ້…

ການນຳໃຊ້ທົ່ວໄປ

ຍ້າຍເນື້ອຫາ Blog ໄປ Markdownແປງໂພສຕ໌ WordPress, Medium ຫຼື CMS ອື່ນໆ ເກົ່າ ເປັນ Markdown ສຳລັບ static site generator.
ປ່ຽນເນື້ອຫາອີເມລ ໄປ Markdownດຶງຂໍ້ຄວາມຈາກອີເມວ HTML ຫຼື ບົດຄວາມເວັບ ແລ້ວແປງເປັນ Markdown ທຳມະດາສຳລັບແອັບຈົດບັນທຶກ.
ປ່ຽນເອກະສານ HTML ໄປ Markdownຍ້າຍເອກະສານ HTML ເກົ່າໄປສູ່ລະບົບເອກະສານທີ່ອີງໃສ່ Markdown (Docusaurus, GitBook, MkDocs).
ການລາງວາງລະບົບ CMSທຳຄວາມສະອາດ HTML ທີ່ວຸ້ນວາຍທີ່ສົ່ງອອກຈາກ CMS ແລະ ປ່ຽນເປັນ Markdown ທີ່ສະໜັບສະໜູນ ຮຸ່ງຮົວ.
ກະກຽມເນື້ອຫາ HTML ສຳລັບ LLM Promptsປ່ຽນເນື້ອຫາ HTML ເປັນ Markdown ຢ່າງບໍ່ປະສົມສ່ວນສຳລັບຜ່ວນ ChatGPT, Claude, ຫລື LLM ອື່ນໆ.

ມັນເຮັດວຽກແນວໃດ

ຕົວແປງນີ້ຖືກສ້າງອ້ອມຮອບການປະມວນຜົນ regex ທີ່ຂຽນເອງແບບບໍ່ອີງໄລບຣາຣີ — ບໍ່ມີໄລບຣາຣີພາຍນອກຖືກນຳເຂົ້າ. ການແປງທັງໝົດເຮັດວຽກພາຍໃນບຣາວເຊີຂອງທ່ານຜ່ານການເອີ້ນ React useMemo, ອັບເດດຜົນລັບແບບສົດໃນຂະນະທີ່ພິມ.

1
ການກວດຫາການວາງດັກຈັບຂໍ້ຄວາມທີ່ມີຮູບແບບ
ຕົວຈັດການ ClipboardEvent ອ່ານຮູບແບບ text/html ຈາກຄລິບບອດກ່ອນທີ່ບຣາວເຊີຈະວາງຂໍ້ຄວາມທຳມະດາ. ນີ້ໝາຍຄວາມວ່າການວາງໂດຍກົງຈາກໜ້າເວັບ, Google Docs, ຫຼື Word ຈະຈັບມາກອັບ HTML ດິບໂດຍອັດຕະໂນມັດ — ທ່ານບໍ່ຈຳເປັນຕ້ອງເບິ່ງແຫຼ່ງທີ່ມາກ່ອນ.
2
ຂັ້ນຕອນ regex ຫຼາຍຊັ້ນລົບ ແລະ ແປງແທັກ
ຕົວແປງເຮັດວຽກຕາມລຳດັບຢ່າງເຄັ່ງຄັດຂອງຂັ້ນຕອນ regex: ມັນລົບ <head>, <script>, <style>, ແລະ ຄຳເຫັນ HTML ກ່ອນ, ຈາກນັ້ນເກັບບລັອກໂຄ້ດແບບ fenced ໄວ້ຫຼັງຕົວແທນ null-byte ເພື່ອປ້ອງກັນຂັ້ນຕອນຕໍ່ໄປບໍ່ໃຫ້ທຳລາຍເນື້ອຫາໂຄ້ດ. ຂັ້ນຕອນຕໍ່ໄປຈັດການຫົວຂໍ້ (h1–h6), blockquote, ຮູບພາບ, ລິ້ງ, ໂຕໜາ/ໂຕອຽງ/ຂີດຄ້ອມ, ລາຍການລຳດັບ ແລະ ບໍ່ລຳດັບ, ແລະ ຕາຕະລາງ pipe GFM ພື້ນຖານ — ແຕ່ລະຂັ້ນຕອນເປົ້າໝາຍຄອບຄົວແທັກສະເພາະ.
3
ການຖອດລະຫັດ entity ແລະ ການປັບຊ່ອງຫວ່າງມາດຕະຖານ
ຫຼັງຈາກແທັກທັງໝົດຖືກລົບແລ້ວ, ຟັງຊັນ decodeEntities ສະເພາະຈະແກ້ໄຂ named entity (&, <, ອື່ນໆ) ບວກກັບການອ້າງອິງຕົວອັກສອນເລກຖານ 10 ແລະ 16 (', ') ໂດຍໃຊ້ String.fromCodePoint. ໂຄດພອຍທີ່ຜິດຮູບແບບ ຫຼື ນອກຂອບເຂດຈະຖືກແທນທີ່ດ້ວຍຕົວອັກສອນແທນ Unicode ແທນທີ່ຈະ throw. ຊ່ອງຫວ່າງທ້າຍ, ແຖວຫວ່າງທີ່ຕໍ່ເນື່ອງ, ແລະ ຊ່ອງຫວ່າງເກີນຈາກນັ້ນຈະຖືກປັບມາດຕະຖານ.
4
ຊ່ອງໂຄ້ດທີ່ໄດ້ຮັບການປ້ອງກັນຖືກຄືນສະພາບ
ລະບົບຕົວແທນ (ດັດຊະນີແບ່ງດ້ວຍ null-byte) ຖືກຄືນສະພາບເປັນອັນສຸດທ້າຍ, ຫຼັງຈາກການລົບແທັກ, ການຖອດລະຫັດ, ແລະ ການບີບອັດຊ່ອງຫວ່າງສຳເລັດແລ້ວ. ນີ້ປ້ອງກັນລຳດັບ entity ພາຍໃນໂຕດ້ານໂຄ້ດຈາກການຖືກຖອດລະຫັດສອງເທື່ອ — ຂໍ້ຜິດພາດຖອດລະຫັດຊ້ຳທົ່ວໄປໃນຕົວແປງ HTML-ໄປ-Markdown ແບບງ່າຍໆ.