Pertidy stellt die
Syntax von Perl-Code farbig und mit Fontattributen wie kursiv und fett
dar, wenn man den Code mit Option -html nach HTML wandelt. Ich
nutze dieses Feature, um gut lesbareren Perl-Code für mein Blog zu
generieren.
Für die Einbettung des generierten HTML-Codes in eigene HTML-Seiten
sind allerdings kleinere Sonderbehandlungen nötig.
Anpassung der Stylesheet-Definitionen
Perltidy generiert mit
$ perltidy -html -ss >FILE.css
eine Stylesheet-Datei, die die Definitionen der CSS-Klassen für die
Syntaxelemente enthält und in die eigenen HTML-Seiten
eingebunden werden kann:
/* default style sheet generated by perltidy */
body {background: #FFFFFF; color: #000000}
pre { color: #000000;
background: #FFFFFF;
font-family: courier;
}
.c { color: #000000;} /* comment */
.cm { color: #000000;} /* comma */
.co { color: #000000;} /* colon */
.h { color: #000000;} /* here-doc-target */
.hh { color: #000000;} /* here-doc-text */
.i { color: #000000;} /* identifier */
.j { color: #000000;} /* label */
.k { color: #000000;} /* keyword */
.m { color: #000000;} /* subroutine */
.n { color: #000000;} /* numeric */
.p { color: #000000;} /* paren */
.pd { color: #000000;} /* pod-text */
.pu { color: #000000;} /* punctuation */
.q { color: #000000;} /* quote */
.s { color: #000000;} /* structure */
.sc { color: #000000;} /* semicolon */
.v { color: #000000;} /* v-string */
.w { color: #000000;} /* bareword */
Anpassung 1
Die CSS-Definitionen für <body> und <pre> am Anfang sollten im
Falle einer Einbettung nicht vorkommen, da diese an anderer
Stelle definiert sind. Sie lassen sich mit grep wegfiltern.
$ perltidy -html -ss | grep '^\.'
Anpassung 2
Die Namen der CSS-Klassen bestehen aus ein oder zwei
Buchstaben, was zu Nameclashes führen kann.
Dies verbessere ich, indem ich dem Klassennamen
einen Präfix voranstelle. Ich wähle "pt-".
$ perltidy -html -ss | grep '^\.' | sed -e 's/^\./.pt-/'
Resultierende CSS-Datei
.pt-c { color: #000000;} /* comment */
.pt-cm { color: #000000;} /* comma */
.pt-co { color: #000000;} /* colon */
.pt-h { color: #000000;} /* here-doc-target */
.pt-hh { color: #000000;} /* here-doc-text */
.pt-i { color: #000000;} /* identifier */
.pt-j { color: #000000;} /* label */
.pt-k { color: #000000;} /* keyword */
.pt-m { color: #000000;} /* subroutine */
.pt-n { color: #000000;} /* numeric */
.pt-p { color: #000000;} /* paren */
.pt-pd { color: #000000;} /* pod-text */
.pt-pu { color: #000000;} /* punctuation */
.pt-q { color: #000000;} /* quote */
.pt-s { color: #000000;} /* structure */
.pt-sc { color: #000000;} /* semicolon */
.pt-v { color: #000000;} /* v-string */
.pt-w { color: #000000;} /* bareword */
Anpassung des HTML-Codes
Perltidy erzeugt mit
$ perltidy -html -pre <FILE >FILE.html
eine Quelltext-Darstellung in HTML. Diese kann in die eigene
Seite eingebunden werden.
Anpassung 1
Der HTML-Code ist in ein <pre> ohne CSS-Klassenangabe eingefasst. Das
CSS-Layout dieses <pre> lässt sich also nicht gezielt anpassen. Am
besten filtert man es weg und setzt den HTML-Code in ein eigenes
<pre>.
$ perltidy -html -pre <FILE | egrep -v '^</?pre>'
Anpassung 2
Die CSS-Klassennamen müssen an die oben gewählten Namen in der
Stylesheet-Datei angepasst werden.
$ perltidy -html -pre | egrep -v '^</?pre>' | sed -e 's/class="/class="pt-/g'
Resultierender HTML-Code
Aus
wird im HTML-Output (Umbruch hinzugefügt)
<span class="pt-k">print</span> <span class="pt-q">
"Hello world!\n"</span><span class="pt-sc">;</span>
und im Browser
perltidy
perltidy
print "Hello world!\n";
Links