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