12.03.2008
Schönere Quelltextausgabe
mit Google Code Prettify
zur Übersicht 0 Kommentare von Bogdan
Mit Google Code Prettify wird die Syntax-Hervorhebung von Quelltext auf einer Website zum Kinderspiel. Das kleine Helferlein, bestehend aus einer JavaScript-und einer CSS-Datei ist schnell eingebunden und einfach anzuwenden.
Dadurch wird aus einem langweiligen Quelltext in schwarz und weiß …
Langweiliger Quelltext in schwarz und weiß
<html>
<head>
<title>Meine tolle Seite</title>
</head>
<body>
<div class="head">
<h1>Meine tolle Seite…</h1>
<h1>…ist die beste von allen!</h1>
</div>
<div class="navigation">
<ul>
<li><a href="eintrag-1">Eintrag 1</a></li>
<li><a href="eintrag-2">Eintrag 2</a></li>
<li><a href="eintrag-3">Eintrag 3</a></li>
</ul>
</div>
<div class="content">
<h2>Mit Google Code Prettify …</h2>
<p>…würde hier alles hübscher aussehen!</p>
</div>
<div class="sidebar">
<div class="sidebar_entry">
<h3>Links</h3>
<ul>
<li><a href="http://google.com">Google</a></li>
<li><a href="http://medianotions.de">Medianotions</a></li>
</ul>
</div>
</div>
</body>
</html>
… ein zugegebener Maßen nicht minder langweiliger aber immer hin mit Syntax-Hervorhebung versehener Quelltext in bunt.
Quelltext mit Syntax-Hervorhebung
<html>
<head>
<title>Meine tolle Seite</title>
</head>
<body>
<div class="head">
<h1>Meine tolle Seite…</h1>
<h1>…ist die beste von allen!</h1>
</div>
<div class="navigation">
<ul>
<li><a href="eintrag-1">Eintrag 1</a></li>
<li><a href="eintrag-2">Eintrag 2</a></li>
<li><a href="eintrag-3">Eintrag 3</a></li>
</ul>
</div>
<div class="content">
<h2>Mit Google Code Prettify …</h2>
<p>…würde hier alles hübscher aussehen!</p>
</div>
<div class="sidebar">
<div class="sidebar_entry">
<h3>Links</h3>
<ul>
<li><a href="http://google.com">Google</a></li>
<li><a href="http://medianotions.de">Medianotions</a></li>
</ul>
</div>
</div>
</body>
</html>
Die Einbindung von Google Code Prettify beschreibe ich hier nicht, das hat Google bereits selbst vorbildlich auf seinen eigenen Seiten gemacht.
Links
–
Kommentar schreiben
0 Kommentare