Impressum

Frank Seitz
Hauptstr. 32
25462 Rellingen

E-Mail: fs

fseitz.de
Tel.: +49-176-78243503

Alle Artikel
Inhaltsverzeichnis
Rechtliche Hinweise

Profil auf XING

Code auf GitHub
Code auf meta::cpan

Freitag, 5. Februar 2010

Syntax-Highlighting mit perltidy

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

print "Hello world!\n";

wird im HTML-Output (Umbruch hinzugefügt)

<span class="pt-k">print</span> <span class="pt-q">
  &quot;Hello world!\n&quot;</span><span class="pt-sc">;</span>

und im Browser





perltidy




perltidy


print "Hello world!\n";

Syntax-Highlighting mit perltidy

Frank Seitz - Developer Logbuch

Impressum

Kategorien

Freitag, 5. Februar 2010

Syntax-Highlighting mit perltidy

Anpassung der Stylesheet-Definitionen

Anpassung 1

Anpassung 2

Resultierende CSS-Datei

Anpassung des HTML-Codes

Anpassung 1

Anpassung 2

Resultierender HTML-Code

perltidy

Links

Kalender

Statistik

Abonnieren

Validierung

Links