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 |