โปรแกรมแปลงจาก Markdown เป็น HTML
นำข้อความจาก Markdown มาแปลงให้เป็น HTML ที่มีโครงสร้างชัดเจนและตรงตามความหมาย โดยเปลี่ยนรหัส <h1> เป็น <h6>, <ul>, <ol>, <table>, <pre><code> พร้อมการแสดงไวยากรณ์ที่เน้นไว้ และ <blockquote> รวมถึง URL ที่เชื่อมโยงอัตโนมัติ คุณสามารถเลือกใช้เอกสารฉบับเต็ม (ซึ่งประกอบด้วย <html>, <head> และสไลด์ลักษณะขั้นพื้นฐาน) หรือเพียงส่วนเนื้อหาหลัก (body content) ขึ้นอยู่กับว่าจะนำไปใช้ในหน้าเว็บเดิมหรือสร้างเป็นไฟล์แยกต่างหาก
วิธีแปลง Markdown เป็น HTML
-
1
วาง Markdown
เอกสารฉบับเต็มหรือส่วนหนึ่งของเอกสาร หากมีส่วนนำในรูปแบบ YAML จะถูกลบออกไปโดยอัตโนมัติ
-
2
เลือกชุดขยาย
ใช้เฉพาะ CommonMark เท่านั้น หรือ GFM (ตาราง รายการงาน และลิงก์อัตโนมัติ) หรือ GFM ร่วมกับสูตรคณิตศาสตร์
-
3
เลือกรูปแบบการแสดงผล
ชิ้นส่วนสำหรับการฝัง หรือเอกสาร HTML ฉบับเต็มที่ประกอบด้วยส่วนหัวและโค้ด CSS เพียงขั้นพื้นฐาน
-
4
คัดลอกหรือดาวน์โหลด HTML
ดึงข้อมูล HTML มาในรูปแบบข้อความ หรือบันทึกเป็นไฟล์ `.html`
ตารางการแมป
| Markdown | HTML |
|---|---|
# Heading 1 |
<h1>Heading 1</h1> |
**bold** |
<strong>bold</strong> |
*italic* |
<em>italic</em> |
`code` |
<code>code</code> |
| โค้ดที่ถูกล้อมด้วยเฟนซ์โดยใช้ภาษา | <pre><code class="language-js"> |
- item |
<ul><li>item</li></ul> |
1. item |
<ol><li>item</li></ol> |
> quote |
<blockquote><p>quote</p></blockquote> |
[text](url) |
<a href="url">text</a> |
 |
