Improve documentation of WikiText formatting (#7272)

* Improve 'Formatting in WikiText.tid'

Add highlight formatting example.
Simplify code formatting example to be single line without nested list.
Improve bold, italic, and underscore formatting examples to be consistent with others.

* Improve 'Styles and Classes in WikiText.tid'

Add more examples, including the default highlight styling when no style or class is defined, as introduced in #6877
This commit is contained in:
Mateusz Wilczek 2023-02-17 19:14:21 +01:00 committed by GitHub
parent fb99d3050e
commit 55124b4ee6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 32 additions and 22 deletions

View File

@ -7,13 +7,13 @@ type: text/vnd.tiddlywiki
Available character formatting includes:
* <code>&#96;backticks&#96;</code> for `code` (<<.icon $:/core/images/mono-line>>)
** Alternatively, <code>&#96;&#96;double backticks allows &#96;embedded&#96; backticks&#96;&#96;</code><br><br>
* `''bold''` for ''bold text'' (<<.icon $:/core/images/bold>>)<br><br>
* `//italic//` for //italic text// (<<.icon $:/core/images/italic>>)<br><br>
* `__underscore__` for __underscored text__ (<<.icon $:/core/images/underline>>)<br><br>
* <code>&#96;code&#96;</code> for `code` (<<.icon $:/core/images/mono-line>>), alternatively <code>&#96;&#96;double backticks allow &#96;embedded&#96; single backticks&#96;&#96;</code><br><br>
* `''bold''` for ''bold'' text (<<.icon $:/core/images/bold>>)<br><br>
* `//italic//` for //italic// text (<<.icon $:/core/images/italic>>)<br><br>
* `__underscore__` for __underscored__ text (<<.icon $:/core/images/underline>>)<br><br>
* `^^superscript^^` for ^^superscripted^^ text (<<.icon $:/core/images/superscript>>)<br><br>
* `,,subscript,,` for ,,subscripted,, text (<<.icon $:/core/images/subscript>>)<br><br>
* `~~strikethrough~~` for ~~strikethrough~~ text (<<.icon $:/core/images/strikethrough>>)
* `~~strikethrough~~` for ~~strikethrough~~ text (<<.icon $:/core/images/strikethrough>>)<br><br>
* `@@highlight@@` for @@highlighted@@ text (no editor toolbar button), see [[Styles and Classes in WikiText]] for more formatting options
See also: [[Code Blocks in WikiText]]

View File

@ -5,26 +5,36 @@ title: Styles and Classes in WikiText
type: text/vnd.tiddlywiki
caption: Styles and Classes
You can use this construction to cause the wrapped content to be assigned specified CSS classes or styles:
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.
<<wikitext-example src:"@@.myStyle
* List One
* List Two
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.
<<wikitext-example src:"@@some highlighted text@@">>
Style attributes, e.g. `color`, each followed by `;` semicolon can be introduced immediately after the opening `@@`.
<<wikitext-example src:"@@color:steelblue;background-color:lightcyan;some styled text@@">>
Similarly a style can be applied to a multiline content:
<<wikitext-example src:"@@background-color:lightcyan;
* Item one
* Item two
@@
">>
Similar syntax is used to assign styles. For example:
A class may be applied to a multiline content only:
<<wikitext-example src:"@@background-color:red;
* List One
* List Two
@@
">>
Multiple styles and classes can be mixed. For example:
<<wikitext-example src:"@@.tc-tiddler-frame
@@width:400px;
Some text
<<wikitext-example src:"@@.tc-double-spaced-list
* Item one
* Item two
@@">>
Multiple classes and styles can be used together:
<<wikitext-example src:"@@.tc-double-spaced-list
@@width:400px;background-color:lightcyan;
* Item one
* Item two
@@
">>