12.03.2008
Nicer sourcecode output
with Google Code Prettify
back to overview 0 Comments by Bogdan
Thanks to Google Code Prettify the syntax highlighting of sourcecode on a website is a piece of cake. The little helper, consisting of a JavaScript and a CSS file is embedded quickly and easy to use.
Thus, boring sourcecode in black and white …
Boring sourcecode in black and white
<html>
<head>
<title>My fantastic site</title>
</head>
<body>
<div class="head">
<h1>My fantastic site …</h1>
<h1>…is the best of all!</h1>
</div>
<div class="navigation">
<ul>
<li><a href="eintrag-1">Entry 1</a></li>
<li><a href="eintrag-2">Entry 2</a></li>
<li><a href="eintrag-3">Entry 3</a></li>
</ul>
</div>
<div class="content">
<h2>With Google Prettify …</h2>
<p>… everything would look much better!</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>
… admittedly, this text is not any more exciting, but at least it is sourcecode with syntax highlighting in colour.
Sourcecode with syntax highlighting
<html>
<head>
<title>My fantastic site</title>
</head>
<body>
<div class="head">
<h1>My fantastic site …</h1>
<h1>…is the best of all!</h1>
</div>
<div class="navigation">
<ul>
<li><a href="eintrag-1">Entry 1</a></li>
<li><a href="eintrag-2">Entry 2</a></li>
<li><a href="eintrag-3">Entry 3</a></li>
</ul>
</div>
<div class="content">
<h2>With Google Prettify …</h2>
<p>… everything would look much better!</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>
How to integrate Google Code Prettify is not described here, as Google has already done that in an exemplary way on their own website.
Links
—
Write a comment
0 Comments