| OLD | NEW |
|---|
| (Empty) |
| 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 a.Extension { display: inline-block; width: 5em; height:2.5em; border: 1px
solid black; vertical-align: top; text-align: center } | |
| 16 </style> | |
| 17 </head> | |
| 18 | |
| 19 <body onload="prettyPrint()" bgcolor="white"> | |
| 20 <small style="float: right">Languages : <a href="README-zh-Hans.html">CH</a>
</small> | |
| 21 <h1>Javascript code prettifier</h1> | |
| 22 | |
| 23 <h2>Setup</h2> | |
| 24 <ol> | |
| 25 <li><a href="http://code.google.com/p/google-code-prettify/downloads/list"
>Download</a> a distribution | |
| 26 <li>Include the script tag below in your document | |
| 27 <pre class="prettyprint"> | |
| 28 >script src="https://google-code-prettify.googlecode.com/svn/loader/run_prett
ify.js></script></pre> | |
| 29 <li>See <a href="http://code.google.com/p/google-code-prettify/wiki/Gettin
gStarted">Getting Started</a> to configure that URL with options you need.</a> | |
| 30 <li>Look at the <a href="http://google-code-prettify.googlecode.com/svn/tr
unk/styles/index.html">skin gallery</a> and pick styles that suit you.</li> | |
| 31 </ol> | |
| 32 | |
| 33 <h2>Usage</h2> | |
| 34 <p>Put code snippets in | |
| 35 <tt><pre class="prettyprint">...</pre></tt> | |
| 36 or <tt><code class="prettyprint">...</code></tt> | |
| 37 and it will automatically be pretty printed. | |
| 38 | |
| 39 <table summary="code examples"> | |
| 40 <tr> | |
| 41 <th>The original | |
| 42 <th>Prettier | |
| 43 <tr> | |
| 44 <td><pre style="border: 1px solid #888;padding: 2px" | |
| 45 ><a name="voila1"></a>class Voila { | |
| 46 public: | |
| 47 // Voila | |
| 48 static const string VOILA = "Voila"; | |
| 49 | |
| 50 // will not interfere with embedded <a href="#voila1">tags</a>. | |
| 51 }</pre> | |
| 52 | |
| 53 <td><pre class="prettyprint"><a name="voila2"></a>class Voila { | |
| 54 public: | |
| 55 // Voila | |
| 56 static const string VOILA = "Voila"; | |
| 57 | |
| 58 // will not interfere with embedded <a href="#voila2">tags</a>. | |
| 59 }</pre> | |
| 60 </table> | |
| 61 | |
| 62 <h2>FAQ</h2> | |
| 63 <h3 id="langs">For which languages does it work?</h3> | |
| 64 <p>The comments in <tt>prettify.js</tt> are authoritative but the lexer | |
| 65 should work on a number of languages including C and friends, | |
| 66 Java, Python, Bash, SQL, HTML, XML, CSS, Javascript, Makefiles, | |
| 67 and Rust. | |
| 68 It works passably on Ruby, PHP, VB, and Awk and a decent subset of Perl | |
| 69 and Ruby, but, because of commenting conventions, but doesn't work on | |
| 70 Smalltalk.</p> | |
| 71 | |
| 72 <p>Other languages are supported via extensions: | |
| 73 <div> | |
| 74 <a class="Extension" href="http://code.google.com/p/google-code-prettify/s
ource/browse/trunk/src/lang-apollo.js">Apollo</a> | |
| 75 <a class="Extension" href="http://code.google.com/p/google-code-prettify/s
ource/browse/trunk/src/lang-basic.js">Basic</a> | |
| 76 <a class="Extension" href="http://code.google.com/p/google-code-prettify/s
ource/browse/trunk/src/lang-clj.js">Clojure</a> | |
| 77 <a class="Extension" href="http://code.google.com/p/google-code-prettify/s
ource/browse/trunk/src/lang-css.js">CSS</a> | |
| 78 <a class="Extension" href="http://code.google.com/p/google-code-prettify/s
ource/browse/trunk/src/lang-dart.js">Dart</a> | |
| 79 <a class="Extension" href="http://code.google.com/p/google-code-prettify/s
ource/browse/trunk/src/lang-erlang.js">Erlang</a> | |
| 80 <a class="Extension" href="http://code.google.com/p/google-code-prettify/s
ource/browse/trunk/src/lang-go.js">Go</a> | |
| 81 <a class="Extension" href="http://code.google.com/p/google-code-prettify/s
ource/browse/trunk/src/lang-hs.js">Haskell</a> | |
| 82 <a class="Extension" href="http://code.google.com/p/google-code-prettify/s
ource/browse/trunk/src/lang-lisp.js">Lisp, Scheme</a> | |
| 83 <a class="Extension" href="http://code.google.com/p/google-code-prettify/s
ource/browse/trunk/src/lang-llvm.js">Llvm</a> | |
| 84 <a class="Extension" href="http://code.google.com/p/google-code-prettify/s
ource/browse/trunk/src/lang-lua.js">Lua</a> | |
| 85 <a class="Extension" href="http://code.google.com/p/google-code-prettify/s
ource/browse/trunk/src/lang-matlab.js">Matlab</a> | |
| 86 <a class="Extension" href="http://code.google.com/p/google-code-prettify/s
ource/browse/trunk/src/lang-ml.js">MLs:F#, Ocaml,SML</a> | |
| 87 <a class="Extension" href="http://code.google.com/p/google-code-prettify/s
ource/browse/trunk/src/lang-mumps.js">Mumps</a> | |
| 88 <a class="Extension" href="http://code.google.com/p/google-code-prettify/s
ource/browse/trunk/src/lang-n.js">Nemerle</a> | |
| 89 <a class="Extension" href="http://code.google.com/p/google-code-prettify/s
ource/browse/trunk/src/lang-pascal.js">Pascal</a> | |
| 90 <a class="Extension" href="http://code.google.com/p/google-code-prettify/s
ource/browse/trunk/src/lang-proto.js">Protocol buffers</a> | |
| 91 <a class="Extension" href="http://code.google.com/p/google-code-prettify/s
ource/browse/trunk/src/lang-r.js">R, S</a> | |
| 92 <a class="Extension" href="http://code.google.com/p/google-code-prettify/s
ource/browse/trunk/src/lang-rd.js">RD</a> | |
| 93 <a class="Extension" href="http://code.google.com/p/google-code-prettify/s
ource/browse/trunk/src/lang-scala.js">Scala</a> | |
| 94 <a class="Extension" href="http://code.google.com/p/google-code-prettify/s
ource/browse/trunk/src/lang-sql.js">SQL</a> | |
| 95 <a class="Extension" href="http://code.google.com/p/google-code-prettify/s
ource/browse/trunk/src/lang-tcl.js">TCL</a> | |
| 96 <a class="Extension" href="http://code.google.com/p/google-code-prettify/s
ource/browse/trunk/src/lang-tex.js">Latek</a> | |
| 97 <a class="Extension" href="http://code.google.com/p/google-code-prettify/s
ource/browse/trunk/src/lang-vb.js">Visual Basic</a> | |
| 98 <a class="Extension" href="http://code.google.com/p/google-code-prettify/s
ource/browse/trunk/src/lang-vhdl.js">CHDL</a> | |
| 99 <a class="Extension" href="http://code.google.com/p/google-code-prettify/s
ource/browse/trunk/src/lang-wiki.js">Wiki</a> | |
| 100 <a class="Extension" href="http://code.google.com/p/google-code-prettify/s
ource/browse/trunk/src/lang-xq.js">XQ</a> | |
| 101 <a class="Extension" href="http://code.google.com/p/google-code-prettify/s
ource/browse/trunk/src/lang-yaml.js">YAML</a> | |
| 102 </div> | |
| 103 | |
| 104 <p>If you'd like to add an extension for your favorite language, please | |
| 105 look at <tt>src/lang-lisp.js</tt> and file an | |
| 106 <a href="http://code.google.com/p/google-code-prettify/issues/list" | |
| 107 >issue</a> including your language extension, and a testcase.</p> | |
| 108 | |
| 109 <h3>How do I specify the language of my code?</h3> | |
| 110 <p>You don't need to specify the language since <code>prettyprint()</code> | |
| 111 will guess. You can specify a language by specifying the language extension | |
| 112 along with the <code>prettyprint</code> class like so:</p> | |
| 113 <pre class="prettyprint lang-html" | |
| 114 ><pre class="prettyprint <b>lang-html</b>"> | |
| 115 The lang-* class specifies the language file extensions. | |
| 116 File extensions supported by default include | |
| 117 "bsh", "c", "cc", "cpp", "cs", "csh", "cyc", "cv", "htm", "html", | |
| 118 "java", "js", "m", "mxml", "perl", "pl", "pm", "py", "rb", "sh", | |
| 119 "xhtml", "xml", "xsl". | |
| 120 </pre></pre> | |
| 121 | |
| 122 <p>You may also use the | |
| 123 <a href="http://dev.w3.org/html5/spec-author-view/the-code-element.html#the-
code-element" | |
| 124 >HTML 5</a> convention of embedding a <tt>code</tt> element inside the | |
| 125 <code>PRE</code> and using <code>language-java</code> style classes. | |
| 126 E.g. <xmp class="prettyprint"><pre class="prettyprint"><code class="language
-java">...</code></pre></xmp> | |
| 127 | |
| 128 <h3>It doesn't work on <tt><obfuscated code sample></tt>?</h3> | |
| 129 <p>Yes. Prettifying obfuscated code is like putting lipstick on a pig | |
| 130 — i.e. outside the scope of this tool.</p> | |
| 131 | |
| 132 <h3>Which browsers does it work with?</h3> | |
| 133 <p>It's been tested with IE 6, Firefox 1.5 & 2, and Safari 2.0.4. | |
| 134 Look at <a href="tests/prettify_test.html">the test page</a> to see if it | |
| 135 works in your browser.</p> | |
| 136 | |
| 137 <h3>What's changed?</h3> | |
| 138 <p>See the <a href="CHANGES.html">change log</a></p> | |
| 139 | |
| 140 <h3>Why doesn't Prettyprinting of strings work on WordPress?</h3> | |
| 141 <p>Apparently wordpress does "smart quoting" which changes close quotes. | |
| 142 This causes end quotes to not match up with open quotes. | |
| 143 <p>This breaks prettifying as well as copying and pasting of code samples. | |
| 144 See | |
| 145 <a href="http://wordpress.org/support/topic/125038" | |
| 146 >WordPress's help center</a> for info on how to stop smart quoting of code | |
| 147 snippets.</p> | |
| 148 | |
| 149 <h3 id="linenums">How do I put line numbers in my code?</h3> | |
| 150 <p>You can use the <code>linenums</code> class to turn on line | |
| 151 numbering. If your code doesn't start at line number 1, you can | |
| 152 add a colon and a line number to the end of that class as in | |
| 153 <code>linenums:52</code>. | |
| 154 | |
| 155 <p>For example | |
| 156 <pre class="prettyprint"><pre class="prettyprint linenums:<b>4</b>" | |
| 157 >// This is line 4. | |
| 158 foo(); | |
| 159 bar(); | |
| 160 baz(); | |
| 161 boo(); | |
| 162 far(); | |
| 163 faz(); | |
| 164 <pre></pre> | |
| 165 produces | |
| 166 <pre class="prettyprint linenums:4" | |
| 167 >// This is line 4. | |
| 168 foo(); | |
| 169 bar(); | |
| 170 baz(); | |
| 171 boo(); | |
| 172 far(); | |
| 173 faz(); | |
| 174 </pre> | |
| 175 | |
| 176 <h3>How do I prevent a portion of markup from being marked as code?</h3> | |
| 177 <p>You can use the <code>nocode</code> class to identify a span of markup | |
| 178 that is not code. | |
| 179 <pre class="prettyprint"><pre class=prettyprint> | |
| 180 int x = foo(); /* This is a comment <span class="nocode">This is not cod
e</span> | |
| 181 Continuation of comment */ | |
| 182 int y = bar(); | |
| 183 </pre></pre> | |
| 184 produces | |
| 185 <pre class="prettyprint"> | |
| 186 int x = foo(); /* This is a comment <span class="nocode">This is not code</spa
n> | |
| 187 Continuation of comment */ | |
| 188 int y = bar(); | |
| 189 </pre> | |
| 190 | |
| 191 <p>For a more complete example see the issue22 | |
| 192 <a href="tests/prettify_test.html#issue22">testcase</a>.</p> | |
| 193 | |
| 194 <h3>I get an error message "a is not a function" or "opt_whenDone is not a f
unction"</h3> | |
| 195 <p>If you are calling <code>prettyPrint</code> via an event handler, wrap it
in a function. | |
| 196 Instead of doing | |
| 197 <blockquote> | |
| 198 <code class="prettyprint lang-js" | |
| 199 >addEventListener('load', prettyPrint, false);</code> | |
| 200 </blockquote> | |
| 201 wrap it in a closure like | |
| 202 <blockquote> | |
| 203 <code class="prettyprint lang-js" | |
| 204 >addEventListener('load', function (event) { prettyPrint() }, false);</co
de> | |
| 205 </blockquote> | |
| 206 so that the browser does not pass an event object to <code>prettyPrint</code
> which | |
| 207 will confuse it. | |
| 208 | |
| 209 <h3>How can I customize the colors and styles of my code?</h3> | |
| 210 <p> | |
| 211 Prettify adds <code><span></code> with <code>class</code>es describing | |
| 212 the kind of code. You can create CSS styles to matches these | |
| 213 classes. | |
| 214 See the | |
| 215 <a href="http://google-code-prettify.googlecode.com/svn/trunk/styles/index.h
tml"> | |
| 216 theme gallery</a> for examples. | |
| 217 </p> | |
| 218 | |
| 219 <h3>I can't add classes to my code (because it comes from Markdown, etc.)</h
3> | |
| 220 <p> | |
| 221 Instead of <code class="prettyprint"><pre class="prettyprint ..."></co
de> you can use a | |
| 222 comment or processing instructions that survives processing instructions : | |
| 223 <code><?prettify ...?></code> works as explained in | |
| 224 <a href="http://code.google.com/p/google-code-prettify/wiki/GettingStarted">
Getting Started</a></p> | |
| 225 | |
| 226 <br><br><br> | |
| 227 | |
| 228 <div class="footer"> | |
| 229 <!-- Created: Tue Oct 3 17:51:56 PDT 2006 --> | |
| 230 <!-- hhmts start -->Last modified: Mon Mar 4 14:16:04 EST 2013 <!-- hhmts end -
-> | |
| 231 </div> | |
| 232 </body> | |
| 233 </html> | |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 786953007:
npm_modules: Fork bower_components into Polymer 0.4.0 and 0.5.0 versions (Closed)
Base URL: https://chromium.googlesource.com/infra/third_party/npm_modules.git@master