Changes between Version 2 and Version 3 of WikiHtml
- Timestamp:
- 03/13/22 22:11:41 (3 years ago)
Legend:
- Unmodified
- Added
- Removed
- Modified
-
WikiHtml
v2 v3 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]. 4 5 However, this HTML has to be [http ://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. 3 Trac supports the display of HTML in any wiki context, by using the `#!html` [wiki:WikiProcessors WikiProcessor]. 4 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. 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. 28 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.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 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. 30 30 31 31 == How to use `#!div` and `#!span` == #HowtoUseDivSpan … … 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="" … … 315 315 == More Information 316 316 317 * http ://www.w3.org/ -- World Wide Web Consortium318 * http ://www.w3.org/MarkUp/ -- HTML Markup Home Page317 * https://www.w3.org/ -- World Wide Web Consortium 318 * https://www.w3.org/MarkUp/ -- HTML Markup Home Page 319 319 320 320 ----
