This page is part of a static HTML representation of the TiddlyWiki at https://tiddlywiki.com/

Styles and Classes in WikiText

 26th July 2023 at 10:57am

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>