Γεννήτρια πίνακα περιεχομένων
Επικολλήστε Markdown ή HTML και λάβετε έναν ένθετο πίνακα περιεχομένων με δυνατότητα κλικ με πραγματικές γυμνοσάλιαγκες αγκύρωσης που είναι ασφαλείς για σύγκρουση τύπου GitHub, καθώς και το αρχικό περιεχόμενο με ενσωματωμένα αναγνωριστικά επικεφαλίδων.
Αποτέλεσμα
Ένας πίνακας περιεχομένων είναι τόσο χρήσιμος όσο οι σύνδεσμοι αγκύρωσης από κάτω του και οι σύνδεσμοι αγκύρωσης είναι αξιόπιστοι μόνο εάν κάθε επικεφαλίδα έχει ένα μοναδικό, προβλέψιμο γυμνοσάλιαγκο. Αυτή η γεννήτρια αναλύει τις επικεφαλίδες από ό,τι επικολλάτε - Markdown ή HTML - και εκχωρεί σε καθεμία μια πραγματική άγκυρα σε στυλ GitHub: πεζό κείμενο, κενά και σημεία στίξης αντικαθίστανται ή αφαιρούνται και, κρίσιμα, ένα γνήσιο επίθημα ασφαλές για σύγκρουση κάθε φορά που δύο επικεφαλίδες διαφορετικά θα παρήγαγαν το ίδιο slug. Η δεύτερη "Εισαγωγή" σε ένα έγγραφο γίνεται εισαγωγή-1, η τρίτη γίνεται εισαγωγή-2, παρακολουθείται με έναν χάρτη περιστατικών που εκτελείται ακριβώς με τον τρόπο που λειτουργεί το δικό του slugger του GitHub - όχι μια συντόμευση που αντικαθιστά σιωπηλά τους προηγούμενους συνδέσμους όταν οι επικεφαλίδες επαναλαμβάνονται, που είναι ο πιο συνηθισμένος τρόπος χειροκίνητης περιέλιξης σενάρια περιεχομένων.
Η ανάλυση Markdown βασίζεται στη γραμμή σκόπιμα, επειδή η κλασική λειτουργία αποτυχίας για μια απλή υλοποίηση αντιμετωπίζει ένα "#" που είναι γραμμένο μέσα σε ένα περιφραγμένο μπλοκ κώδικα ως επικεφαλίδα. Αυτό το εργαλείο παρακολουθεί εάν ένας φράκτης ``` ή ~~~ είναι ανοιχτός καθώς περπατά το έγγραφο γραμμή προς γραμμή και αναγνωρίζει μόνο επικεφαλίδες ATX (# έως ######) εκτός ανοιχτών περιφράξεων - επομένως ένα δείγμα κώδικα που δείχνει σχόλια φλοιού ή ένα "# σχόλιο" Python δεν μολύνει ποτέ τον πίνακα περιεχομένων σας. Η είσοδος HTML παίρνει μια διαφορετική, εξίσου πραγματική διαδρομή: αναλύεται με τον DOMParser του ίδιου του προγράμματος περιήγησης, οι επικεφαλίδες επιλέγονται με βάση το όνομα της ετικέτας και το χαρακτηριστικό id καθενός ορίζεται απευθείας στο πραγματικό στοιχείο πριν το έγγραφο σειριοποιηθεί ξανά σε μια συμβολοσειρά.
Δύο πράγματα βγαίνουν από την άλλη άκρη. Πρώτον, ο ίδιος ο πίνακας περιεχομένων, που εξήχθη τόσο ως ένθετη λίστα Markdown (- [Title](#slug), με εσοχή ανά επίπεδο επικεφαλίδας) όσο και ως ένθετη λίστα HTML (<ul><li><a href="#slug">), το καθένα με το δικό του κουμπί αντιγραφής. Δεύτερον, το αρχικό περιεχόμενό σας με τις αγκυρώσεις στην πραγματικότητα: για είσοδο Markdown, μπορείτε να επιλέξετε την ευρέως υποστηριζόμενη σύνταξη επικεφαλίδας {#slug} που χρησιμοποιείται από τα kramdown, Pandoc, MkDocs και το Jekyll των Σελίδων GitHub ή να επιστρέψετε στις απλές ετικέτες επικεφαλίδας HTML με το χαρακτηριστικό id="slug" που έχει ήδη οριστεί ως στόχος syntax. Για την εισαγωγή HTML, το αναγνωριστικό εισάγεται απευθείας στο αναλυμένο στοιχείο επικεφαλίδας - δεν υπάρχει ξεχωριστή "λειτουργία" για επιλογή, επειδή οι ετικέτες υπάρχουν ήδη.
Όλα εκτελούνται τοπικά στο πρόγραμμα περιήγησής σας: η ανάλυση, τα μαθηματικά γυμνοσάλιαγκας και η επανασυναρμολόγηση του εγγράφου συμβαίνουν όλα σε JavaScript στη σελίδα που βλέπετε αυτήν τη στιγμή, χωρίς να έχει ανέβει τίποτα πουθενά. Αυτό έχει σημασία για την πρόχειρη τεκμηρίωση, τα εσωτερικά wiki ή μια αδημοσίευτη ανάρτηση ιστολογίου που δεν είστε έτοιμοι να επικολλήσετε σε μια υπηρεσία τρίτου μόνο για να λάβετε έναν πίνακα περιεχομένων εργασίας.