Lettlest framstilling av programkode, pretty print.

Hva

Det er ofte behov for å framstille programkode på en måte som gjør den lettere å lese enn det vi får ved ren ensfarget tekst. Vi vil gjerne markere strukttur i koden, reserverte ord, kommentarer og konstanter. Det er mange måter å gjøre dette på og det finnes en del verktøy for å gjøre det. De kodebitene som er angitt i dette materialet er normalt laget ved egne parsere skrevet i Java.

I denne modulen skal vi imidlertid se på en enkel og smart måte å lage fargekodet programlisting. Vi skal bruke Googles google-code-prettify, [1] . Dette verktøyet foretar fargekodingen "on-the-fly" når vevsiden lastes. Dette gjøre ved hjelp av javascript og en elegant bruk av regexp. Vi kan lett kontrollere framstillingen via et stilsett.

Vi laster ned .zip fila fra google-code-prettify [1] og pakker den ut i en katalog.

I katalogen jeg pakker ut finner jeg noen testsider, en katalog (src) med Javascript-filer og en .css -fil. Jeg finner dessuten en README.html som beskriver hva vi kan gjøre, hvilke språk som støttes og hvordan vi kan gjøre det.

Vi skal bruke prettyfy til å framstille noen eksempler på kode av den typen vi finner i dette materialet: Javascript, CSS, Python og SQL.

For å forenkle koden er demene lagt i egne filer. Det burde være greitt å inspisere kildekoden og se hvordan det henger sammen.

Eksperimenter

Enkelt og greitt uten eget stilsett:

demo0.html https://borres.hiof.no/wep/gog/prettify/demo0.html

Det er selvsagt interessant å eksperimentere med stilsettet. Et forsiktig forsøk:

demo1.html https://borres.hiof.no/wep/gog/prettify/demo1.html

Et forsøk med dynamisk lasting av programkode

demo2.html https://borres.hiof.no/wep/gog/prettify/demo2.html

Referanser

Google Code Prettyfy Google code.google.com/p/google-code-prettify/ 14-10-2014