| 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.pygments - syntax highlighting | The Dojo Toolkit</title> |
|---|
| 7 | <style type="text/css"> |
|---|
| 8 | @import "../../../dijit/tests/css/dijitTests.css"; |
|---|
| 9 | |
|---|
| 10 | /* CSS rules for debugging */ |
|---|
| 11 | |
|---|
| 12 | pre code[class]:after { |
|---|
| 13 | content: 'highlight: ' attr(class); |
|---|
| 14 | display: block; text-align: right; |
|---|
| 15 | font-size: smaller; |
|---|
| 16 | color: #CCC; background: white; |
|---|
| 17 | border-top: solid 1px; |
|---|
| 18 | padding-top: 0.5em; |
|---|
| 19 | } |
|---|
| 20 | |
|---|
| 21 | pre code { |
|---|
| 22 | display: block; |
|---|
| 23 | } |
|---|
| 24 | </style> |
|---|
| 25 | |
|---|
| 26 | <!-- a sample set of definitions to use as a foundation to color your code --> |
|---|
| 27 | <link rel="stylesheet" type="text/css" href="../resources/pygments/default.css"> |
|---|
| 28 | |
|---|
| 29 | <script type="text/javascript" data-dojo-config="parseOnLoad: true, isDebug: true" src="../../../dojo/dojo.js"></script> |
|---|
| 30 | <!-- |
|---|
| 31 | <script type="text/javascript" src="../_base.js"></script> |
|---|
| 32 | <script type="text/javascript" src="../languages/pygments/xml.js"></script> |
|---|
| 33 | <script type="text/javascript" src="../languages/pygments/html.js"></script> |
|---|
| 34 | <script type="text/javascript" src="../languages/pygments/css.js"></script> |
|---|
| 35 | <script type="text/javascript" src="../languages/pygments/javascript.js"></script> |
|---|
| 36 | --> |
|---|
| 37 | |
|---|
| 38 | <script type="text/javascript"> |
|---|
| 39 | dojo.require("dojox.highlight"); |
|---|
| 40 | /* |
|---|
| 41 | dojo.require("dojox.highlight.languages.pygments.xml"); |
|---|
| 42 | dojo.require("dojox.highlight.languages.pygments.html"); |
|---|
| 43 | dojo.require("dojox.highlight.languages.pygments.css"); |
|---|
| 44 | dojo.require("dojox.highlight.languages.pygments.javascript"); |
|---|
| 45 | */ |
|---|
| 46 | dojo.require("dojox.highlight.languages.pygments._www"); |
|---|
| 47 | dojo.require("dojo.parser"); |
|---|
| 48 | |
|---|
| 49 | dojo.addOnLoad(function(){ |
|---|
| 50 | var sel = dojo.byId("theme"), |
|---|
| 51 | sty = dojo.query("link[rel='stylesheet']", document.head)[0]; |
|---|
| 52 | dojo.query("option[value='default']", sel)[0].selected = "selected"; |
|---|
| 53 | dojo.connect(sel, "onchange", function(){ |
|---|
| 54 | sty.href = "../resources/pygments/" + sel.value + ".css"; |
|---|
| 55 | }); |
|---|
| 56 | }); |
|---|
| 57 | </script> |
|---|
| 58 | </head> |
|---|
| 59 | <body> |
|---|
| 60 | |
|---|
| 61 | <h1>Test Pygments-based highlighting</h1> |
|---|
| 62 | |
|---|
| 63 | <p>Current theme from the pygments set: |
|---|
| 64 | <select id="theme"> |
|---|
| 65 | <option value="autumn">Autumn</option> |
|---|
| 66 | <option value="borland">Borland</option> |
|---|
| 67 | <option value="colorful">Colorful</option> |
|---|
| 68 | <option value="default">Default</option> |
|---|
| 69 | <option value="emacs">Emacs</option> |
|---|
| 70 | <option value="friendly">Friendly</option> |
|---|
| 71 | <option value="fruity">Fruity</option> |
|---|
| 72 | <option value="manni">Manni</option> |
|---|
| 73 | <option value="murphy">Murphy</option> |
|---|
| 74 | <option value="native">Native</option> |
|---|
| 75 | <option value="pastie">Pastie</option> |
|---|
| 76 | <option value="perldoc">Perldoc</option> |
|---|
| 77 | <option value="trac">Trac</option> |
|---|
| 78 | </select> |
|---|
| 79 | </p> |
|---|
| 80 | |
|---|
| 81 | <p>Javascript:</p> |
|---|
| 82 | |
|---|
| 83 | <pre><code dojoType="dojox.highlight.Code">function initHighlight(block) { |
|---|
| 84 | if (block.className.search(/\bno\-highlight\b/) != -1) |
|---|
| 85 | return false; |
|---|
| 86 | try { |
|---|
| 87 | blockText(block); |
|---|
| 88 | } catch (e) { |
|---|
| 89 | if (e == 'Complex markup') |
|---|
| 90 | return; |
|---|
| 91 | }//try |
|---|
| 92 | var classes = block.className.split(/\s+/); |
|---|
| 93 | for (var i = 0; i < classes.length; i++) { |
|---|
| 94 | if (LANGUAGES[classes[i]]) { |
|---|
| 95 | highlightLanguage(block, classes[i]); |
|---|
| 96 | return; |
|---|
| 97 | }//if |
|---|
| 98 | }//for |
|---|
| 99 | highlightAuto(block); |
|---|
| 100 | }//initHighlight |
|---|
| 101 | </code></pre> |
|---|
| 102 | |
|---|
| 103 | <p>Some CSS code:</p> |
|---|
| 104 | |
|---|
| 105 | <pre><code dojoType="dojox.highlight.Code">body, |
|---|
| 106 | html { |
|---|
| 107 | font: Tahoma, Arial, sans-serif; |
|---|
| 108 | } |
|---|
| 109 | |
|---|
| 110 | #content { |
|---|
| 111 | width: 100%; /* test comment */ |
|---|
| 112 | height: 100% |
|---|
| 113 | } |
|---|
| 114 | |
|---|
| 115 | p[lang=ru] { |
|---|
| 116 | color: red; |
|---|
| 117 | } |
|---|
| 118 | </code></pre> |
|---|
| 119 | |
|---|
| 120 | <p>Some HTML code:</p> |
|---|
| 121 | |
|---|
| 122 | <pre><code dojoType="dojox.highlight.Code"><head> |
|---|
| 123 | <title>Title</title> |
|---|
| 124 | <body> |
|---|
| 125 | <p class="something">Something</p> |
|---|
| 126 | <p class=something>Something</p> |
|---|
| 127 | <!-- comment --> |
|---|
| 128 | <p class>Something</p> |
|---|
| 129 | <p class="something" title="p">Something</p> |
|---|
| 130 | </body> |
|---|
| 131 | </code></pre> |
|---|
| 132 | |
|---|
| 133 | <p>A custom XML document:</p> |
|---|
| 134 | |
|---|
| 135 | <pre><code dojoType="dojox.highlight.Code"><?xml version="1.0"?> |
|---|
| 136 | <response value="ok"> |
|---|
| 137 | <text>Ok</text> |
|---|
| 138 | <comment/> |
|---|
| 139 | <ns:description><![CDATA[ |
|---|
| 140 | CDATA is <not> magical. |
|---|
| 141 | ]]></ns:description> |
|---|
| 142 | </response> |
|---|
| 143 | </code></pre> |
|---|
| 144 | |
|---|
| 145 | </body> |
|---|
| 146 | </html> |
|---|
