1 | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" |
---|
2 | "http://www.w3.org/TR/html4/strict.dtd"> |
---|
3 | <html> |
---|
4 | <head> |
---|
5 | |
---|
6 | <title>dojox.highlight - syntax highlighting | The Dojo Toolkit</title> |
---|
7 | |
---|
8 | <style type="text/css"> |
---|
9 | @import "../../../dijit/tests/css/dijitTests.css"; |
---|
10 | |
---|
11 | /* a sample set of definitions to use as a foundation to color your code */ |
---|
12 | @import "../resources/highlight.css"; |
---|
13 | |
---|
14 | /* additional styling for this test case */ |
---|
15 | pre.item code[class]:after { |
---|
16 | content: 'highlight: ' attr(class); |
---|
17 | display: block; text-align: right; |
---|
18 | font-size: smaller; |
---|
19 | color: #CCC; background: white; |
---|
20 | border-top: solid 1px; |
---|
21 | padding-top: 0.5em; |
---|
22 | } |
---|
23 | |
---|
24 | pre code { |
---|
25 | display: block; |
---|
26 | } |
---|
27 | |
---|
28 | code { |
---|
29 | background: #F0F0F0; |
---|
30 | } |
---|
31 | |
---|
32 | pre code, |
---|
33 | .ruby .subst { |
---|
34 | color: black; |
---|
35 | } |
---|
36 | </style> |
---|
37 | |
---|
38 | <script type="text/javascript" data-dojo-config="parseOnLoad: false, isDebug: true" src="../../../dojo/dojo.js"></script> |
---|
39 | |
---|
40 | <script type="text/javascript"> |
---|
41 | // initHighlightOnLoad is deprecated. |
---|
42 | // if parseOnLoad==true, the onLoad init stuff is run. |
---|
43 | // if parseOnLoad==false, you can call dojox.highlight.init(domNode) |
---|
44 | // |
---|
45 | // utilizing the dojo build system, the dojox.highlight engine |
---|
46 | // will "do it's best" based on the language maps available |
---|
47 | // at the time of construction. |
---|
48 | // |
---|
49 | |
---|
50 | require(["dojo/parser", "dojox/highlight", "dojox/highlight/languages/_all", "dojox/highlight/widget/Code"], function(){ |
---|
51 | |
---|
52 | dojo.query("code").forEach(dojox.highlight.init); |
---|
53 | dojo.xhrGet({ |
---|
54 | url: "../../../dojo/aspect.js", |
---|
55 | load: function(data){ |
---|
56 | var n = dojo.byId("foobar"), |
---|
57 | c = document.createElement('div'), |
---|
58 | e = n.parentNode.parentNode; |
---|
59 | c.innerHTML = '<pre class="item"><code class="javascript">' + data.replace(/\</gi,"<") + '</code></pre>'; |
---|
60 | e.replaceChild(c.firstChild, n.parentNode); |
---|
61 | dojo.query("pre > code", e).forEach(dojox.highlight.init); |
---|
62 | } |
---|
63 | }); |
---|
64 | |
---|
65 | dojo.ready(function(){ |
---|
66 | dojo.parser.parse(); |
---|
67 | }) |
---|
68 | |
---|
69 | }); |
---|
70 | |
---|
71 | </script> |
---|
72 | </head> |
---|
73 | <body> |
---|
74 | |
---|
75 | <h1 class="testTitle">dojox.highlight</h1> |
---|
76 | |
---|
77 | <p>client-side syntax highlighting for a number of languages.</p> |
---|
78 | |
---|
79 | <p><em>NOTE:</em> All languages listed here have working language definitions, though |
---|
80 | not all exist in the release or dojo subversion. The missing packs are not publically available. |
---|
81 | <span style="display:none">based on</span> |
---|
82 | </p> |
---|
83 | |
---|
84 | <h2>Examples:</h2> |
---|
85 | |
---|
86 | <p>Some Python code:</p> |
---|
87 | |
---|
88 | <pre class="item"><code>@requires_authorization |
---|
89 | def somefunc(param1, param2): |
---|
90 | '''A docstring''' |
---|
91 | if param1 > param2: # interesting |
---|
92 | print 'Gre\'ater' |
---|
93 | print '' |
---|
94 | return param2 - param1 + 1 |
---|
95 | |
---|
96 | class SomeClass:<br> pass |
---|
97 | </code></pre> |
---|
98 | |
---|
99 | <p>A chunk of PHP: </p> |
---|
100 | |
---|
101 | <pre class="item"><code class="php"> |
---|
102 | $opAr = array ( "-a|--append", // a or append toggle, nothing extra |
---|
103 | "-i|--input:", // i or input with next input being needed |
---|
104 | "-l|--list:", // l with input needed |
---|
105 | //"--foo", // broken |
---|
106 | "-f:", // f with no input |
---|
107 | "--wot:" // wot with input, no short |
---|
108 | ); |
---|
109 | |
---|
110 | |
---|
111 | $op = bgetop($opAr); |
---|
112 | if (is_array($op)) { print_r($op); } |
---|
113 | |
---|
114 | /* here is the code: */ |
---|
115 | |
---|
116 | function bgetop($opAr=array(),$unknown=true) { |
---|
117 | |
---|
118 | $argv = $_SERVER['argv']; |
---|
119 | $argc = $_SERVER['argc']; |
---|
120 | $argPos = 1; // zero is program running |
---|
121 | |
---|
122 | // foreach arg |
---|
123 | while ($argPos<$argc) { |
---|
124 | $arg = $argv[$argPos]; |
---|
125 | if ($arg{0}=="-") { |
---|
126 | if ($arg{1}=="-") { |
---|
127 | $var = substr($arg,2,strlen($arg)); |
---|
128 | } else { $var = $arg{1}; } |
---|
129 | foreach ($opAr as $opk => $opv) { |
---|
130 | if (!isset($return[$var])) { |
---|
131 | if (strpos($opv,$arg) !== FALSE) { |
---|
132 | // this is where the -f -foo fix needs to be, |
---|
133 | // the partial string exists in this record, |
---|
134 | // but we need to determine if it's accurate |
---|
135 | // somehow (i'm thinking: eregi?) |
---|
136 | if ($accurate=1) { |
---|
137 | // we foudn the key |
---|
138 | if (strpos($opv,':') !== FALSE) { |
---|
139 | // next value is the one to use, |
---|
140 | // then skip it in the parser. |
---|
141 | if (isset($argv[$argPos+1])) { |
---|
142 | $return[$var] = $argv[++$argPos]; |
---|
143 | } else { |
---|
144 | $return[$var] = FALSE; |
---|
145 | } |
---|
146 | } else { |
---|
147 | // just set the toggle |
---|
148 | $return[$var] = TRUE; |
---|
149 | } |
---|
150 | // don't check this opAr value again |
---|
151 | unset($opAr[$opk]); |
---|
152 | } |
---|
153 | } // if accurate |
---|
154 | } // !isset already |
---|
155 | } // foreach opAr |
---|
156 | } else { // we weren't expecting a non-hyphened argument, possibly just a filename, or whatnot |
---|
157 | if ($unknown) { $return['unknown'][]=$arg; } |
---|
158 | } |
---|
159 | $argPos++; |
---|
160 | } // while argPos < argc |
---|
161 | |
---|
162 | if (is_array($return)) { |
---|
163 | return $return; |
---|
164 | } else { return 0; } |
---|
165 | |
---|
166 | } // end function bgetop |
---|
167 | |
---|
168 | </code></pre> |
---|
169 | |
---|
170 | <p>A custom XML document:</p> |
---|
171 | |
---|
172 | <pre class="item"><code><?xml version="1.0"?> |
---|
173 | <response value="ok"> |
---|
174 | <text>Ok</text> |
---|
175 | <comment/> |
---|
176 | <ns:description><![CDATA[ |
---|
177 | CDATA is <not> magical. |
---|
178 | ]]></ns:description> |
---|
179 | </response> |
---|
180 | </code></pre> |
---|
181 | |
---|
182 | <p>Some HTML code:</p> |
---|
183 | |
---|
184 | <pre class="item"><code><head> |
---|
185 | <title>Title</title> |
---|
186 | <body> |
---|
187 | <p class="something">Something</p> |
---|
188 | <p class=something>Something</p> |
---|
189 | <!-- comment --> |
---|
190 | <p class>Something</p> |
---|
191 | <p class="something" title="p">Something</p> |
---|
192 | </body> |
---|
193 | </code></pre> |
---|
194 | |
---|
195 | <p>HTML with Django templates:</p> |
---|
196 | |
---|
197 | <pre class="item"><code>{% if articles|length %} |
---|
198 | {% for article in articles %} |
---|
199 | |
---|
200 | {# Striped table #} |
---|
201 | <tr class="{% cycle odd,even %}"> |
---|
202 | <td>{{ article|default:"Hi... "|escape }}</td> |
---|
203 | <td>{{ article.date|date:"d.m.Y" }}</td> |
---|
204 | </tr> |
---|
205 | |
---|
206 | {% endfor %} |
---|
207 | {% endif %} |
---|
208 | |
---|
209 | {% comment %} |
---|
210 | Comments may be long and |
---|
211 | multiline. |
---|
212 | {% endcomment %} |
---|
213 | </code></pre> |
---|
214 | |
---|
215 | <p>Some CSS code:</p> |
---|
216 | |
---|
217 | <pre class="item"><code>body, |
---|
218 | html { |
---|
219 | font: Tahoma, Arial, san-serif; |
---|
220 | } |
---|
221 | |
---|
222 | #content { |
---|
223 | width: 100%; /* css comment */ |
---|
224 | height: 100% |
---|
225 | } |
---|
226 | |
---|
227 | p[lang=ru] { |
---|
228 | color: red; |
---|
229 | } |
---|
230 | </code></pre> |
---|
231 | |
---|
232 | <p>Explicit Python highlight:</p> |
---|
233 | |
---|
234 | <pre class="item"><code class="python">for x in [1, 2, 3]: |
---|
235 | count(x) |
---|
236 | </code></pre> |
---|
237 | |
---|
238 | <p>Disabled highlighting:</p> |
---|
239 | |
---|
240 | <pre class="item"><code class="no-highlight"><div id="contents"> |
---|
241 | <p>Hello, World! |
---|
242 | </div> |
---|
243 | </code></pre> |
---|
244 | |
---|
245 | <p>Normal dojo-looking code</p> |
---|
246 | |
---|
247 | <pre class="item"><code> |
---|
248 | dojo.provide("some.object"); |
---|
249 | dojo.declare("some.object",null,{ |
---|
250 | param: "value", |
---|
251 | _myMethod: function(/* Event */e){ |
---|
252 | this.inherited(arguments); |
---|
253 | }, |
---|
254 | // comments |
---|
255 | _another: function(){ |
---|
256 | dojo.addClass("foo","hovered"); |
---|
257 | } |
---|
258 | }); |
---|
259 | dojo.addOnLoad(function(){ |
---|
260 | // |
---|
261 | // comments with <HTML> inline |
---|
262 | var d = dojo; |
---|
263 | d.mixin(d,{ |
---|
264 | foo: function(e){ |
---|
265 | d.bar(e); |
---|
266 | }, |
---|
267 | bar: function(e){ |
---|
268 | alert(e); |
---|
269 | } |
---|
270 | }); |
---|
271 | }); |
---|
272 | </code></pre> |
---|
273 | |
---|
274 | <p>Lazy, xhr'd code:</p> |
---|
275 | |
---|
276 | <pre class="item"><code id="foobar"></code></pre> |
---|
277 | |
---|
278 | <hr> |
---|
279 | |
---|
280 | <p>Text with inlined JavaScript code: <code class="javascript">dojo.forEach(a, function(x){ console.log(x); });</code> — that was the inlined sample.</p> |
---|
281 | |
---|
282 | <hr> |
---|
283 | |
---|
284 | <p>Markuped code (python), no language was specified:</p> |
---|
285 | |
---|
286 | <div data-dojo-type="dojox.highlight.widget.Code">@requires_authorization |
---|
287 | def somefunc(param1, param2): |
---|
288 | '''A docstring''' |
---|
289 | if param1 > param2: # interesting |
---|
290 | print 'Gre\'ater' |
---|
291 | print '' |
---|
292 | return param2 - param1 + 1 |
---|
293 | |
---|
294 | class SomeClass:<br> pass |
---|
295 | </div> |
---|
296 | |
---|
297 | <p>Markuped code, "python" was specified:</p> |
---|
298 | |
---|
299 | <div data-dojo-type="dojox.highlight.widget.Code" class="python"> |
---|
300 | @requires_authorization |
---|
301 | def somefunc(param1, param2): |
---|
302 | '''A docstring''' |
---|
303 | if param1 > param2: # interesting |
---|
304 | print 'Gre\'ater' |
---|
305 | print '' |
---|
306 | return param2 - param1 + 1 |
---|
307 | |
---|
308 | class SomeClass:<br> pass |
---|
309 | </div> |
---|
310 | |
---|
311 | <p>Some XQuery code:</p> |
---|
312 | |
---|
313 | <pre class="item"><code class="xquery"> |
---|
314 | declare variable $my:entityName as xs:string external; |
---|
315 | |
---|
316 | declare variable $databaseURI := concat('jdbc://getCreditDefaultSwapsByEntityName?cd%&', $my:entityName); |
---|
317 | declare variable $creditDefaultSwaps := collection($databaseURI); |
---|
318 | |
---|
319 | (: This is a comment :) |
---|
320 | |
---|
321 | (: This is a multi-line |
---|
322 | comment :) |
---|
323 | declare function local:equityRows($root) { |
---|
324 | for $equity in $root//equity |
---|
325 | let $referenceEntity := $creditDefaultSwaps//fpml:referenceEntity |
---|
326 | where $equity/name = $referenceEntity/fpml:entityName |
---|
327 | return |
---|
328 | <tr xmlns="http://www.w3.org/1999/xhtml"> |
---|
329 | <td>{ $equity/*:symbol/text() }</td> |
---|
330 | <td>{ $equity/*:name/text() }</td> |
---|
331 | <td>{ $equity/*:high/text() }</td> |
---|
332 | <td>{ $equity/*:currency/text() }</td> |
---|
333 | </tr> |
---|
334 | }; |
---|
335 | |
---|
336 | <table border="1"> |
---|
337 | <tr> |
---|
338 | <th>Ticker Symbol</th> |
---|
339 | <th>Company Name</th> |
---|
340 | <th>High</th> |
---|
341 | <th>Currency</th> |
---|
342 | </tr> |
---|
343 | { local:equityRows(/) } |
---|
344 | </table> |
---|
345 | </code></pre> |
---|
346 | |
---|
347 | <p>Some Java code:</p> |
---|
348 | |
---|
349 | <pre class="item"><code class="java"> |
---|
350 | import java.io.*; |
---|
351 | public final class DOHRobot extends Applet{ |
---|
352 | // The last reported mouse x,y. |
---|
353 | // If this is different from the real one, something's up. |
---|
354 | private int lastMouseX; |
---|
355 | private int lastMouseY; |
---|
356 | JSObject dohrobot = null; |
---|
357 | |
---|
358 | final private class onvisible extends ComponentAdapter{ |
---|
359 | public void componentShown(ComponentEvent evt){ |
---|
360 | /* sets the security manager to fix a bug * |
---|
361 | * in liveconnect in Safari on Mac */ |
---|
362 | if(key != -1){ return; } |
---|
363 | Thread thread = new Thread(){ |
---|
364 | public void run(){ |
---|
365 | window = (JSObject) JSObject.getWindow(applet()); |
---|
366 | AccessController.doPrivileged(new PrivilegedAction(){ |
---|
367 | public Object run(){ |
---|
368 | log("> init Robot"); |
---|
369 | try{ |
---|
370 | SecurityManager oldsecurity = System.getSecurityManager(); |
---|
371 | boolean needsSecurityManager = applet().getParameter("needsSecurityManager").equals("true"); |
---|
372 | log("Socket connections managed? "+needsSecurityManager); |
---|
373 | try{ |
---|
374 | securitymanager.checkTopLevelWindow(null); |
---|
375 | // xdomain |
---|
376 | if(charMap == null){ |
---|
377 | if(!confirm("DOH has detected that the current Web page is attempting to access DOH,\n"+ |
---|
378 | "but belongs to a different domain than the one you agreed to let DOH automate.")){ |
---|
379 | return null; |
---|
380 | } |
---|
381 | } |
---|
382 | }catch(Exception e){ |
---|
383 | e.printStackTrace(); |
---|
384 | securitymanager = new RobotSecurityManager(needsSecurityManager, |
---|
385 | oldsecurity); |
---|
386 | System.setSecurityManager(securitymanager); |
---|
387 | } |
---|
388 | // instantiate the Robot |
---|
389 | robot = new Robot(); |
---|
390 | robot.setAutoWaitForIdle(true); |
---|
391 | }catch(Exception e){ |
---|
392 | key = -2; |
---|
393 | e.printStackTrace(); |
---|
394 | } |
---|
395 | return null; |
---|
396 | } |
---|
397 | }); |
---|
398 | if(key == -2){ |
---|
399 | // applet not trusted |
---|
400 | // start the test without it |
---|
401 | window.eval("doh.robot._appletDead=true;doh.run();"); |
---|
402 | } |
---|
403 | } |
---|
404 | }; |
---|
405 | thread.start(); |
---|
406 | } |
---|
407 | } |
---|
408 | } |
---|
409 | </code></pre> |
---|
410 | |
---|
411 | <p>A Groovy fragment:</p> |
---|
412 | |
---|
413 | <pre class="item"><code class="groovy"> |
---|
414 | /* |
---|
415 | * A comment test block |
---|
416 | * |
---|
417 | * ?debug |
---|
418 | * ?nodebug |
---|
419 | * |
---|
420 | */ |
---|
421 | |
---|
422 | def settings = [ |
---|
423 | debug: false, |
---|
424 | compress: true, |
---|
425 | console: false, |
---|
426 | ping: false, |
---|
427 | testing: false, |
---|
428 | profile: false |
---|
429 | ]; |
---|
430 | |
---|
431 | // function calls |
---|
432 | init(settings); |
---|
433 | render(settings); |
---|
434 | |
---|
435 | def render(settings) { |
---|
436 | request.header = settings; |
---|
437 | render(); |
---|
438 | } |
---|
439 | |
---|
440 | def init(settings) { |
---|
441 | |
---|
442 | // Default parameter handling. |
---|
443 | settings.each { key, value -> |
---|
444 | def onkey = "${key}"; |
---|
445 | def offkey = "no${key}"; |
---|
446 | if (foo("/request/params/${onkey}",null) != null) { |
---|
447 | settings[key] = true; |
---|
448 | } |
---|
449 | else if (foo("/request/params/${offkey}",null) != null) { |
---|
450 | settings[key] = false; |
---|
451 | } |
---|
452 | } |
---|
453 | |
---|
454 | return settings; |
---|
455 | } |
---|
456 | </code></pre> |
---|
457 | |
---|
458 | </body></html> |
---|