close
Warning:
Can't synchronize with repository "(default)" (The repository directory has changed, you should resynchronize the repository with: trac-admin $ENV repository resync '(default)'). Look in the Trac log for more information.
- Timestamp:
-
2021-07-11T14:17:48-07:00 (3 years ago)
- Author:
-
trac
- Comment:
-
--
Legend:
- Unmodified
- Added
- Removed
- Modified
-
v5
|
v6
|
|
1 | 1 | = Using HTML in Wiki Text |
2 | 2 | |
3 | | Trac supports the display of HTML in any wiki context, by using the `#!html` [wiki:WikiProcessors WikiProcessor]. |
| 3 | Trac supports the display of HTML in any wiki context, by using the `#!html` [wiki:WikiProcessors WikiProcessor]. |
4 | 4 | |
5 | 5 | However, this HTML has to be [https://en.wikipedia.org/wiki/Well-formed_element well-formed]. |
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. |
| 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 | 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. |
… |
… |
|
25 | 25 | }}} |
26 | 26 | |
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. |
| 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. |
28 | 28 | |
29 | 29 | The filtering is done by [https://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. |
… |
… |
|
34 | 34 | {{{#!td |
35 | 35 | {{{ |
36 | | {{{#!div class="important" |
| 36 | {{{#!div class="important" |
37 | 37 | **important** is a predefined class. |
38 | 38 | }}} |
… |
… |
|
40 | 40 | {{{ |
41 | 41 | {{{#!div style="border: 1pt dotted; margin: 1em" |
42 | | **wikipage** is another predefined class that will |
| 42 | **wikipage** is another predefined class that will |
43 | 43 | be used when no class is specified. |
44 | 44 | }}} |
… |
… |
|
53 | 53 | {{{#!div class="wikipage compact" style="border: 1pt dotted" |
54 | 54 | Classes can be combined (here **wikipage** and **compact**) |
55 | | which results in this case in reduced //vertical// |
| 55 | which results in this case in reduced //vertical// |
56 | 56 | padding but there's still some horizontal space for coping |
57 | 57 | with headings. |
… |
… |
|
68 | 68 | {{{#!td style="padding-left: 2em" |
69 | 69 | |
70 | | {{{#!div class="important" |
| 70 | {{{#!div class="important" |
71 | 71 | **important** is a predefined class. |
72 | 72 | }}} |
73 | 73 | |
74 | 74 | {{{#!div style="border: 1pt dotted; margin: 1em" |
75 | | **wikipage** is another predefined class that will |
| 75 | **wikipage** is another predefined class that will |
76 | 76 | be used when no class is specified. |
77 | 77 | }}} |
… |
… |
|
84 | 84 | {{{#!div class="wikipage compact" style="border: 1pt dotted" |
85 | 85 | Classes can be combined (here **wikipage** and **compact**) |
86 | | which results in this case in reduced //vertical// |
| 86 | which results in this case in reduced //vertical// |
87 | 87 | padding but there's still some horizontal space for coping |
88 | 88 | with headings. |
… |
… |
|
103 | 103 | {{{#!td |
104 | 104 | {{{ |
105 | | Hello |
| 105 | Hello |
106 | 106 | [[span(''WORLD'' (click [#anchor here]), style=color: green; font-size: 120%, id=anchor)]]! |
107 | 107 | }}} |
… |
… |
|
144 | 144 | Pick the style the more appropriate |
145 | 145 | to your content |
146 | | |
| 146 | |
147 | 147 | See WikiFormatting#Tables for details |
148 | 148 | on the pipe-based table syntax. |
149 | 149 | }}} |
150 | | |
151 | | If one needs to add some |
| 150 | |
| 151 | If one needs to add some |
152 | 152 | attributes to the table itself... |
153 | | |
| 153 | |
154 | 154 | {{{#!table style="border:none;text-align:center;margin:auto" |
155 | 155 | {{{#!tr ==================================== |
… |
… |
|
211 | 211 | }}} |
212 | 212 | |
213 | | If one needs to add some |
| 213 | If one needs to add some |
214 | 214 | attributes to the table itself... |
215 | 215 | |
… |
… |
|
242 | 242 | }}} |
243 | 243 | |
244 | | Note that by default tables are assigned the "wiki" CSS class, which gives a distinctive look to the header cells and a default border to the table and cells, as can be seen for the tables on this page. By removing this class (`#!table class=""`), one regains complete control on the table presentation. In particular, neither the table nor the rows nor the cells will have a border, so this is a more effective way to get such an effect rather than having to specify a `style="border: no"` parameter everywhere. |
| 244 | Note that by default tables are assigned the "wiki" CSS class, which gives a distinctive look to the header cells and a default border to the table and cells, as can be seen for the tables on this page. By removing this class (`#!table class=""`), one regains complete control on the table presentation. In particular, neither the table nor the rows nor the cells will have a border, so this is a more effective way to get such an effect rather than having to specify a `style="border: no"` parameter everywhere. |
245 | 245 | |
246 | 246 | {{{#!table class="" |