ตัวสร้างสารบัญ
วาง Markdown หรือ HTML และรับสารบัญที่ซ้อนกันและคลิกได้พร้อม Anchor Slug ที่ปลอดภัยต่อการชนกันสไตล์ GitHub รวมถึงเนื้อหาต้นฉบับที่มีการแทรก ID ส่วนหัว
ผลลัพธ์
สารบัญจะมีประโยชน์พอๆ กับลิงก์ Anchor ที่อยู่ด้านล่างเท่านั้น และลิงก์ Anchor จะเชื่อถือได้ก็ต่อเมื่อทุกส่วนหัวมีกระสุนที่มีเอกลักษณ์และคาดเดาได้ ตัวสร้างนี้จะแยกวิเคราะห์ส่วนหัวของสิ่งที่คุณวาง - Markdown หรือ HTML - และกำหนดแต่ละอันด้วยจุดยึดสไตล์ GitHub จริง: ข้อความตัวพิมพ์เล็ก ช่องว่างและเครื่องหมายวรรคตอนที่ถูกแทนที่หรือถูกถอดออก และที่สำคัญคือส่วนต่อท้ายที่ปลอดภัยจากการชนกันของแท้เมื่อใดก็ตามที่สองส่วนหัวจะสร้างกระสุนเดียวกัน "บทนำ" ครั้งที่สองในเอกสารกลายเป็นบทนำ -1 ส่วนที่สามกลายเป็นบทนำ -2 ติดตามด้วยแผนที่เหตุการณ์ที่ทำงานอยู่อย่างแน่นอนตามวิธีการทำงานของ slugger ของ GitHub - ไม่ใช่ทางลัดที่เขียนทับลิงก์ก่อนหน้าอย่างเงียบ ๆ เมื่อส่วนหัวซ้ำ ซึ่งเป็นวิธีเดียวที่ใช้กันทั่วไปมากที่สุดในการทำลายสคริปต์สารบัญที่ทำด้วยมือ
การแยกวิเคราะห์ Markdown เป็นไปตามวัตถุประสงค์ เนื่องจากโหมดความล้มเหลวแบบคลาสสิกสำหรับการใช้งานที่ไร้เดียงสากำลังถือว่า "#" ที่เขียนภายในบล็อกโค้ดที่ไม่พอใจเป็นส่วนหัว เครื่องมือนี้จะติดตามว่าขณะนี้รั้ว ``` หรือ ~~~ เปิดอยู่ในขณะที่เดินไปตามเอกสารทีละบรรทัด และรับรู้เฉพาะส่วนหัว ATX (# ถึง ######) นอกรั้วที่เปิดอยู่ ดังนั้นตัวอย่างโค้ดที่แสดงความคิดเห็นของเชลล์หรือความคิดเห็น Python "#" จะไม่ทำให้สารบัญของคุณเสียหาย อินพุต HTML ใช้เส้นทางที่แท้จริงที่แตกต่างกันและเท่าเทียมกัน โดยแยกวิเคราะห์ด้วย DOMParser ของเบราว์เซอร์เอง ส่วนหัวจะถูกเลือกตามชื่อแท็ก และแอตทริบิวต์ id ของแต่ละรายการจะถูกตั้งค่าโดยตรงบนองค์ประกอบจริงก่อนที่เอกสารจะถูกทำให้อนุกรมกลับไปเป็นสตริง
สองสิ่งออกมาอีกด้านหนึ่ง ขั้นแรก สารบัญจะถูกส่งออกเป็นทั้งรายการ Markdown ที่ซ้อนกัน (- [Title](#slug) เยื้องตามระดับส่วนหัว) และรายการ HTML ที่ซ้อนกัน (<ul><li><a href="#slug">) แต่ละรายการมีปุ่มคัดลอกของตัวเอง ประการที่สอง เนื้อหาต้นฉบับของคุณที่มีจุดยึดเชื่อมต่ออยู่จริง: สำหรับอินพุต Markdown คุณสามารถเลือกไวยากรณ์แอตทริบิวต์ส่วนหัว {#slug} ที่ได้รับการสนับสนุนอย่างกว้างขวางซึ่งใช้โดย Jekyll ของ kramdown, Pandoc, MkDocs และ GitHub Pages หรือถอยกลับไปใช้แท็กส่วนหัว HTML ธรรมดาที่มี id="slug" ตั้งค่าไว้แล้วหากตัวแสดงผลเป้าหมายของคุณไม่เข้าใจไวยากรณ์ของแอตทริบิวต์ สำหรับอินพุต HTML รหัสจะถูกแทรกโดยตรงไปยังองค์ประกอบส่วนหัวที่แยกวิเคราะห์ - ไม่มี "โหมด" แยกต่างหากให้เลือกเนื่องจากมีแท็กอยู่แล้ว
ทุกอย่างทำงานภายในเบราว์เซอร์ของคุณ: การแยกวิเคราะห์ การคำนวณแบบกระสุน และการประกอบเอกสารอีกครั้ง ทั้งหมดนี้เกิดขึ้นใน JavaScript บนหน้าเว็บที่คุณกำลังดูอยู่ในขณะนี้ โดยไม่มีการอัปโหลดใดๆ เลย นั่นสำคัญสำหรับเอกสารฉบับร่าง วิกิภายใน หรือโพสต์ในบล็อกที่ไม่ได้เผยแพร่ คุณยังไม่พร้อมที่จะวางลงในบริการของบุคคลที่สามเพียงเพื่อให้ได้สารบัญที่ใช้งานได้