<link href="prettify.css" type="text/css" rel="stylesheet" /> <script type="text/javascript" src="prettify.js"></script>
onload="prettyPrint()"
åˆ°ä½ çš„æ–‡ä»¶çš„ body æ ‡ç¾ä¸.
在 <pre class="prettyprint">...</pre> 或 <code class="prettyprint">...</code> ä¸é—´æ”¾ä¸Šä»£ç 片段,它就会自动被美化了.
The original | Prettier |
---|---|
class Voila { public: // Voila static const string VOILA = "Voila"; // will not interfere with embedded tags. } | class Voila { public: // Voila static const string VOILA = "Voila"; // will not interfere with embedded tags. } |
prettify.jsä¸çš„注释是æƒå¨çš„,但是它的è¯æ³•åˆ†æžç¨‹åºå¯ä»¥åœ¨å¾ˆå¤šè¯è¨€ä¸ä½¿ç”¨,包括 C ,
Java, Python, Bash, SQL, HTML, XML, CSS, Javascript, 和 Makefiles.
它在 Ruby, PHP, VB, å’Œ Awk ä¸è¿˜ç®—å¯ä»¥,而且也å¯ä»¥åœ¨ Perl å’Œ Rubyçš„åˆé€‚å集ä¸èµ·ä½œç”¨,但是, å› ä¸ºæ³¨é‡Šçš„çº¦å®š,它对
Smalltalk, 或 CAML类似的è¯è¨€èµ·ä½œç”¨.
LISP系列的è¯è¨€å¯ä»¥ä½¿ç”¨ä¸€ä¸ªæ‹“展lang-lisp.js
.
对于 CSS
,
Haskell
,
Lua
,
OCAML, SML, F#
,
Visual Basic
,
SQL
,
Protocol Buffers
, 和
WikiText
..也是类似的
å¦‚æžœä½ æƒ³ç»™ä½ å–œæ¬¢çš„è¯è¨€å†™ä¸ªæ‹“展版本, 请å‚阅src/lang-lisp.js ,å¹¶å†™ä¸€ä¸ªåŒ…æ‹¬ä½ çš„è¯è¨€çš„拓展的 å‘布 和一个测试用例.
ä½ ä¸éœ€è¦æŒ‡å®šè¯è¨€çŽ¯å¢ƒ,å› ä¸º prettyprint()
会对æ¤è¿›è¡ŒçŒœæµ‹. ä½ å¯ä»¥ä½¿ç”¨ prettyprint
这个类通过指定è¯è¨€çš„拓展åæ¥æŒ‡å®šè¯è¨€,å°±åƒè¿™æ ·:
<pre class="prettyprint lang-html"> 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>
是的. 美化混淆代ç å°±åƒç»™å°çŒªæ¶‚å£çº¢,也就是ä¸åœ¨è¿™ä¸ªå·¥å…·çš„范围内.
这个工具已ç»åœ¨ IE 6, Firefox 1.5 & 2, å’Œ Safari 2.0.4 上测试通过. 打开 æµ‹è¯•é¡µé¢ ,看看它能ä¸èƒ½åœ¨ä½ çš„æµè§ˆå™¨ä¸Šèµ·ä½œç”¨.
查看 å˜åŒ–日志
很显然,wordpress 在 "smart quoting" 时会改å˜å…³é—符å·. 这使得关é—符å·è·Ÿå¼€å§‹ç¬¦å·ä¸é…套.
这和å¤åˆ¶ç²˜è´´ä»£ç ä¸€æ ·,ç ´å了美化作用. 去 WordPress's help center 查看更多关于如何关é—æ’入代ç 段时的"smart quoting"çš„ä¿¡æ¯.
ä½ å¯ä»¥ä½¿ç”¨ nocode
ç±»æ¥æ ‡è®° span æ ‡è®°ä¸æ˜¯ä»£ç .
<pre class=prettyprint> <span class="nocode">1:</span> /* This is line 1 of my code <span class="nocode">2:</span> * and here's line 2 */ <span class="nocode">3:</span> print("I'm line number 3"); </pre>得到
1: /* This is line 1 of my code 2: * and here's line 2 */ 3: print("I'm line number 3");
查看一个更完整的例å: issue22 testcase.
å¦‚æžœä½ é€šè¿‡äº‹ä»¶å¥æŸ„æ¡ç”¨ prettyPrint
, 把它éšè—到一个函数ä¸.
ä¸è¦è¿™ä¹ˆå†™
addEventListener('load', prettyPrint, false);
而è¦è¿™ä¹ˆå†™
addEventListener('load', function (event) { prettyPrint() }, false);
è¿™æ ·çš„è¯,æµè§ˆå™¨å°±ä¸ä¼šæŠŠæ—¶é—´å¯¹è±¡ä¼ 递给 prettyPrint
,事件对象会让它困惑的.