~abreu-alexandre/ubuntu-html5-theme/add-button-class-ubuntu

« back to all changes in this revision

Viewing changes to 0.1/ambiance/js/yuidoc-theme/assets/vendor/prettify/README.html

  • Committer: Tarmac
  • Author(s): Kyle Nitzsche
  • Date: 2013-11-01 20:38:57 UTC
  • mfrom: (90.1.4 trunk)
  • Revision ID: tarmac-20131101203857-o50mfgnebkogb950
This MR does three main things:
1) Implements yuidoc comments in all js files to support API doc generation, and provides yuidoc assets (theme dir and json file) needed to build the API docs. Bug LP: #1241029
3) Provides JS classes for shape and page with corresponding UbuntuUI prototype constructor functions. Bug LP: #1243248
4) Adds a getEl(UbuntuUIObject) to return the element for any Ubuntu class. Also LP: #1243248.

Approved by PS Jenkins bot, David Barth.

Show diffs side-by-side

added added

removed removed

Lines of Context:
 
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
&lt;link href="prettify.css" type="text/css" rel="stylesheet" />
 
30
&lt;script type="text/javascript" src="prettify.js">&lt;/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>&lt;pre class="prettyprint"&gt;...&lt;/pre&gt;</tt>
 
39
    or <tt>&lt;code class="prettyprint"&gt;...&lt;/code&gt;</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
>&lt;pre class=&quot;prettyprint <b>lang-html</b>&quot;&gt;
 
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
&lt;/pre&gt;</pre>
 
112
 
 
113
    <h3>It doesn't work on <tt>&lt;obfuscated code sample&gt;</tt>?</h3>
 
114
    <p>Yes.  Prettifying obfuscated code is like putting lipstick on a pig
 
115
    &mdash; 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 &amp; 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">&lt;pre class="prettyprint linenums:<b>4</b>"
 
142
&gt;// This is line 4.
 
143
foo();
 
144
bar();
 
145
baz();
 
146
boo();
 
147
far();
 
148
faz();
 
149
&lt;pre&gt;</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">&lt;pre class=prettyprint&gt;
 
165
int x = foo();  /* This is a comment  &lt;span class="nocode"&gt;This is not code&lt;/span&gt;
 
166
  Continuation of comment */
 
167
int y = bar();
 
168
&lt;/pre&gt;</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>