Trình tạo mục lục
Dán Markdown hoặc HTML và nhận được một bảng nội dung lồng nhau, có thể nhấp vào với các chuỗi neo an toàn va chạm kiểu GitHub thực sự, cùng với nội dung gốc có chèn ID tiêu đề.
kết quả
Mục lục chỉ hữu ích khi các liên kết neo bên dưới nó và các liên kết neo chỉ đáng tin cậy nếu mỗi tiêu đề có một phần mở rộng duy nhất, có thể dự đoán được. Trình tạo này phân tích cú pháp các tiêu đề từ bất cứ thứ gì bạn dán - Markdown hoặc HTML - và gán cho mỗi tiêu đề một neo kiểu GitHub thực sự: văn bản viết thường, dấu cách và dấu câu được thay thế hoặc loại bỏ, và quan trọng là một hậu tố an toàn va chạm thực sự bất cứ khi nào hai tiêu đề tạo ra cùng một slug. Phần "Giới thiệu" thứ hai trong tài liệu trở thành phần giới thiệu-1, phần thứ ba trở thành phần giới thiệu-2, được theo dõi bằng bản đồ sự kiện đang chạy chính xác theo cách hoạt động của slugger của GitHub - không phải là một lối tắt âm thầm ghi đè lên các liên kết trước đó khi các tiêu đề lặp lại, đây là cách phổ biến nhất mà các tập lệnh mục lục cuộn bằng tay bị hỏng.
Phân tích cú pháp đánh dấu dựa trên mục đích dựa trên dòng, bởi vì chế độ lỗi cổ điển đối với việc triển khai đơn giản là coi "#" được viết bên trong khối mã có rào chắn làm tiêu đề. Công cụ này theo dõi xem hàng rào ``` hoặc ~~~ hiện đang mở khi nó duyệt từng dòng tài liệu và chỉ nhận dạng các tiêu đề ATX (# đến ######) bên ngoài hàng rào mở - do đó, mẫu mã hiển thị nhận xét shell hoặc "# nhận xét" Python không bao giờ làm ô nhiễm mục lục của bạn. Đầu vào HTML có một đường dẫn khác, thực tế như nhau: nó được phân tích cú pháp bằng DOMParser của chính trình duyệt, các tiêu đề được chọn theo tên thẻ và thuộc tính id của mỗi cái được đặt trực tiếp trên phần tử thực tế trước khi tài liệu được tuần tự hóa trở lại thành một chuỗi.
Hai thứ đi ra từ đầu bên kia. Đầu tiên, bản thân mục lục được xuất dưới dạng cả danh sách Markdown lồng nhau (- [Title](#slug), thụt lề theo cấp tiêu đề) và danh sách HTML lồng nhau (<ul><li><a href="#slug">), mỗi danh sách đều có nút sao chép riêng. Thứ hai, nội dung ban đầu của bạn với các neo thực sự được kết nối: đối với đầu vào Markdown, bạn có thể chọn cú pháp thuộc tính tiêu đề {#slug} được hỗ trợ rộng rãi được sử dụng bởi kramdown, Pandoc, MkDocs và GitHub Pages' Jekyll hoặc quay lại các thẻ tiêu đề HTML đơn giản có id="slug" đã được đặt nếu trình kết xuất mục tiêu của bạn không hiểu cú pháp thuộc tính. Đối với đầu vào HTML, id được đưa thẳng vào phần tử tiêu đề được phân tích cú pháp - không có "chế độ" riêng nào để chọn vì các thẻ đã tồn tại.
Mọi thứ chạy cục bộ trong trình duyệt của bạn: phân tích cú pháp, phép toán slug và tập hợp lại tài liệu đều diễn ra bằng JavaScript trên trang bạn đang xem ngay bây giờ và không có gì được tải lên ở bất kỳ đâu. Điều đó quan trọng đối với tài liệu nháp, wiki nội bộ hoặc bài đăng trên blog chưa được xuất bản mà bạn chưa sẵn sàng dán vào dịch vụ của bên thứ ba chỉ để có được mục lục đang hoạt động.