Markdownista HTML:ksi ja takaisin: muunnin live-esikatselulla
Liitä Markdownia, niin näet valmiin sivun ja sen vieressä puhtaan HTML:n. Liitä HTML:ää, niin saat Markdownia, joka kelpaa README-tiedostoon tai blogiartikkeliin. Molemmat suunnat toimivat selaimessasi: tekstiä ei lähetetä minnekään eikä tallenneta mihinkään.
.md — tiedosto luetaan paikallisesti. Tuettuna on CommonMark tavanomaisessa laajuudessaan sekä GFM-laajennukset: taulukot, yliviivaus ja tehtävälistat.
Liitä Markdownia yllä — HTML ilmestyy tähän.
.html — tiedosto luetaan paikallisesti. Jäsennys kulkee DOMParserin kautta, joten se toimii sekä katkelmalla että kokonaisella sivulla.
Liitä HTML:ää yllä — Markdown ilmestyy tähän.
Teksti ei poistu selaimestasi — muunnos tapahtuu paikallisesti, mitään ei lähetetä palvelimelle.
Mitä tarkalleen tuetaan
Markdownin puolelta — CommonMark tavanomaisessa laajuudessaan sekä GFM-laajennukset: otsikot risuaidoilla ja alleviivauksella, kappaleet, vaakaviivat; luettelo-, numeroidut ja sisäkkäiset listat sekä tiiviissä että väljässä muodossa; tehtävälistat hakasulkeissa; lainaukset, myös laiskalla rivinjatkolla; aidattu koodi kielinimineen ja sisennetty koodi; GFM-taulukot sarakkeiden tasauksella; linkit, kuvat, automaattilinkit ja viittauslinkit asiakirjan lopussa; lihavointi, kursiivi, yliviivaus, rivinsisäinen koodi, suojatut merkit ja kova rivinvaihto. HTML:n puolelta jäsennys kulkee selaimen oman DOMParserin kautta, joten sekä katkelma että kokonainen sivu head-osineen toimivat. Yhdistettyjä soluja sisältävät taulukot eivät siirry Markdowniin — sellaista syntaksia siellä ei ole, joten ne jäävät tunnisteiksi ja työkalu kertoo siitä. Mitä tarkoituksella puuttuu: syntaksin korostus koodilohkoissa, alaviitteet, kaavat ja tiettyjen staattisten sivustogeneraattoreiden direktiivit. Se ei ole enää Markdownia vaan yksittäisen työkalun murre.
Yksi rivinvaihto: kaksi eri Markdownia
Yleisin muuntimien välisten erojen lähde on juuri yksittäinen rivinvaihto kappaleen sisällä. CommonMarkin mukaan se on tavallinen välilyönti: kaksi riviä liimautuu yhdeksi kappaleeksi. Näin toimivat Pandoc, dokumentaatiogeneraattorit ja useimmat staattiset sivustot. GitHub tekee kommenteissa, tehtäväkuvauksissa ja katselmoinneissa päinvastoin: jokaisesta rivinvaihdosta tulee br-tunniste. Juuri siksi teksti, joka näytti hyvältä tehtävässä, takkuuntuu README-tiedostoon siirrettynä yhdeksi yhtenäiseksi kappaleeksi. Valintaruutu «Yksittäinen rivinvaihto on br» vaihtaa näiden kahden tavan välillä. Oletuksena pätee CommonMarkin sääntö.
Miksi esikatselu ei näytä kaikkea, mitä HTML:ssä on
Määrittelyn mukaan Markdown sallii HTML:n sisällään. Se on kätevää ja tarkoittaa samalla, että mikä tahansa liitetty teksti voi sisältää suoritettavaa koodia. Suositut verkkokatselimet laittavat tuloksen innerHTML:ään sellaisenaan. Kirjastossa marked, jolle ne on rakennettu, ei ole neljännestä versiosta lähtien ollut lainkaan sisäänrakennettua puhdistusta — vieraan Markdownin script-tunniste yksinkertaisesti suoritetaan siellä. Täällä esikatselu rakennetaan DOM-solmuista sallittujen listan mukaan: script, iframe, object, onclickin kaltaiset tapahtumankäsittelijät ja javascript:-skeeman linkit eivät sinne pääse, ja poistetun lista näytetään tuloksen alla. Välilehdellä «HTML-koodi» näet täyden tulosteen ilman karsintaa — se on tekstiä eikä sivu, eikä sitä voi suorittaa. Lähteen HTML pääsee esikatseluun vain, kun kytket vastaavan valintaruudun itse päälle. Oletuksena tunnisteet suojataan ja näytetään tekstinä.