Softonic

เครื่องแปลง HTML เป็น Markdown

ขั้นตอน 1 / 2
แปลงเป็น Markdown

การย้ายบทความจาก WordPress ไปยัง Hugo การจัดเก็บหน้าใน Confluence เป็นโน้ต หรือการปรับปรุงอีเมลที่ใช้ข้อความแบบริชเท็กซ์สำหรับวิกิเอกสาร ล้วนหมายถึงการแปลงข้อมูลจาก HTML เป็น Markdown โปรแกรมแปลงนี้จะจับคู่หัวเรื่อง ย่อหน้า รายการ ลิงก์ รูปภาพ และบล็อกโค้ดกับรูปแบบ Markdown ที่เทียบเท่ากัน เพื่อให้เนื้อหายังคงมีโครงสร้างเดิมโดยไม่มีความยุ่งยากจาก HTML

วิธีแปลง HTML เป็น Markdown

  1. 1

    วาง HTML

    ไม่ว่าจะเป็นหน้าเต็ม เนื้อหาอีเมลแบบ rich text หรือข้อความสั้น ๆ ก็ตาม ทั้งหมดจะถูกวิเคราะห์

  2. 2

    แปลง

    หัวเรื่อง ย่อหน้า รายการ ลิงก์ รูปภาพ และบล็อกโค้ดจะถูกแปลงเป็น Markdown

  3. 3

    คัดลอก Markdown

    นำผลลัพธ์ไปวางใน Obsidian, Hugo, Jekyll, Notion หรือที่เก็บ Git

แปลง HTML เป็น Markdown

ตัวแปลงจะเดินไปตามโครงสร้าง DOM และสร้าง Markdown สำหรับแต่ละองค์ประกอบที่รู้จัก แท็กห่อหุ้มเช่น <div>, <span>, <section> และ <article> จะถูกตัดออก และเนื้อหาภายในจะถูกเก็บไว้ที่ระดับการซ้อนที่ถูกต้อง

การจับคู่องค์ประกอบ

HTML ผลลัพธ์ Markdown
<h1> ถึง <h6> หัวเรื่อง # ถึง ######
<strong>, <b> **text**
<em>, <i> *text*
<code> แบบอินไลน์ `text`
<pre><code> บล็อกล้อมด้วยแบ็กทิกสามตัว พร้อมระบุภาษาหากตั้งค่าไว้
<a href> [text](url)
<img src alt> ![alt](src)
<ul><li> - item
<ol><li> 1. item
<blockquote> > quote
<hr> ---

สิ่งที่เกิดขึ้นกับส่วนที่เหลือ

Markdown ไม่สามารถแสดงทุกองค์ประกอบของ HTML ได้ แท็กที่ไม่มีรูปแบบเทียบเท่าใน Markdown จะถูกตัดออก และเหลือไว้เพียงเนื้อหาข้อความเท่านั้น:

  • <table>: ข้อความในเซลล์ยังคงอยู่ แต่โครงสร้างตารางจะหายไป ใช้ตัวแปลงที่รองรับตารางเมื่อโครงสร้างมีความสำคัญ
  • <del>, <u> และสไตล์อินไลน์อื่น ๆ: ข้อความยังคงอยู่ แต่รูปแบบการจัดแต่งจะหายไป
  • <video>, <audio>, <iframe>: องค์ประกอบที่ฝังเหล่านี้ไม่ให้ผลลัพธ์ที่แสดงใน Markdown ได้
  • <details> / <summary>: ข้อความภายในยังคงอยู่ แต่วิดเจ็ตแบบเปิด-ปิดจะหายไป

สำหรับการแปลงไป-กลับแบบไม่สูญเสียข้อมูล ควรแปลงจากไฟล์ Markdown ต้นฉบับ แทนที่จะแปลงจาก HTML ที่แสดงผลแล้ว

คำถามที่พบบ่อย

ตัวห่อ <div> และ <span> แบบธรรมดาจะถูกตัดออก และเนื้อหาภายในจะถูกแสดงที่ระดับการซ้อนที่ถูกต้อง ส่วน div ที่ใช้เพื่อการจัดวางเท่านั้นจะมองไม่เห็นใน Markdown ซึ่งโดยทั่วไปก็คือสิ่งที่คุณต้องการสำหรับเอกสาร

ใช่ <pre><code class="language-js"> จะกลายเป็นบล็อกแบบล้อมกรอบ โดยใช้ js เป็นคำใบ้ภาษา ส่วนบล็อกโค้ดแบบเยื้องที่ไม่มีภาษากำกับจะกลับไปเป็นบล็อกแบบล้อมกรอบธรรมดา

ข้อความในเซลล์ของ <table> ยังคงอยู่ แต่โครงสร้างตารางเองจะหายไป: แถวและคอลัมน์ไม่ได้รับการเก็บรักษาไว้ โปรดใช้ตัวแปลงที่รองรับตารางเมื่อโครงสร้างมีความสำคัญ

เกือบทั้งหมด แต่การจัดรูปแบบที่ละเอียดอ่อน เช่น ลิงก์แบบอ้างอิง การขึ้นบรรทัดใหม่แบบบังคับด้วยช่องว่างสองตัวท้ายบรรทัด และเครื่องหมายเน้นข้อความแบบอื่น อาจถูกปรับให้เป็นมาตรฐานได้ หากต้องการแปลงไป-กลับโดยไม่สูญเสียข้อมูล ควรเก็บ Markdown ฉบับเดิมไว้

เครื่องมือที่เกี่ยวข้อง

ตัวสร้างการตั้งค่า Webpack

สร้าง webpack.config.js สำหรับ webpack 5 ทั้งแบบ JavaScript ล้วน React หรือ Vue พร้อม TypeScript, Babel, CSS หรือ Sass, รูปภาพ, HtmlWebpackPlugin, เซิร์ฟเวอร์สำหรับพัฒนา และคำสั่ง npm install

เครื่องแปลงฐานตัวเลข

แปลงตัวเลขระหว่างฐานสอง ฐานแปด ฐานสิบ ฐานสิบหก และฐานกำหนดเองตั้งแต่ 2 ถึง 36 พร้อมการแยกค่าประจำหลัก

ตัวแปลง Timestamp

แปลง timestamp ของ Unix ในหน่วยวินาทีหรือมิลลิวินาทีเป็นวันที่ที่อ่านง่ายในเขตเวลา UTC และเขตเวลาหลัก และแปลงวันที่กลับเป็นค่า epoch

เครื่องสุ่มที่อยู่

สร้างระเบียนคล้ายที่อยู่ 1–20 รายการสำหรับแบบจำลองและการทดสอบ ด้วยรูปแบบประเทศแบบย่อ

ตารางอ้างอิง ASCII

ตาราง ASCII ครบตั้งแต่ 0 ถึง 127 พร้อมค่าเลขฐานสิบ ฐานสิบหก ฐานแปด ฐานสอง และรูปแบบการอ้างอิงอักขระแบบตัวเลขของ HTML รวม NUL, LF และ DEL

อ้างอิงตัวอักษร HTML

รายการที่สามารถค้นหาได้ขององค์ประกอบ HTML พร้อมรหัสชื่อและรหัสตัวเลข รวมถึงฟังก์ชันสำเนาด้วยคลิกเดียวสำหรับตัวอักษรพิเศษและสัญลักษณ์ต่างๆ

เครื่องมือนี้มีให้บริการในภาษาอื่น