mirror of
https://github.com/Jermolene/TiddlyWiki5
synced 2024-12-28 02:50:27 +00:00
56 lines
1.2 KiB
Plaintext
56 lines
1.2 KiB
Plaintext
title: StyleBlockWikiText
|
|
tags: docs wikitextrule
|
|
|
|
This syntax enables you to assign arbitrary styles and classes to generated elements. For example:
|
|
|
|
```
|
|
@@color:#f00;
|
|
@@text-decoration:underline;
|
|
@@.myClass
|
|
This is in red!
|
|
@@
|
|
```
|
|
|
|
Generates the results:
|
|
|
|
@@color:#f00;
|
|
@@text-decoration:underline;
|
|
@@.myClass
|
|
This is in red!
|
|
@@
|
|
|
|
The HTML looks like this:
|
|
|
|
```
|
|
<p class="myClass" style="color:rgb(255, 0, 0); text-decoration:underline;">This is in red!</p>
|
|
```
|
|
|
|
Note that classes and styles can be mixed subject to the rule that styles must precede classes. For example
|
|
|
|
```
|
|
@@.myFirstClass.mySecondClass
|
|
@@width:100px;.myThirdClass
|
|
This is a paragraph
|
|
@@
|
|
```
|
|
|
|
Note that the style block doesn't generate any HTML elements itself, but instead causes the styles to be applied to all of the elements contained within the style block. This means that you can assign styles to elements generated from WikiText. For example, here is a list with some additional styles applied:
|
|
|
|
```
|
|
@@background-color:#00f;
|
|
* First item
|
|
* Second item
|
|
* Third item
|
|
@@
|
|
```
|
|
|
|
The generated HTML is:
|
|
|
|
```
|
|
<ul style="background-color: #00f;">
|
|
<li>First item</li>
|
|
<li>Second item</li>
|
|
<li>Third item</li></ul>
|
|
```
|
|
|