diff --git a/editions/tw5.com/tiddlers/wikitext/Styles and Classes in WikiText.tid b/editions/tw5.com/tiddlers/wikitext/Styles and Classes in WikiText.tid index eadbd2227..82e37309f 100644 --- a/editions/tw5.com/tiddlers/wikitext/Styles and Classes in WikiText.tid +++ b/editions/tw5.com/tiddlers/wikitext/Styles and Classes in WikiText.tid @@ -1,21 +1,23 @@ +caption: Styles and Classes created: 20131205160532119 -modified: 20131205160549129 +modified: 20230726105744098 tags: WikiText [[How to apply custom styles]] title: Styles and Classes in WikiText type: text/vnd.tiddlywiki -caption: Styles and Classes -Content can be wrapped in `@@`double at signs`@@` to apply specified CSS styles or classes to it. There are multiple ways to use this syntax, as presented below. +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` 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. +//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. -<> +<> -Style attributes, e.g. `color`, each followed by `;` semicolon can be introduced immediately after the opening `@@`. +!! Styles -<> +Multiple style attributes, e.g. `color`, each followed by `;` semicolon can be introduced immediately after the opening `@@`, without spaces in between. -Similarly a style can be applied to a multiline content: +<> + +Similarly, styles can be applied to //block content//. Wrapping block content in `@@` without specifying style or class has no effect. <> -A class may be applied to a multiline content only: +!! Classes -< +.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: + +<> + +<> -Multiple classes and styles can be used together: +Multiple classes and styles can be applied simultaneously. In case of inline content, the styles have to be defined first, followed by the classes. -<> +<> + +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 `@@`: + +<> + +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. + +<> \ No newline at end of file