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

editions/tw5.com/tiddlers/wikitext/Formatting in WikiText.tid

@@ -7,13 +7,13 @@ type: text/vnd.tiddlywiki
 
 Available character formatting includes:
 
-* <code>&#96;backticks&#96;</code> for `code` (<<.icon $:/core/images/mono-line>>)
+* <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>
-** 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>
-* `''bold''` for ''bold text'' (<<.icon $:/core/images/bold>>)<br><br>
+* `//italic//` for //italic// text (<<.icon $:/core/images/italic>>)<br><br>
-* `//italic//` for //italic text// (<<.icon $:/core/images/italic>>)<br><br>
+* `__underscore__` for __underscored__ text (<<.icon $:/core/images/underline>>)<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]]

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

@@ -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
+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.
-* List One
+
-* List Two
+<<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;
+<<wikitext-example src:"@@.tc-double-spaced-list
-* List One
+* Item one
-* List Two
+* Item two
-@@
+@@">>
-">>
+
-
+Multiple classes and styles can be used together:
-Multiple styles and classes can be mixed. For example:
+
-
+<<wikitext-example src:"@@.tc-double-spaced-list
-<<wikitext-example src:"@@.tc-tiddler-frame
+@@width:400px;background-color:lightcyan;
-@@width:400px;
+* Item one
-Some text
+* Item two
 @@
 ">>