Syntax Highlight Code On Any Page Using Google Code Prettify
| Posted by watashii | Filed under Programming, Web
The Google Code Prettify is a JavaScript module that allows syntax highlighting of any code snippets on a HTML page. Setting this up on any web page is a simple 3 step process, and is supported on most common browsers.
[Demo] (Based on: prettify-21-May-2009.zip)
[Download Source Files]
1) Include the JavaScript and CSS file within the head of the HTML page
2) Include the action onload=”prettyPrint()” within the body element
3) Wrap your code snippet between pre tags: <pre class=”prettyprint”>…</pre>
Notes:
For code snippets containing “<” and “>” characters, “;>” and “;<” must be replaced in order to work, for example HTML code.
You can explicitly specify the code language to render, for example in Step 3 we can extend this by forcing it to Perl, using <pre class=”prettyprint lang-perl“>…</pre>
The languages available are “bsh”, “c”, “cc”, “cpp”, “cs”, “csh”, “cyc”, “cv”, “htm”, “html”, “java”, “js”, “m”, “mxml”, “perl”, “pl”, “pm”, “py”, “rb”, “sh”, “xhtml”, “xml”, “xsl”.
Line numbers can be included by added <span> 1: </span> at the beginning of each line (this is a bit of manual work though).
Lisp, CSS, Haskell, LUA, OCAML, SML, F#, Visual Basic, SQL, Protocol Buffers, and WikiText languages are also support by inclusion of src/lang-*.js files. See FAQ.
Share:
Related Posts:
- Overlay & Slideshow Images with Lightbox 2
- Get URL Variables in JavaScript & HTML
- A Better LightBox Using jQuery
Tags: highlight, html, javascript, prettify, syntax
