0

Sisällysluettelon generaattori

Liitä Markdown tai HTML ja saat sisäkkäisen, napsautettavan sisällysluettelon, jossa on aidot GitHub-tyyliset törmäysturvalliset ankkurit sekä alkuperäinen sisältö, johon on lisätty otsikkotunnukset.

Automaattinen tunnistus etsii ensin oikeat

-

-tunnisteet ja sitten Markdown # otsikot.

Lisää {#slug}-attribuutin jokaisen otsikon jälkeen – kramdown, Pandoc, MkDocs ja GitHub Pages (Jekyll) tukevat.

Buy Me a Coffee at ko-fi.com
Käsitellään... 0%
Tunnistaa sisällön muotoa
Jäsentää otsikot
Törmäysturvallisten etanoiden määrittäminen
Sisällysluettelon rakentaminen

Tulos

Sisällysluettelo on vain yhtä hyödyllinen kuin sen alla olevat ankkurilinkit, ja ankkurilinkit ovat luotettavia vain, jos jokainen otsikko saa ainutlaatuisen, ennustettavan etanan. Tämä generaattori jäsentää otsikot pois liitettävästä materiaalista - Markdown tai HTML - ja määrittää kullekin todellisen GitHub-tyylisen ankkurin: pienet tekstit, välilyönnit ja välimerkit korvataan tai poistetaan, ja kriittisen tärkeänä, aito törmäysturvallinen jälkiliite aina, kun kaksi otsikkoa muutoin tuottaisi saman etanan. Dokumentin toisesta "Esittelystä" tulee johdanto-1, kolmannesta johdannosta-2, jota seurataan käynnissä olevalla tapahtumakartalla täsmälleen samalla tavalla kuin GitHubin oma slugger toimii - ei pikakuvake, joka korvaa äänettömästi aikaisemmat linkit otsikoiden toistuessa, mikä on yleisin tapa käsin rullattujen sisällysluetteloskriptien katkeamiseen.

Markdown jäsennys on rivipohjaista tarkoitukseen, koska naiivin toteutuksen klassinen vikatila käsittelee aidatun koodilohkon sisään kirjoitettua "#" otsikkona. Tämä työkalu seuraa, onko ``` tai ~~~ aita tällä hetkellä auki, kun se kulkee dokumenttia rivi riviltä, ​​ja tunnistaa vain ATX-otsikot (# - ######) avoimien aitojen ulkopuolella - joten komentotulkkikommentteja näyttävä koodinäyte tai Python "# kommentti" ei koskaan saastuta sisällysluetteloasi. HTML-syöttö kulkee erilaista, yhtä todellista polkua: se jäsennetään selaimen omalla DOMParserilla, otsikot valitaan tagin nimen mukaan ja jokaisen id-attribuutti asetetaan suoraan varsinaiseen elementtiin ennen kuin asiakirja sarjoitetaan takaisin merkkijonoksi.

Kaksi asiaa selviää toisesta päästä. Ensinnäkin itse sisällysluettelo, joka viedään sekä sisäkkäisenä merkintäluettelona (- [Otsikko](#slug), sisennettynä otsikkotason mukaan) että sisäkkäisenä HTML-luettelona (<ul><li><a href="#slug">), jokaisessa on oma kopiointipainike. Toiseksi, alkuperäinen sisältösi, jossa ankkurit on todella kytketty: Markdown-syötteeksi voit valita laajasti tuetun {#slug}-otsikkoattribuuttisyntaksin, jota käyttävät kramdown, Pandoc, MkDocs ja GitHub Pages' Jekyll, tai palata yksinkertaisiin HTML-otsikkotunnisteisiin, joissa on jo asetettu id="slug" synta-attribuutti. HTML-syötössä id injektoidaan suoraan jäsennettyyn otsikkoelementtiin – erillistä "tilaa" ei voi valita, koska tagit ovat jo olemassa.

Kaikki toimii paikallisesti selaimessasi: jäsennys, slug-matematiikka ja asiakirjan kokoaminen tapahtuvat kaikki tällä hetkellä tarkastelemasi sivun JavaScriptillä, eikä mitään ole ladattu mihinkään. Sillä on merkitystä dokumentaatioluonnoksissa, sisäisissä wikeissä tai julkaisemattomissa blogikirjoituksissa, joita et ole valmis liittämään kolmannen osapuolen palveluun vain saadaksesi toimivan sisällysluettelon.