9. joulukuu 2010, 20:39

Syntaksivärjäys selaimesi puolella

Edelliset ratkaisut eivät sitten toimineet lainkaan siten kuten halusin. Pääsin jo hyvälle mallille edellisen pohjan kanssa, kun viilasin blogikoneemme Textile-koodia, mutta olisi ollut vielä vähän työtä edessä. Sattumalta huomasin erään varsin toimivan värjäyskoneen, joka toimii JavaScriptillä vastaanottavassa päässä. Paha sanoa, mihin mennään, mutta ainakin se väistyy nätisti tieltä!

Demojuttu on edelleen tämä. Värit ovat toistaiseksi valmiit, mutta se on pelkän CSS:n fiilaamisen homma tässä vaiheessa. Toisin kuin nuo vanhat ratkaisut, tämä toimii erinomaisesti heti ensilaukaisuista alkaen.

Voin nyt kirjoittaa Textilessä tavallisia pre-lohkoja tavalliseen tapaan kirjoittamalla

pre. kappale tekstiä jeejeejee

Mutta nyt jos lisään sopivan CSS-luokan tälle kiinteäleveyksiselle lohkolle, ja SyntaxHighlighter huomaa sen sieltä seasta, koodi värjätäänkin mallikkaasti: koodi

pre(bash). echo "hello"

Kääntyy seuraavannäköiseksi:

echo "hello"

Mikä mukavinta, se näyttää lähdekielisenäkin melko hyvältä, melkein semanttiselta. Ehkäpä viritän koodiblokit (bc) toimimaan vielä tämän kanssa, toistaiseksi esimerkiksi bc(haskell)-lohko ei toimi, koska Textile lisää <pre>-tagien lisäksi <code>-tagit sisään, jotka eivät mene läpi.

Toistaiseksi hyvin hyvältä näyttää! Eikä tuo javascriptiys pahasti haittaa. Tulee ehkä pientä overheadia monesta pienestä tiedostosta, jotka pitää latailla, mutta ehkäpä se ei näy missään.

Ja jos näkyy, ilmoitelkaapa.

Tageja: ,

---
---

---

Aiheen vierestä