| 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 <meta http-equiv="content-type" value="text/html; charset=UTF-8" /> | |
| 7 <title>Javascript code prettifier</title> | |
| 8 | |
| 9 <link href="src/prettify.css" type="text/css" rel="stylesheet" /> | |
| 10 | |
| 11 <script src="src/prettify.js" type="text/javascript"></script> | |
| 12 | |
| 13 <style type="text/css"> | |
| 14 body { margin-left: .5in } | |
| 15 h1, h2, h3, h4, .footer { margin-left: -.4in; } | |
| 16 </style> | |
| 17 </head> | |
| 18 | |
| 19 <body onload="prettyPrint()" bgcolor="white"> | |
| 20 <h1>Javascript code prettifier</h1> | |
| 21 <h1>Javascript 代码美容师</h1> | |
| 22 <h2>安装使用</h2> | |
| 23 <ol> | |
| 24 <li><a href="http://google-code-prettify.googlecode.com/files/prettify-sma
ll-5-Jul-2008.zip">下载</a> 文件 | |
| 25 <li>在你的文件中包含这儿的脚本和样式表(你要保证这儿的 css 和 js 文件按在你的服务器上, 并且调整在 <tt>script</tt> 和
<tt>link</tt>标签中的路径) | |
| 26 <pre class="prettyprint"> | |
| 27 <link href="prettify.css" type="text/css" rel="stylesheet" /> | |
| 28 <script type="text/javascript" src="prettify.js"></script></pre> | |
| 29 <li>添加<code class="prettyprint">onload="prettyPrint()"</code> 到你的文件的 body
标签中. | |
| 30 <li>修改样式表,使用你自己喜欢的颜色.</li> | |
| 31 </ol> | |
| 32 | |
| 33 <h2>使用方法<br></h2> | |
| 34 <p>在 | |
| 35 <tt><pre class="prettyprint">...</pre></tt> 或 <tt><code class
="prettyprint">...</code></tt> | |
| 36 中间放上代码片段,它就会自动被美化了. | |
| 37 | |
| 38 <table summary="code examples"> | |
| 39 <tr> | |
| 40 <th>The original | |
| 41 <th>Prettier | |
| 42 <tr> | |
| 43 <td><pre style="border: 1px solid #888;padding: 2px" | |
| 44 ><a name="voila1"></a>class Voila { | |
| 45 public: | |
| 46 // Voila | |
| 47 static const string VOILA = "Voila"; | |
| 48 | |
| 49 // will not interfere with embedded <a href="#voila1">tags</a>. | |
| 50 }</pre> | |
| 51 | |
| 52 <td><pre class="prettyprint"><a name="voila2"></a>class Voila { | |
| 53 public: | |
| 54 // Voila | |
| 55 static const string VOILA = "Voila"; | |
| 56 | |
| 57 // will not interfere with embedded <a href="#voila2">tags</a>. | |
| 58 }</pre> | |
| 59 </table> | |
| 60 | |
| 61 | |
| 62 <h2>常见问题</h2> | |
| 63 <h3 id="langs">它是为什么语言工作的?</h3> | |
| 64 <p><tt>prettify.js中的注释是权威的,但是它的语法分析程序可以在很多语言中使用</tt>,包括 C , | |
| 65 Java, Python, Bash, SQL, HTML, XML, CSS, Javascript, 和 Makefiles. | |
| 66 它在 Ruby, PHP, VB, 和 Awk 中还算可以,而且也可以在 Perl 和 Ruby的合适子集中起作用,但是, 因为注释的约定,它对 | |
| 67 Smalltalk, 或 CAML类似的语言起作用.<br></p> | |
| 68 | |
| 69 | |
| 70 <p>LISP系列的语言可以使用一个拓展<a href="http://code.google.com/p/google-code-prettify/s
ource/browse/trunk/src/lang-lisp.js"><code>lang-lisp.js</code></a>.</p><p>对于 <a
href="http://code.google.com/p/google-code-prettify/source/browse/trunk/src/lang
-css"><code>CSS</code></a>, | |
| 71 <a href="http://code.google.com/p/google-code-prettify/source/browse/trunk/s
rc/lang-hs"><code>Haskell</code></a>, | |
| 72 <a href="http://code.google.com/p/google-code-prettify/source/browse/trunk/s
rc/lang-lua.js"><code>Lua</code></a>, | |
| 73 <a href="http://code.google.com/p/google-code-prettify/source/browse/trunk/s
rc/lang-ml.js"><code>OCAML, SML, F#</code></a>, | |
| 74 <a href="http://code.google.com/p/google-code-prettify/source/browse/trunk/s
rc/lang-vb.js"><code>Visual Basic</code></a>, | |
| 75 <a href="http://code.google.com/p/google-code-prettify/source/browse/trunk/s
rc/lang-sql.js"><code>SQL</code></a>, | |
| 76 <a href="http://code.google.com/p/google-code-prettify/source/browse/trunk/s
rc/lang-proto.js"><code>Protocol Buffers</code></a>, 和 | |
| 77 <a href="http://code.google.com/p/google-code-prettify/source/browse/trunk/s
rc/lang-wiki.js"><code>WikiText</code></a>..也是类似的</p><p>如果你想给你喜欢的语言写个拓展版本, 请参阅<t
t>src/lang-lisp.js</tt> ,并写一个包括你的语言的拓展的 <a href="http://code.google.com/p/google
-code-prettify/issues/list" | |
| 78 >发布</a> 和一个测试用例.</p> | |
| 79 | |
| 80 <h3>如何指定我的代码在哪种语言里?</h3> | |
| 81 <p>你不需要指定语言环境,因为 <code>prettyprint()</code> | |
| 82 会对此进行猜测. 你可以使用<code> prettyprint </code>这个类通过指定语言的拓展名来指定语言,就像这样:</p> | |
| 83 <pre class="prettyprint lang-html" | |
| 84 ><pre class="prettyprint <b>lang-html</b>"> | |
| 85 The lang-* class specifies the language file extensions. | |
| 86 File extensions supported by default include | |
| 87 "bsh", "c", "cc", "cpp", "cs", "csh", "cyc", "cv", "htm", "html", | |
| 88 "java", "js", "m", "mxml", "perl", "pl", "pm", "py", "rb", "sh", | |
| 89 "xhtml", "xml", "xsl". | |
| 90 </pre></pre> | |
| 91 | |
| 92 <h3>它在混淆代码例子上不起作用吗?</h3> | |
| 93 <p>是的. 美化混淆代码就像给小猪涂口红,也就是不在这个工具的范围内. <br></p> | |
| 94 | |
| 95 <h3>它可以在那些浏览器上工作?</h3> | |
| 96 <p>这个工具已经在 IE 6, Firefox 1.5 & 2, 和 Safari 2.0.4 上测试通过. 打开 <a href="test
s/prettify_test.html">测试页面</a> ,看看它能不能在你的浏览器上起作用.</p> | |
| 97 | |
| 98 <h3>有什么改变?</h3> | |
| 99 <p>查看 <a href="CHANGES.html">变化日志</a></p> | |
| 100 | |
| 101 <h3> 为什么Prettyprinting 对WordPress中的字符串没用?</h3> | |
| 102 <p>很显然,wordpress 在 "smart quoting" 时会改变关闭符号. | |
| 103 这使得关闭符号跟开始符号不配套. | |
| 104 <p>这和复制粘贴代码一样,破坏了美化作用. 去 | |
| 105 <a href="http://wordpress.org/support/topic/125038" | |
| 106 >WordPress's help center</a> 查看更多关于如何关闭插入代码段时的"smart quoting"的信息.<
/p> | |
| 107 | |
| 108 <h3>如何在我的代码中加入行号? (Out of date -- see <a href="README.html">English version
</a>)</h3> | |
| 109 <p>你可以使用 <code>nocode</code> 类来标记 span 标记不是代码. | |
| 110 <pre><pre class=prettyprint> | |
| 111 <span class="<b>nocode</b>">1:</span> /* This is line 1 of my code | |
| 112 <span class="<b>nocode</b>">2:</span> * and here's line 2 */ | |
| 113 <span class="<b>nocode</b>">3:</span> print("I'm line number 3"); | |
| 114 </pre></pre>得到 | |
| 115 <pre class=prettyprint> | |
| 116 <span class="nocode">1:</span> /* This is line 1 of my code | |
| 117 <span class="nocode">2:</span> * and here's line 2 */ | |
| 118 <span class="nocode">3:</span> print("I'm line number 3"); | |
| 119 </pre> | |
| 120 | |
| 121 <p>查看一个更完整的例子: issue22 | |
| 122 <a href="tests/prettify_test.html#issue22">testcase</a>.</p> | |
| 123 | |
| 124 <h3>我得到了这样一条错误信息 "a is not a function" 或 "opt_whenDone is not
a function"</h3> | |
| 125 <p>如果你通过事件句柄条用 <code>prettyPrint</code> , 把它隐藏到一个函数中. <br></p><p>不要这么写 | |
| 126 </p><blockquote> | |
| 127 <code class="prettyprint lang-js" | |
| 128 >addEventListener('load', prettyPrint, false);</code> | |
| 129 </blockquote>而要这么写 | |
| 130 <blockquote> | |
| 131 <code class="prettyprint lang-js" | |
| 132 >addEventListener('load', function (event) { prettyPrint() }, false);</co
de> | |
| 133 </blockquote>这样的话,浏览器就不会把时间对象传递给 <code>prettyPrint</code> ,事件对象会让它困惑的. | |
| 134 | |
| 135 <br><br><br> | |
| 136 | |
| 137 <div class="footer"> | |
| 138 <!-- Created: Tue Oct 3 17:51:56 PDT 2006 --> | |
| 139 <!-- hhmts start --> | |
| 140 Last modified: Wed Jan 7 13:25:42 PST 2009<br><!-- hhmts end --> | |
| 141 </div> | |
| 142 </body> | |
| 143 </html> | |
| OLD | NEW |