37 | | Since 0.11, the filtering is done by Genshi, and as such, the produced output will be a well-formed fragment of HTML. As noted above in the introduction, this mean that you can no longer use two HTML blocks, one for opening a <div>, the second for closing it, in order to wrap arbitrary wiki text. |
38 | | The new way to wrap any wiki content inside a <div> is to use the `#!div` Wiki processor. |
39 | | |
40 | | == How to use `#!div` and `#!span` == #HowtoUseDivSpan |
41 | | |
42 | | ||= Wiki Markup =||= Display =|| |
43 | | {{{#!td |
44 | | {{{ |
45 | | {{{ |
46 | | #!div class="important" style="border: 2pt solid; text-align: center" |
47 | | This is the ''only'' way to go in Trac 0.11 |
48 | | }}} |
49 | | |
50 | | {{{ |
51 | | #!div class="wikipage" style="border: 1pt dotted" |
52 | | Only `wikipage` (same as specifying no class attribute) |
53 | | }}} |
54 | | |
55 | | {{{ |
56 | | #!div class="wikipage compact " style="border: 1pt solid" |
57 | | Use combined classes (`compact` and `wikipage`) |
58 | | }}} |
59 | | |
60 | | {{{ |
61 | | #!div class="compact" style="border: 1pt dotted" |
62 | | Only `compact` |
63 | | }}} |
64 | | |
65 | | {{{ |
66 | | #!div class="" style="border: 1pt solid" |
67 | | No classes (//not// the same as specifying no class attribute...) |
68 | | }}} |
69 | | }}} |
70 | | }}} |
71 | | {{{#!td style="padding-left: 2em" |
72 | | {{{ |
73 | | #!div class="important" style="border: 2pt solid; text-align: center" |
74 | | This is the ''only'' way to go in Trac 0.11 |
75 | | }}} |
76 | | |
77 | | {{{ |
78 | | #!div class="wikipage" style="border: 1pt dotted" |
79 | | Only `wikipage` (same as specifying no class attribute) |
80 | | }}} |
81 | | |
82 | | {{{ |
83 | | #!div class="wikipage compact " style="border: 1pt solid" |
84 | | Use combined classes (`compact` and `wikipage`) |
85 | | }}} |
86 | | |
87 | | {{{ |
88 | | #!div class="compact" style="border: 1pt dotted" |
89 | | Only compact |
90 | | }}} |
91 | | |
92 | | {{{ |
93 | | #!div class="" style="border: 1pt solid" |
94 | | No classes (//not// the same as specifying no class attribute...) |
95 | | }}} |
96 | | }}} |
97 | | |
98 | | 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 contents, 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 | | |
100 | | For spans, you should rather use the Macro call syntax: |
101 | | ||= Wiki Markup =|| |
102 | | {{{#!td |
103 | | {{{ |
104 | | Hello |
105 | | [[span(''WORLD'' (click [#anchor here]), style=color: green; font-size: 120%, id=anchor)]]! |
106 | | }}} |
107 | | }}} |
108 | | |--------------------------------------------------------------------------------- |
109 | | ||= Display =|| |
110 | | {{{#!td style="padding-left: 2em" |
111 | | Hello |
112 | | [[span(''WORLD'' (click [#anchor here]), style=color: green; font-size: 120%, id=anchor)]]! |
113 | | }}} |
114 | | |
115 | | == How to use `#!td` and other table related processors == #Tables |
116 | | |
117 | | `#!td` or `#!th` processors are actually the main ones, for creating table data and 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. |
118 | | |
119 | | ||= Wiki Markup =||= Display =|| |
120 | | {{{#!td |
121 | | {{{ |
122 | | Simple 2x2 table with rich content: |
123 | | {{{#!th align=left |
124 | | - Left |
125 | | - Header |
126 | | }}} |
127 | | {{{#!th align=left |
128 | | - Right |
129 | | - Header |
130 | | }}} |
131 | | |---------------------------------- |
132 | | {{{#!td style="background: #ffd" |
133 | | - Left |
134 | | - Content |
135 | | }}} |
136 | | {{{#!td style="vertical-align: top" |
137 | | !RightContent |
138 | | }}} |
139 | | |---------------------------------- |
140 | | || ... and this can be mixed||\ |
141 | | ||with pipe-based cells || |
142 | | {{{#!td colspan=2 |
143 | | Pick the style the more appropriate |
144 | | to your content |
145 | | |
146 | | See WikiFormatting#Tables for details |
147 | | on the pipe-based table syntax. |
148 | | }}} |
149 | | |
150 | | If one needs to add some |
151 | | attributes to the table itself... |
152 | | |
153 | | {{{ |
154 | | #!table style="border:none;text-align:center;margin:auto" |
155 | | {{{#!tr ==================================== |
156 | | {{{#!th style="border: none" |
157 | | Left header |
158 | | }}} |
159 | | {{{#!th style="border: none" |
160 | | Right header |
161 | | }}} |
162 | | }}} |
163 | | {{{#!tr ==== style="border: 1px dotted grey" |
164 | | {{{#!td style="border: none" |
165 | | 1.1 |
166 | | }}} |
167 | | {{{#!td style="border: none" |
168 | | 1.2 |
169 | | }}} |
170 | | }}} |
171 | | {{{#!tr ==================================== |
172 | | {{{#!td style="border: none" |
173 | | 2.1 |
174 | | }}} |
175 | | {{{#!td |
176 | | 2.2 |
177 | | }}} |
178 | | }}} |
179 | | }}} |
180 | | |
181 | | |
182 | | }}} |
183 | | }}} |
184 | | {{{#!td valign=top |
185 | | Simple 2x2 table with rich content: |
186 | | {{{#!th align=left |
187 | | - Left |
188 | | - Header |
189 | | }}} |
190 | | {{{#!th align=left |
191 | | - Right |
192 | | - Header |
193 | | }}} |
194 | | |---------------------------------- |
195 | | {{{#!td style="background: #ffd" |
196 | | - Left |
197 | | - Content |
198 | | }}} |
199 | | {{{#!td style="vertical-align: top" |
200 | | !RightContent |
201 | | }}} |
202 | | |---------------------------------- |
203 | | || ... and this can be mixed||\ |
204 | | ||with pipe-based cells || |
205 | | {{{#!td colspan=2 |
206 | | Pick the style the more appropriate |
207 | | to your content |
208 | | |
209 | | See WikiFormatting#Tables for details |
210 | | on the pipe-based table syntax. |
211 | | }}} |
212 | | |
213 | | If one needs to add some |
214 | | attributes to the table itself... |
| 27 | Since 0.11, the filtering is done by Genshi, and as such, the produced out will be a well-formed fragment of HTML. In other words, this mean that you can no longer use two HTML blocks, one for opening a <div>, the second for closing it, in order to wrap arbitrary wiki text. |
| 28 | To achieve this, you need now to use the ''div'' Wiki processor: |