<img src="src" alt="alt"> |
--- |
<hr> |
| ตาราง GFM | <table><thead>...</thead>... |
- [x] done |
<input type="checkbox" checked disabled> |
การเน้นข้อความในสังกัดโค้ด
บล็อกโค้ดที่ถูกล้อมรอบด้วยรั้วกับคำแนะนำภาษาจะมีแอตทริบิวต์ class="language-xxx" บนองค์ประกอบ <code> นอกจากนี้ เครื่องแปลงยังจะแทรกผลลัพธ์ที่ผ่านการแยกสัญลักษณ์จาก highlight.js เข้าไปโดยตรงเมื่อคุณเปิด/ปิดโหมด “pre-highlighted” ซึ่งมีประโยชน์อย่างยิ่งในกรณีที่หน้าเป้าหมายไม่มีไลบรารี highlighter สำหรับใช้งานระหว่างรันโปรแกรม
เอกสารฉบับเต็ม เทียบกับ ชิ้นส่วนของเอกสาร
- ชิ้นส่วน คือส่วนของ HTML ภายในเท่านั้น, เริ่มจาก
<h1>หรือองค์ประกอบแรกใดก็ตาม จากนั้นนำข้อมูลไปวางไว้ในบล็อก CMS ที่มีอยู่แล้ว ตัวเนื้อหาของอีเมล หรือคอมโพเนนต์ฝั่งผู้ใช้ - ไฟล์เต็มจะห่อข้อมูลในชุด
<!DOCTYPE html>,<html>และ<head>ด้วยสไลด์ลายนางแบบมาตรฐานขนาดเล็ก (สำหรับรูปแบบตัวอักษร บล็อกโค้ด และตาราง) หากบันทึกเป็นไฟล์.htmlจะสามารถเปิดได้ในเบราว์เซอร์ใดๆ โดยไม่จำเป็นต้องใช้ไฟล์เสริม
CSS แบบภายใน (inline) เทียบกับแบบภายนอก
- สไตล์แบบอินไลน์ (เปิด/ปิด) ใช้แสดงโค้ด CSS โดยตรงบนองค์ประกอบต่าง ๆ อาจดูไม่สวยงาม แต่เหมาะอย่างยิ่งสำหรับแม่แบบอีเมล
- คลาส (ค่าเริ่มต้น) จะช่วยรักษาความสะอาดของโค้ด HTML และคาดว่าไฟล์สไตล์ของเว็บไซต์จะทำหน้าที่จัดรูปแบบเนื้อหาเอง
หมายเหตุเกี่ยวกับความสะดวกในการใช้งาน
- หัวเรื่องจะถูกแสดงในรูปแบบเชิงความหมาย (
<h1>–<h6>) โดยคงลำดับชั้นของข้อมูลไว้ อย่าข้ามระดับใดๆ ในต้นฉบับ - รูปภาพที่ไม่มีข้อความอธิบายประกอบจะแสดงรหัส
<img alt="">(ซึ่งเป็นข้อความ “alt” ที่ถูกตั้งไว้โดยเจตนาเพื่อใช้สำหรับรูปภาพเพื่อการตกแต่ง), อย่างไรก็ตาม ควรเพิ่มข้อความอธิบายประกอบเข้าไป หากไม่ใช่กรณีที่รูปภาพนั้นมีจุดประสงค์เพื่อการตกแต่งจริง - ตารางจะมีค่า
<thead>สำหรับแถวหัว เพื่อปรับปรุงการนำทางในโปรแกรมอ่านหน้าจอ
คำถามที่พบบ่อย
ใช่ ข้อมูล HTML ดิบในแหล่งที่มาจะถูกส่งต่อโดยไม่มีการเพิ่มแท็กสคริปต์หรือแอตทริบิวต์ของเหตุการณ์ หากคุณต้องการผลลัพธ์ที่ไม่ได้ผ่านการกรอง (เนื่องจากคุณเชื่อถือข้อมูลที่ป้อนเข้ามา) มีตัวเลือกสำหรับการกำหนดการใช้งานนี้ แต่ไม่ควรใช้กับเนื้อหาที่ผู้ใช้ให้มา
รายการงานของ GFM (- [x], - [ ]) จะถูกแปลงเป็นองค์ประกอบประเภท <input type="checkbox" disabled> ส่วนแอตทริบิวต์ disabled มีหน้าที่ป้องกันไม่ให้เกิดการเปลี่ยนแปลงสถานะโดยไม่ได้ตั้งใจในรูปแบบการแสดงผล
ใช่, ให้เปิดใช้งานรูปแบบแบบแทรกในข้อความ โดยโปรแกรมแปลงจะแทรกแอตทริบิวต์รูปแบบขั้นพื้นฐานลงในแต่ละบล็อก ซึ่งเป็นสิ่งที่โปรแกรมอีเมล (เช่น Outlook และ Gmail) จำเป็นต้องใช้ เนื่องจากโปรแกรมเหล่านี้จะลบบล็อก <style> ออกไป
เปิดใช้งานฟีเจอร์เสริมด้านคณิตศาสตร์ และให้บล็อก $x^2$ หรือ $$...$$ แสดงผลผ่าน KaTeX โดยตัวแปลงจะสร้างไฟล์ในรูปแบบ SVG หรือ HTML แบบคงที่ โดยไม่จำเป็นต้องใช้ MathJax ในขณะรันโปรแกรม
ไม่ กระบวนการวิเคราะห์ข้อมูลและการสร้างไฟล์ HTML จะดำเนินการภายในเบราว์เซอร์ของคุณ โดยข้อมูลต้นทางและผลลัพธ์จะไม่เคยออกจากอุปกรณ์ของคุณเลย
เครื่องมือที่เกี่ยวข้อง
ตารางอ้างอิง ASCII
ตาราง ASCII ครบตั้งแต่ 0 ถึง 127 พร้อมค่าเลขฐานสิบ ฐานสิบหก ฐานแปด ฐานสอง และรูปแบบการอ้างอิงอักขระแบบตัวเลขของ HTML รวม NUL, LF และ DEL
อ้างอิงตัวอักษร HTML
รายการที่สามารถค้นหาได้ขององค์ประกอบ HTML พร้อมรหัสชื่อและรหัสตัวเลข รวมถึงฟังก์ชันสำเนาด้วยคลิกเดียวสำหรับตัวอักษรพิเศษและสัญลักษณ์ต่างๆ
ตารางอ้างอิงแป้นพิมพ์ลัด
ค้นหาแป้นพิมพ์ลัดเริ่มต้นตามเอกสารของ VS Code, Chrome และ Bash ที่ใช้ GNU Readline บน macOS, Windows และ Linux
ตัวตรวจสอบอีเมล
ตรวจสอบที่อยู่อีเมล: ตรวจไวยากรณ์ RFC 5322 ค้นหา MX เรกคอร์ดแบบเรียลไทม์ พร้อมรายละเอียดส่วนท้องถิ่น โดเมน และความยาว ไม่มีการส่งอีเมลใด ๆ
เครื่องสร้างตัวอักษรสุ่ม
สร้างตัวอักษร A-Z แบบสุ่ม เลือกจำนวน ตัวพิมพ์ใหญ่ ตัวพิมพ์เล็ก หรือแบบผสม แล้วใช้กับเกม โจทย์ หรือกิจกรรมในห้องเรียน
เครื่องมือสร้าง EditorConfig
สร้างไฟล์ .editorconfig ด้วยกฎสไตล์และขนาดการเยื้อง การจบบรรทัด ชุดอักขระ และช่องว่างของคุณ เพื่อให้การจัดรูปแบบสอดคล้องกันในทุก IDE และโปรแกรมแก้ไข
เครื่องมือนี้มีให้บริการในภาษาอื่น
- Markdown to HTML 변환기 [KO]
- Konverterare från Markdown till HTML [SV]
- مُحوّل من ماركداون إلى HTML [AR]
- Markdown zu HTML Konverter [DE]
- Convertisseur Markdown en HTML [FR]
- Konverter van Markdown naar HTML [NL]
- Markdown to HTML Converter [ID]
- Convertidor de Markdown a HTML [ES]
- Chuyển đổi Markdown sang HTML [VI]
- Konwerter Markdown na HTML [PL]
- MarkdownからHTMLへの変換ツール [JA]
- Conversor de Markdown para HTML [PT]
- Markdown to HTML Converter [EN]
- Convertitore da Markdown a HTML [IT]
- Конвертер из Markdown в HTML [RU]
- Markdown'dan HTML'e Çevirici [TR]
- Markdown到HTML转换器 [ZH]