|
- Timestamp:
-
Jul 17, 2018, 2:11:27 PM (6 years ago)
- Author:
-
trac
- Comment:
-
--
Legend:
- Unmodified
- Added
- Removed
- Modified
-
v1
|
v2
|
|
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 | | 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 |
| 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 |
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 | | {{{ |
17 | | #!html |
| 16 | {{{#!html |
18 | 17 | <h1 style="text-align: right; color: blue">HTML Test</h1> |
19 | 18 | }}} |
… |
… |
|
21 | 20 | }}} |
22 | 21 | {{{#!td style="padding-left: 2em" |
23 | | {{{ |
24 | | #!html |
| 22 | {{{#!html |
25 | 23 | <h1 style="text-align: right; color: blue">HTML Test</h1> |
26 | 24 | }}} |
… |
… |
|
29 | 27 | 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. |
30 | 28 | |
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. |
| 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. |
33 | 30 | |
34 | 31 | == How to use `#!div` and `#!span` == #HowtoUseDivSpan |
… |
… |
|
37 | 34 | {{{#!td |
38 | 35 | {{{ |
39 | | {{{ |
40 | | #!div class="important" |
| 36 | {{{#!div class="important" |
41 | 37 | **important** is a predefined class. |
42 | 38 | }}} |
43 | 39 | }}} |
44 | 40 | {{{ |
45 | | {{{ |
46 | | #!div style="border: 1pt dotted; margin: 1em" |
| 41 | {{{#!div style="border: 1pt dotted; margin: 1em" |
47 | 42 | **wikipage** is another predefined class that will |
48 | 43 | be used when no class is specified. |
… |
… |
|
50 | 45 | }}} |
51 | 46 | {{{ |
52 | | {{{ |
53 | | #!div class="compact" style="border: 1pt dotted; margin: 1em" |
| 47 | {{{#!div class="compact" style="border: 1pt dotted; margin: 1em" |
54 | 48 | **compact** is another predefined class reducing |
55 | 49 | the padding within the `<div>` to a minimum. |
… |
… |
|
57 | 51 | }}} |
58 | 52 | {{{ |
59 | | {{{ |
60 | | #!div class="wikipage compact" style="border: 1pt dotted" |
| 53 | {{{#!div class="wikipage compact" style="border: 1pt dotted" |
61 | 54 | Classes can be combined (here **wikipage** and **compact**) |
62 | 55 | which results in this case in reduced //vertical// |
… |
… |
|
66 | 59 | }}} |
67 | 60 | {{{ |
68 | | {{{ |
69 | | #!div class="" style="border: 1pt dotted; margin: 1em" |
| 61 | {{{#!div class="" style="border: 1pt dotted; margin: 1em" |
70 | 62 | Explicitly specifying no classes is //not// the same |
71 | 63 | as specifying no class attribute, as this will remove |
… |
… |
|
76 | 68 | {{{#!td style="padding-left: 2em" |
77 | 69 | |
78 | | {{{ |
79 | | #!div class="important" |
| 70 | {{{#!div class="important" |
80 | 71 | **important** is a predefined class. |
81 | 72 | }}} |
82 | 73 | |
83 | | {{{ |
84 | | #!div style="border: 1pt dotted; margin: 1em" |
| 74 | {{{#!div style="border: 1pt dotted; margin: 1em" |
85 | 75 | **wikipage** is another predefined class that will |
86 | 76 | be used when no class is specified. |
87 | 77 | }}} |
88 | 78 | |
89 | | {{{ |
90 | | #!div class="compact" style="border: 1pt dotted; margin: 1em" |
| 79 | {{{#!div class="compact" style="border: 1pt dotted; margin: 1em" |
91 | 80 | **compact** is another predefined class reducing |
92 | 81 | the padding within the `<div>` to a minimum. |
93 | 82 | }}} |
94 | 83 | |
95 | | {{{ |
96 | | #!div class="wikipage compact" style="border: 1pt dotted" |
| 84 | {{{#!div class="wikipage compact" style="border: 1pt dotted" |
97 | 85 | Classes can be combined (here **wikipage** and **compact**) |
98 | 86 | which results in this case in reduced //vertical// |
… |
… |
|
101 | 89 | }}} |
102 | 90 | |
103 | | {{{ |
104 | | #!div class="" style="border: 1pt dotted; margin: 1em" |
| 91 | {{{#!div class="" style="border: 1pt dotted; margin: 1em" |
105 | 92 | Explicitly specifying no classes is //not// the same |
106 | 93 | as specifying no class attribute, as this will remove |
… |
… |
|
110 | 97 | }}} |
111 | 98 | |
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. |
| 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]. |
113 | 100 | |
114 | 101 | For spans, you should use the Macro call syntax: |
… |
… |
|
127 | 114 | }}} |
128 | 115 | |
129 | | == How to use `#!td` and other table related processors == #Tables |
| 116 | == How to use `#!td` and other table related processors #Tables |
130 | 117 | |
131 | 118 | 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. |
… |
… |
|
165 | 152 | attributes to the table itself... |
166 | 153 | |
167 | | {{{ |
168 | | #!table style="border:none;text-align:center;margin:auto" |
| 154 | {{{#!table style="border:none;text-align:center;margin:auto" |
169 | 155 | {{{#!tr ==================================== |
170 | 156 | {{{#!th style="border: none" |
… |
… |
|
228 | 214 | attributes to the table itself... |
229 | 215 | |
230 | | {{{ |
231 | | #!table style="border:none;text-align:center;margin:auto" |
| 216 | {{{#!table style="border:none;text-align:center;margin:auto" |
232 | 217 | {{{#!tr ==================================== |
233 | 218 | {{{#!th style="border: none" |
… |
… |
|
303 | 288 | }}} |
304 | 289 | |
305 | | == HTML comments == |
| 290 | == HTML comments |
306 | 291 | 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: |
307 | 292 | ||= Wiki Markup =|| |
308 | 293 | {{{#!td |
309 | 294 | {{{ |
310 | | {{{ |
311 | | #!htmlcomment |
| 295 | {{{#!htmlcomment |
312 | 296 | This block is translated to an HTML comment. |
313 | 297 | It can contain <tags> and &entities; that will not be escaped in the output. |
… |
… |
|
326 | 310 | }}} |
327 | 311 | |
328 | | Please note that the character sequence "`--`" is not allowed in HTML comments, and will generate a rendering error. |
329 | | |
330 | | |
331 | | == More Information == |
| 312 | The character sequence `--` is not allowed in HTML comments, and will generate a rendering error. |
| 313 | |
| 314 | |
| 315 | == More Information |
332 | 316 | |
333 | 317 | * http://www.w3.org/ -- World Wide Web Consortium |
… |
… |
|
335 | 319 | |
336 | 320 | ---- |
337 | | See also: WikiProcessors, WikiFormatting, WikiRestructuredText |
| 321 | See also: WikiFormatting, WikiProcessors, WikiRestructuredText |
|