README.html (7912B)
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 2 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 3 4 <html> 5 <head> 6 <title>Javascript code prettifier</title> 7 8 <link href="src/prettify.css" type="text/css" rel="stylesheet" /> 9 10 <script src="src/prettify.js" type="text/javascript"></script> 11 12 <style type="text/css"> 13 body { margin-left: .5in } 14 h1, h2, h3, h4, .footer { margin-left: -.4in; } 15 </style> 16 </head> 17 18 <body onload="prettyPrint()" bgcolor="white"> 19 <small style="float: right">Languages : <a href="README-zh-Hans.html">CH</a></small> 20 <h1>Javascript code prettifier</h1> 21 22 <h2>Setup</h2> 23 <ol> 24 <li><a href="http://code.google.com/p/google-code-prettify/downloads/list">Download</a> a distribution 25 <li>Include the script and stylesheets in your document 26 (you will need to make sure the css and js file are on your server, and 27 adjust the paths in the <tt>script</tt> and <tt>link</tt> tag) 28 <pre class="prettyprint"> 29 <link href="prettify.css" type="text/css" rel="stylesheet" /> 30 <script type="text/javascript" src="prettify.js"></script></pre> 31 <li>Add <code class="prettyprint lang-html">onload="prettyPrint()"</code> to your 32 document's body tag. 33 <li>Modify the stylesheet to get the coloring you prefer</li> 34 </ol> 35 36 <h2>Usage</h2> 37 <p>Put code snippets in 38 <tt><pre class="prettyprint">...</pre></tt> 39 or <tt><code class="prettyprint">...</code></tt> 40 and it will automatically be pretty printed. 41 42 <table summary="code examples"> 43 <tr> 44 <th>The original 45 <th>Prettier 46 <tr> 47 <td><pre style="border: 1px solid #888;padding: 2px" 48 ><a name="voila1"></a>class Voila { 49 public: 50 // Voila 51 static const string VOILA = "Voila"; 52 53 // will not interfere with embedded <a href="#voila1">tags</a>. 54 }</pre> 55 56 <td><pre class="prettyprint"><a name="voila2"></a>class Voila { 57 public: 58 // Voila 59 static const string VOILA = "Voila"; 60 61 // will not interfere with embedded <a href="#voila2">tags</a>. 62 }</pre> 63 </table> 64 65 <h2>FAQ</h2> 66 <h3 id="langs">Which languages does it work for?</h3> 67 <p>The comments in <tt>prettify.js</tt> are authoritative but the lexer 68 should work on a number of languages including C and friends, 69 Java, Python, Bash, SQL, HTML, XML, CSS, Javascript, and Makefiles. 70 It works passably on Ruby, PHP, VB, and Awk and a decent subset of Perl 71 and Ruby, but, because of commenting conventions, doesn't work on 72 Smalltalk, or CAML-like languages.</p> 73 74 <p>LISPy languages are supported via an extension: 75 <a href="http://code.google.com/p/google-code-prettify/source/browse/trunk/src/lang-lisp.js" 76 ><code>lang-lisp.js</code></a>.</p> 77 <p>And similarly for 78 <a href="http://code.google.com/p/google-code-prettify/source/browse/trunk/src/lang-css.js" 79 ><code>CSS</code></a>, 80 <a href="http://code.google.com/p/google-code-prettify/source/browse/trunk/src/lang-hs.js" 81 ><code>Haskell</code></a>, 82 <a href="http://code.google.com/p/google-code-prettify/source/browse/trunk/src/lang-lua.js" 83 ><code>Lua</code></a>, 84 <a href="http://code.google.com/p/google-code-prettify/source/browse/trunk/src/lang-ml.js" 85 ><code>OCAML, SML, F#</code></a>, 86 <a href="http://code.google.com/p/google-code-prettify/source/browse/trunk/src/lang-vb.js" 87 ><code>Visual Basic</code></a>, 88 <a href="http://code.google.com/p/google-code-prettify/source/browse/trunk/src/lang-sql.js" 89 ><code>SQL</code></a>, 90 <a href="http://code.google.com/p/google-code-prettify/source/browse/trunk/src/lang-proto.js" 91 ><code>Protocol Buffers</code></a>, and 92 <a href="http://code.google.com/p/google-code-prettify/source/browse/trunk/src/lang-wiki.js" 93 ><code>WikiText</code></a>.. 94 95 <p>If you'd like to add an extension for your favorite language, please 96 look at <tt>src/lang-lisp.js</tt> and file an 97 <a href="http://code.google.com/p/google-code-prettify/issues/list" 98 >issue</a> including your language extension, and a testcase.</p> 99 100 <h3>How do I specify which language my code is in?</h3> 101 <p>You don't need to specify the language since <code>prettyprint()</code> 102 will guess. You can specify a language by specifying the language extension 103 along with the <code>prettyprint</code> class like so:</p> 104 <pre class="prettyprint lang-html" 105 ><pre class="prettyprint <b>lang-html</b>"> 106 The lang-* class specifies the language file extensions. 107 File extensions supported by default include 108 "bsh", "c", "cc", "cpp", "cs", "csh", "cyc", "cv", "htm", "html", 109 "java", "js", "m", "mxml", "perl", "pl", "pm", "py", "rb", "sh", 110 "xhtml", "xml", "xsl". 111 </pre></pre> 112 113 <h3>It doesn't work on <tt><obfuscated code sample></tt>?</h3> 114 <p>Yes. Prettifying obfuscated code is like putting lipstick on a pig 115 — i.e. outside the scope of this tool.</p> 116 117 <h3>Which browsers does it work with?</h3> 118 <p>It's been tested with IE 6, Firefox 1.5 & 2, and Safari 2.0.4. 119 Look at <a href="tests/prettify_test.html">the test page</a> to see if it 120 works in your browser.</p> 121 122 <h3>What's changed?</h3> 123 <p>See the <a href="CHANGES.html">change log</a></p> 124 125 <h3>Why doesn't Prettyprinting of strings work on WordPress?</h3> 126 <p>Apparently wordpress does "smart quoting" which changes close quotes. 127 This causes end quotes to not match up with open quotes. 128 <p>This breaks prettifying as well as copying and pasting of code samples. 129 See 130 <a href="http://wordpress.org/support/topic/125038" 131 >WordPress's help center</a> for info on how to stop smart quoting of code 132 snippets.</p> 133 134 <h3 id="linenums">How do I put line numbers in my code?</h3> 135 <p>You can use the <code>linenums</code> class to turn on line 136 numbering. If your code doesn't start at line number 1, you can 137 add a colon and a line number to the end of that class as in 138 <code>linenums:52</code>. 139 140 <p>For example 141 <pre class="prettyprint"><pre class="prettyprint linenums:<b>4</b>" 142 >// This is line 4. 143 foo(); 144 bar(); 145 baz(); 146 boo(); 147 far(); 148 faz(); 149 <pre></pre> 150 produces 151 <pre class="prettyprint linenums:4" 152 >// This is line 4. 153 foo(); 154 bar(); 155 baz(); 156 boo(); 157 far(); 158 faz(); 159 </pre> 160 161 <h3>How do I prevent a portion of markup from being marked as code?</h3> 162 <p>You can use the <code>nocode</code> class to identify a span of markup 163 that is not code. 164 <pre class="prettyprint"><pre class=prettyprint> 165 int x = foo(); /* This is a comment <span class="nocode">This is not code</span> 166 Continuation of comment */ 167 int y = bar(); 168 </pre></pre> 169 produces 170 <pre class="prettyprint"> 171 int x = foo(); /* This is a comment <span class="nocode">This is not code</span> 172 Continuation of comment */ 173 int y = bar(); 174 </pre> 175 176 <p>For a more complete example see the issue22 177 <a href="tests/prettify_test.html#issue22">testcase</a>.</p> 178 179 <h3>I get an error message "a is not a function" or "opt_whenDone is not a function"</h3> 180 <p>If you are calling <code>prettyPrint</code> via an event handler, wrap it in a function. 181 Instead of doing 182 <blockquote> 183 <code class="prettyprint lang-js" 184 >addEventListener('load', prettyPrint, false);</code> 185 </blockquote> 186 wrap it in a closure like 187 <blockquote> 188 <code class="prettyprint lang-js" 189 >addEventListener('load', function (event) { prettyPrint() }, false);</code> 190 </blockquote> 191 so that the browser does not pass an event object to <code>prettyPrint</code> which 192 will confuse it. 193 194 <br><br><br> 195 196 <div class="footer"> 197 <!-- Created: Tue Oct 3 17:51:56 PDT 2006 --> 198 <!-- hhmts start --> 199 Last modified: Wed Jul 19 13:56:00 PST 2010 200 <!-- hhmts end --> 201 </div> 202 </body> 203 </html>