a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra <link href="src/prettify.css" type="text/css" rel="stylesheet" />
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra <script src="src/prettify.js" type="text/javascript"></script>
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra body { margin-left: .5in }
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra h1, h2, h3, h4, .footer { margin-left: -.4in; }
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra <small style="float: right">Languages : <a href="README-zh-Hans.html">CH</a></small>
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra <li><a href="http://code.google.com/p/google-code-prettify/downloads/list">Download</a> a distribution
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra <li>Include the script and stylesheets in your document
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra (you will need to make sure the css and js file are on your server, and
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra adjust the paths in the <tt>script</tt> and <tt>link</tt> tag)
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra<link href="prettify.css" type="text/css" rel="stylesheet" />
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra<script type="text/javascript" src="prettify.js"></script></pre>
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra <li>Add <code class="prettyprint lang-html">onload="prettyPrint()"</code> to your
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra document's body tag.
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra <li>Modify the stylesheet to get the coloring you prefer</li>
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra <p>Put code snippets in
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra <tt><pre class="prettyprint">...</pre></tt>
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra or <tt><code class="prettyprint">...</code></tt>
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra and it will automatically be pretty printed.
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra <th>The original
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra <th>Prettier
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra <td><pre style="border: 1px solid #888;padding: 2px"
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra static const string VOILA = "Voila";
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra // will not interfere with embedded <a href="#voila1">tags</a>.
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra <td><pre class="prettyprint"><a name="voila2"></a>class Voila {
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra static const string VOILA = "Voila";
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra // will not interfere with embedded <a href="#voila2">tags</a>.
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra <h3 id="langs">Which languages does it work for?</h3>
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra <p>The comments in <tt>prettify.js</tt> are authoritative but the lexer
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra should work on a number of languages including C and friends,
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra Java, Python, Bash, SQL, HTML, XML, CSS, Javascript, and Makefiles.
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra It works passably on Ruby, PHP, VB, and Awk and a decent subset of Perl
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra and Ruby, but, because of commenting conventions, doesn't work on
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra Smalltalk, or CAML-like languages.</p>
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra <p>LISPy languages are supported via an extension:
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra <a href="http://code.google.com/p/google-code-prettify/source/browse/trunk/src/lang-lisp.js"
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra <p>And similarly for
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra <a href="http://code.google.com/p/google-code-prettify/source/browse/trunk/src/lang-css.js"
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra <a href="http://code.google.com/p/google-code-prettify/source/browse/trunk/src/lang-hs.js"
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra <a href="http://code.google.com/p/google-code-prettify/source/browse/trunk/src/lang-lua.js"
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra <a href="http://code.google.com/p/google-code-prettify/source/browse/trunk/src/lang-ml.js"
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra <a href="http://code.google.com/p/google-code-prettify/source/browse/trunk/src/lang-vb.js"
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra <a href="http://code.google.com/p/google-code-prettify/source/browse/trunk/src/lang-sql.js"
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra <a href="http://code.google.com/p/google-code-prettify/source/browse/trunk/src/lang-proto.js"
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra <a href="http://code.google.com/p/google-code-prettify/source/browse/trunk/src/lang-wiki.js"
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra <p>If you'd like to add an extension for your favorite language, please
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra <a href="http://code.google.com/p/google-code-prettify/issues/list"
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra >issue</a> including your language extension, and a testcase.</p>
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra <h3>How do I specify which language my code is in?</h3>
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra <p>You don't need to specify the language since <code>prettyprint()</code>
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra will guess. You can specify a language by specifying the language extension
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra along with the <code>prettyprint</code> class like so:</p>
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra><pre class="prettyprint <b>lang-html</b>">
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra The lang-* class specifies the language file extensions.
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra File extensions supported by default include
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra "bsh", "c", "cc", "cpp", "cs", "csh", "cyc", "cv", "htm", "html",
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra "java", "js", "m", "mxml", "perl", "pl", "pm", "py", "rb", "sh",
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra "xhtml", "xml", "xsl".
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra</pre></pre>
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra <h3>It doesn't work on <tt><obfuscated code sample></tt>?</h3>
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra <p>Yes. Prettifying obfuscated code is like putting lipstick on a pig
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra <p>It's been tested with IE 6, Firefox 1.5 & 2, and Safari 2.0.4.
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra Look at <a href="tests/prettify_test.html">the test page</a> to see if it
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra works in your browser.</p>
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra <p>See the <a href="CHANGES.html">change log</a></p>
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra <h3>Why doesn't Prettyprinting of strings work on WordPress?</h3>
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra <p>Apparently wordpress does "smart quoting" which changes close quotes.
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra This causes end quotes to not match up with open quotes.
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra <p>This breaks prettifying as well as copying and pasting of code samples.
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra <a href="http://wordpress.org/support/topic/125038"
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra >WordPress's help center</a> for info on how to stop smart quoting of code
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra snippets.</p>
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra <h3 id="linenums">How do I put line numbers in my code?</h3>
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra <p>You can use the <code>linenums</code> class to turn on line
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra numbering. If your code doesn't start at line number 1, you can
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra add a colon and a line number to the end of that class as in
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra <p>For example
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra<pre class="prettyprint"><pre class="prettyprint linenums:<b>4</b>"
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra>// This is line 4.
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra<pre></pre>
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra>// This is line 4.
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra <h3>How do I prevent a portion of markup from being marked as code?</h3>
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra <p>You can use the <code>nocode</code> class to identify a span of markup
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra that is not code.
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra<pre class="prettyprint"><pre class=prettyprint>
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitraint x = foo(); /* This is a comment <span class="nocode">This is not code</span>
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra Continuation of comment */
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitraint y = bar();
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra</pre></pre>
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitraint x = foo(); /* This is a comment <span class="nocode">This is not code</span>
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra Continuation of comment */
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitraint y = bar();
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra <p>For a more complete example see the issue22
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra <a href="tests/prettify_test.html#issue22">testcase</a>.</p>
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra <h3>I get an error message "a is not a function" or "opt_whenDone is not a function"</h3>
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra <p>If you are calling <code>prettyPrint</code> via an event handler, wrap it in a function.
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra Instead of doing
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra <blockquote>
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra >addEventListener('load', prettyPrint, false);</code>
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra </blockquote>
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra wrap it in a closure like
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra <blockquote>
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra >addEventListener('load', function (event) { prettyPrint() }, false);</code>
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra </blockquote>
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra so that the browser does not pass an event object to <code>prettyPrint</code> which
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra will confuse it.
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra<!-- Created: Tue Oct 3 17:51:56 PDT 2006 -->
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra<!-- hhmts start -->
a31d4503481b752a9ea058cce3d9b025d040a87cTilo MitraLast modified: Wed Jul 19 13:56:00 PST 2010
a31d4503481b752a9ea058cce3d9b025d040a87cTilo Mitra<!-- hhmts end -->