การใช้งานตัวห้อย (Subscript) ใน Markdown ของ Hugo
ผมใช้ Hugo Framework 1 สร้างเว็บไซต์นี้ เพื่อเขียนบล็อคบทความต่างๆ จนกระทั่งวันก่อนต้องการเขียนบทความที่มีตัวห้อย (Subscript) สำหรับแสดงค่า Fibonacci ที่ตำแหน่งใดๆ แทนด้วยตัวอักษร i ซึ่งต้องการให้ i เป็นตัวห้อยของ f เช่น Fibonacci ที่ตำแหน่ง 0 แทนด้วยสัญลักษณ์ f0
เมื่อลองค้นหาวิธีบางเว็บไซต์ก็บอกว่า Hugo ไม่รองรับ 2 แต่เมื่อลองทำความเข้าใจ Hugo ให้มากขึ้นพบว่า Hugo ใช้ระบบ Goldmark 3 ในการแสดงแปลงข้อมูล markdown เพื่อแสดงผล HTML พบว่า Hugo มีวิธีการที่สามารถเขียนตัวห้อยได้ 4 ด้วยการใช้รหัสย่อ (shortcode) ~ ระหว่างตัวอักษรที่ต้องการเป็นตัวห้อย เช่น f~0~ แต่เมื่อไปลองแต่กลับผลลัพธ์แสดงเป็น f0 ซึ่งมีการขีดฆ่ากลางที่ตัวเลขศูนย์
วิธีการแก้ปัญหาให้สามารถใช้ตัวห้อยได้
การแก้ไขปัญหาให้ Hugo รองรับ shortcode ที่สามารถแสดงตัวห้อยได้นั้น ผมได้ลองหลายวิธี แต่มีวิธีที่น่าสนใจอยู่ 2 วิธีดังนี้
- เปลี่ยนไปใช้ตัวการแปลง markdown เป็น asciidocext ซึ่งรองรับการเขียนตัวห้อยได้ 5 โดยการเปลี่ยนการตั้งค่าของ
defaultMarkdownHandlerให้เป็นasciidocextในไฟล์hugo.tomlดังนี้
[markup]
defaultMarkdownHandler = 'asciidocext'
- เพิ่มความสามารถของ goldmark ให้รองรับการแสดงตัวห้อย (รองรับใน Hugo ตั้งแต่เวอร์ชั่น v0.126.0) 6 ด้วยการเปิดใช้งาน
[markup.goldmark.extensions.extras.subscript]ตั้งค่าในไฟล์hugo.tomlดังนี้ ปล. จำเป็นต้องปิดการใช้ตัวขีดเส้นใต้ตัวอักษรปกติ (strike through)
[markup.goldmark]
[markup.goldmark.extensions]
strikethrough = false
[markup.goldmark.extensions.extras]
[markup.goldmark.extensions.extras.subscript]
enable = true
อย่าลืมตรวจสอบไฟล์ hugo.toml ว่าใช้ goldmark เป็นตัวแปลงผลข้อมูล markdown ตามตัวอย่างด้านล่าง
[markup]
defaultMarkdownHandler = 'goldmark'
ตัวอย่างการใช้งาน
ตัวอย่าง shortcode สำหรับ ขีดฆ่ากลางตัวอักษร, ขีดเส้นใต้ตัวอักษร, เน้นบนตัวอักษร, ตัวห้อย, และ ตัวยก 6
| Markdown | HTML | ตัวอย่าง | |
|---|---|---|---|
| ขีดฆ่ากลางตัวอักษร (Strikethrough) | ~~foo~~ |
<del>foo</del> |
|
| ขีดเส้นใต้ตัวอักษร (Underline) | ++bar++ |
<ins>bar</ins> |
bar |
| เน้นบนตัวอักษร (Highlight) | ==baz== |
<mark>baz</mark> |
baz |
| ตัวห้อย (Subscript) | H~2~O |
H<sub>2</sub>O |
H2O |
| ตัวยก (Superscript) | 1^st^ |
1<sup>st</sup> |
1st |
การตั้งค่า extension เพิ่มเติมให้กับ goldmark
การตั้งค่าให้ goldmark ให้รองรับการ ขีดฆ่ากลางตัวอักษร, ขีดเส้นใต้ตัวอักษร, เน้นบนตัวอักษร, และ ตัวยก ด้วยการตั้งค่าดังต่อไปนี้ในไฟล์ hugo.toml
- ขีดฆ่ากลางตัวอักษร ตั้งค่า
enable = trueให้[markup.goldmark.extensions.extras.delete] - ขีดเส้นใต้ตัวอักษร ตั้งค่า
enable = trueให้[markup.goldmark.extensions.extras.insert] - เน้นบนตัวอักษร ตั้งค่า
enable = trueให้[markup.goldmark.extensions.extras.mark] - ตัวยก ตั้งค่า
enable = trueให้[markup.goldmark.extensions.extras.superscript]
[markup.goldmark]
[markup.goldmark.extensions]
[markup.goldmark.extensions.extras]
[markup.goldmark.extensions.extras.delete]
enable = true
[markup.goldmark.extensions.extras.insert]
enable = true
[markup.goldmark.extensions.extras.mark]
enable = true
[markup.goldmark.extensions.extras.superscript]
enable = true