mirrors/TiddlyWiki5
1
0
Fork 0
mirror of https://github.com/Jermolene/TiddlyWiki5 synced 2024-12-26 18:10:27 +00:00
Code Issues Releases Wiki Activity

Improve docs on styles and classes in WikiText (#7641)

Browse Source
This commit is contained in:
Mateusz Wilczek 2023-07-31 13:12:14 +02:00 committed by GitHub
parent 643819f5f5
commit 3684cfd178
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 52 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

71
editions/tw5.com/tiddlers/wikitext/Styles and Classes in WikiText.tid
View File

@ -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.
<<wikitext-example src:"@@some highlighted text@@">>
<<wikitext-example src:"@@Highlighted text@@">>
Style attributes, e.g. `color`, each followed by `;` semicolon can be introduced immediately after the opening `@@`.
!! Styles
<<wikitext-example src:"@@color:steelblue;background-color:lightcyan;some styled text@@">>
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:
<<wikitext-example src:"@@color:steelblue;background-color:lightcyan;Text with custom style@@">>
Similarly, styles can be applied to //block content//. Wrapping block content in `@@` without specifying style or class has no effect.
<<wikitext-example src:"@@background-color:lightcyan;
* Item one
@ -23,18 +25,49 @@ Similarly a style can be applied to a multiline content:
@@
">>
A class may be applied to a multiline content only:
!! Classes
<<wikitext-example src:"@@.tc-double-spaced-list
* Item one
* Item two
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;}
```
<style>
.coloured-text {color: darkkhaki;}
.coloured-bg {background-color: cornsilk;}
</style>
Multiple classes, each prefixed with `.`, can be introduced immediately after the opening `@@`, followed by a ` ` space. This works both for inline and block content:
<<wikitext-example src:"@@.coloured-text.coloured-bg Inline content with two assigned classes@@">>
<<wikitext-example src:"@@.coloured-bg
* Block content
* With one assigned class
@@">>
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.
<<wikitext-example src:"@@.tc-double-spaced-list
@@width:400px;background-color:lightcyan;
* Item one
* Item two
@@
">>
<<wikitext-example src:"@@font-size:1.5em;.coloured-text.coloured-bg Text with custom style and 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 `@@`:
<<wikitext-example src:"@@font-size:1.5em;
@@.coloured-text
@@.coloured-bg
* Block content
* With custom style and classes
@@">>
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.
<<wikitext-example src:"!!!.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.
">>