close
Warning:
Can't synchronize with repository "(default)" (/common/SVN/wimax does not appear to be a Subversion repository.). Look in the Trac log for more information.
- Timestamp:
-
Jan 30, 2019, 11:46:28 PM (5 years ago)
- Author:
-
trac
- Comment:
-
—
Legend:
- Unmodified
- Added
- Removed
- Modified
-
v3
|
v4
|
|
1 | | = Using HTML in Wiki Text |
| 1 | = Using HTML in Wiki Text = |
2 | 2 | |
3 | 3 | Trac supports the display of HTML in any wiki context, by using the `#!html` [wiki:WikiProcessors WikiProcessor]. |
… |
… |
|
6 | 6 | In particular, you can't insert a start tag in an `#!html` block, resume normal wiki text and insert the corresponding end tag in a second `#!html` block. |
7 | 7 | |
8 | | For creating styled `<div>`s, `<span>`s or even complex tables containing arbitrary Wiki text, there is a powerful alternative: `#!div`, `#!span` and `#!table`, `#!tr`, `#!td` and `#!th` blocks. Those Wiki processors are built-in and do not require additional packages to be installed. |
9 | | |
10 | | == How to use `#!html` #HowtoUseHTML |
| 8 | Fortunately, for creating styled <div>s, <span>s or even complex tables containing arbitrary Wiki text, there is a powerful alternative: `#!div`, `#!span` and `#!table`, `#!tr`, `#!td` and `#!th` blocks. Those Wiki processors are built-in and do not require additional packages to be installed. |
| 9 | |
| 10 | == How to use `#!html` == #HowtoUseHTML |
11 | 11 | To inform the wiki engine that a block of text should be treated as HTML, use the ''html'' processor: |
12 | 12 | |
… |
… |
|
14 | 14 | {{{#!td |
15 | 15 | {{{ |
16 | | {{{#!html |
| 16 | {{{ |
| 17 | #!html |
17 | 18 | <h1 style="text-align: right; color: blue">HTML Test</h1> |
18 | 19 | }}} |
… |
… |
|
20 | 21 | }}} |
21 | 22 | {{{#!td style="padding-left: 2em" |
22 | | {{{#!html |
| 23 | {{{ |
| 24 | #!html |
23 | 25 | <h1 style="text-align: right; color: blue">HTML Test</h1> |
24 | 26 | }}} |
… |
… |
|
27 | 29 | Note that Trac sanitizes your HTML code before displaying it. That means that potentially dangerous constructs, such as Javascript event handlers, will be removed from the output. |
28 | 30 | |
29 | | The filtering is done by [http://genshi.edgewall.org/ Genshi] and the output will be a well-formed fragment of HTML. This means that you cannot use two HTML blocks, one for opening a <div> and another for closing it, in order to wrap arbitrary wiki text. |
| 31 | The filtering is done by [http://genshi.edgewall.org/ Genshi] and the output will be a well-formed fragment of HTML. This means that you can no longer use two HTML blocks, one for opening a <div> and another for closing it, in order to wrap arbitrary wiki text. |
| 32 | The new way to wrap any wiki content inside a <div> is to use the `#!div` Wiki processor. |
30 | 33 | |
31 | 34 | == How to use `#!div` and `#!span` == #HowtoUseDivSpan |
… |
… |
|
34 | 37 | {{{#!td |
35 | 38 | {{{ |
36 | | {{{#!div class="important" |
| 39 | {{{ |
| 40 | #!div class="important" |
37 | 41 | **important** is a predefined class. |
38 | 42 | }}} |
39 | 43 | }}} |
40 | 44 | {{{ |
41 | | {{{#!div style="border: 1pt dotted; margin: 1em" |
| 45 | {{{ |
| 46 | #!div style="border: 1pt dotted; margin: 1em" |
42 | 47 | **wikipage** is another predefined class that will |
43 | 48 | be used when no class is specified. |
… |
… |
|
45 | 50 | }}} |
46 | 51 | {{{ |
47 | | {{{#!div class="compact" style="border: 1pt dotted; margin: 1em" |
| 52 | {{{ |
| 53 | #!div class="compact" style="border: 1pt dotted; margin: 1em" |
48 | 54 | **compact** is another predefined class reducing |
49 | 55 | the padding within the `<div>` to a minimum. |
… |
… |
|
51 | 57 | }}} |
52 | 58 | {{{ |
53 | | {{{#!div class="wikipage compact" style="border: 1pt dotted" |
| 59 | {{{ |
| 60 | #!div class="wikipage compact" style="border: 1pt dotted" |
54 | 61 | Classes can be combined (here **wikipage** and **compact**) |
55 | 62 | which results in this case in reduced //vertical// |
… |
… |
|
59 | 66 | }}} |
60 | 67 | {{{ |
61 | | {{{#!div class="" style="border: 1pt dotted; margin: 1em" |
| 68 | {{{ |
| 69 | #!div class="" style="border: 1pt dotted; margin: 1em" |
62 | 70 | Explicitly specifying no classes is //not// the same |
63 | 71 | as specifying no class attribute, as this will remove |
… |
… |
|
68 | 76 | {{{#!td style="padding-left: 2em" |
69 | 77 | |
70 | | {{{#!div class="important" |
| 78 | {{{ |
| 79 | #!div class="important" |
71 | 80 | **important** is a predefined class. |
72 | 81 | }}} |
73 | 82 | |
74 | | {{{#!div style="border: 1pt dotted; margin: 1em" |
| 83 | {{{ |
| 84 | #!div style="border: 1pt dotted; margin: 1em" |
75 | 85 | **wikipage** is another predefined class that will |
76 | 86 | be used when no class is specified. |
77 | 87 | }}} |
78 | 88 | |
79 | | {{{#!div class="compact" style="border: 1pt dotted; margin: 1em" |
| 89 | {{{ |
| 90 | #!div class="compact" style="border: 1pt dotted; margin: 1em" |
80 | 91 | **compact** is another predefined class reducing |
81 | 92 | the padding within the `<div>` to a minimum. |
82 | 93 | }}} |
83 | 94 | |
84 | | {{{#!div class="wikipage compact" style="border: 1pt dotted" |
| 95 | {{{ |
| 96 | #!div class="wikipage compact" style="border: 1pt dotted" |
85 | 97 | Classes can be combined (here **wikipage** and **compact**) |
86 | 98 | which results in this case in reduced //vertical// |
… |
… |
|
89 | 101 | }}} |
90 | 102 | |
91 | | {{{#!div class="" style="border: 1pt dotted; margin: 1em" |
| 103 | {{{ |
| 104 | #!div class="" style="border: 1pt dotted; margin: 1em" |
92 | 105 | Explicitly specifying no classes is //not// the same |
93 | 106 | as specifying no class attribute, as this will remove |
… |
… |
|
97 | 110 | }}} |
98 | 111 | |
99 | | Note that the contents of a `#!div` block are contained in one or more paragraphs, which have a non-zero top and bottom margin. This leads to the top and bottom padding in the example above. To remove the top and bottom margin of the content, add the `compact` class to the `#!div`. Another predefined class besides `wikipage` and `compact` is `important`, which can be used to make a paragraph stand out. Extra CSS classes can be defined via [TracInterfaceCustomization#SiteAppearance site/style.css]. |
| 112 | Note that the contents of a `#!div` block are contained in one or more paragraphs, which have a non-zero top and bottom margin. This leads to the top and bottom padding in the example above. To remove the top and bottom margin of the content, add the `compact` class to the `#!div`. Another predefined class besides `wikipage` and `compact` is `important`, which can be used to make a paragraph stand out. Extra CSS classes can be defined via the `site/style.css` file for example, see TracInterfaceCustomization#SiteAppearance. |
100 | 113 | |
101 | 114 | For spans, you should use the Macro call syntax: |
… |
… |
|
114 | 127 | }}} |
115 | 128 | |
116 | | == How to use `#!td` and other table related processors #Tables |
| 129 | == How to use `#!td` and other table related processors == #Tables |
117 | 130 | |
118 | 131 | The `#!td` or `#!th` processors should be used to create table data and table header cells, respectively. The other processors `#!table` and `#!tr` are not required for introducing a table structure, as `#!td` and `#!th` will do this automatically. The `|-` row separator can be used to start a new row when needed, but some may prefer to use a `#!tr` block for that, as this introduces a more formal grouping and offers the possibility to use an extra level of indentation. The main purpose of the `#!table` and `#!tr` is to give the possibility to specify HTML attributes, like ''style'' or ''valign'' to these elements. |
… |
… |
|
152 | 165 | attributes to the table itself... |
153 | 166 | |
154 | | {{{#!table style="border:none;text-align:center;margin:auto" |
| 167 | {{{ |
| 168 | #!table style="border:none;text-align:center;margin:auto" |
155 | 169 | {{{#!tr ==================================== |
156 | 170 | {{{#!th style="border: none" |
… |
… |
|
214 | 228 | attributes to the table itself... |
215 | 229 | |
216 | | {{{#!table style="border:none;text-align:center;margin:auto" |
| 230 | {{{ |
| 231 | #!table style="border:none;text-align:center;margin:auto" |
217 | 232 | {{{#!tr ==================================== |
218 | 233 | {{{#!th style="border: none" |
… |
… |
|
288 | 303 | }}} |
289 | 304 | |
290 | | == HTML comments |
| 305 | == HTML comments == |
291 | 306 | HTML comments are stripped from the output of the `html` processor. To add an HTML comment to a wiki page, use the `htmlcomment` processor, available since Trac 0.12: |
292 | 307 | ||= Wiki Markup =|| |
293 | 308 | {{{#!td |
294 | 309 | {{{ |
295 | | {{{#!htmlcomment |
| 310 | {{{ |
| 311 | #!htmlcomment |
296 | 312 | This block is translated to an HTML comment. |
297 | 313 | It can contain <tags> and &entities; that will not be escaped in the output. |
… |
… |
|
310 | 326 | }}} |
311 | 327 | |
312 | | The character sequence `--` is not allowed in HTML comments, and will generate a rendering error. |
313 | | |
314 | | |
315 | | == More Information |
| 328 | Please note that the character sequence "`--`" is not allowed in HTML comments, and will generate a rendering error. |
| 329 | |
| 330 | |
| 331 | == More Information == |
316 | 332 | |
317 | 333 | * http://www.w3.org/ -- World Wide Web Consortium |
… |
… |
|
319 | 335 | |
320 | 336 | ---- |
321 | | See also: WikiFormatting, WikiProcessors, WikiRestructuredText |
| 337 | See also: WikiProcessors, WikiFormatting, WikiRestructuredText |