CSS styles and classes can be applied to inline or block content wrapped in @@double at signs@@. Classes can be applied to certain block WikiText elements.
Inline content wrapped in @@double at signs@@ without specifying style or class will be assigned the tc-inline-style class and displayed as highlighted text. The foreground and background colours of the highlighted text are defined as highlight-background and highlight-foreground in the current palette.
@@Highlighted text@@That renders as:
Highlighted text
... and the underlying HTML is:
<p><span class="tc-inline-style">Highlighted text</span></p>Styles
Multiple style attributes, e.g. color, each followed by ; semicolon can be introduced immediately after the opening @@, without spaces in between.
@@color:steelblue;background-color:lightcyan;Text with custom style@@That renders as:
Text with custom style
... and the underlying HTML is:
<p><span style="color:steelblue;background-color:lightcyan;">Text with custom style</span></p>Similarly, styles can be applied to block content. Wrapping block content in @@ without specifying style or class has no effect.
@@background-color:lightcyan;
* Item one
* Item two
@@
That renders as:
- Item one
- Item two
... and the underlying HTML is:
<ul style="background-color:lightcyan;"><li>Item one</li><li>Item two</li></ul>Classes
The following coloured-text and coloured-bg classes are defined in this tiddler for demonstration purposes:
.coloured-text {color: darkkhaki;}
.coloured-bg {background-color: cornsilk;}Multiple classes, each prefixed with ., can be introduced immediately after the opening @@, followed by a space. This works both for inline and block content:
@@.coloured-text.coloured-bg Inline content with two assigned classes@@That renders as:
Inline content with two assigned classes
... and the underlying HTML is:
<p><span class=" coloured-text coloured-bg ">Inline content with two assigned classes</span></p>@@.coloured-bg
* Block content
* With one assigned class
@@That renders as:
- Block content
- With one assigned class
... and the underlying HTML is:
<ul class="coloured-bg"><li>Block content</li><li>With one assigned class</li></ul>Multiple classes and styles can be applied simultaneously. In case of inline content, the styles have to be defined first, followed by the classes.
@@font-size:1.5em;.coloured-text.coloured-bg Text with custom style and classes@@That renders as:
Text with custom style and classes
... and the underlying HTML is:
<p><span class=" coloured-text coloured-bg " style="font-size:1.5em;">Text with custom style and classes</span></p>In case of block content, the styles and classes can be defined in a single line after the opening @@ identically as for the inline content, or in separate lines, each beginning with @@:
@@font-size:1.5em;
@@.coloured-text
@@.coloured-bg
* Block content
* With custom style and classes
@@That renders as:
- Block content
- With custom style and classes
... and the underlying HTML is:
<ul class="coloured-text coloured-bg" style="font-size:1.5em;"><li>Block content</li><li>With custom style and classes</li></ul>In a similar way classes, but not styles, can be applied to those block WikiText elements that are introduced through characters on the beginning of the line. The classes prefixed with . are specified immediately after the special characters, followed by a space.
!!!.coloured-bg Heading with a custom background class.
* Standard list element.
*.coloured-bg List element with a custom background colour class.
*.coloured-text List element with a custom text colour class.
*.coloured-bg.coloured-text List element with both of the custom classes.
That renders as:
Heading with a custom background class.
- Standard list element.
- List element with a custom background colour class.
- List element with a custom text colour class.
- List element with both of the custom classes.
... and the underlying HTML is:
<h3 class="coloured-bg">Heading with a custom background class.</h3><ul><li>Standard list element.</li><li class="coloured-bg">List element with a custom background colour class.</li><li class="coloured-text">List element with a custom text colour class.</li><li class="coloured-bg coloured-text">List element with both of the custom classes.</li></ul>