149 lines
5.2 KiB
Plaintext
149 lines
5.2 KiB
Plaintext
caption: HTML
|
||
created: 20131205160816081
|
||
modified: 20230115100934146
|
||
tags: WikiText
|
||
title: HTML in WikiText
|
||
type: text/vnd.tiddlywiki
|
||
|
||
! HTML tags and comments
|
||
|
||
HTML tags and comments can be used directly in WikiText. For example:
|
||
|
||
```
|
||
<article class="hello">
|
||
This is my nice and simple block of text. HelloThere
|
||
<!-- This comment will not appear in the wikified output -->
|
||
</article>
|
||
```
|
||
|
||
!! Pragma Comments
|
||
|
||
<<.from-version 5.2.0>> Comments can now be freely intermixed with pragmas as well as within the main body of a block of wikitext.
|
||
|
||
```
|
||
<!-- NEW: Comment that describes the macro -->
|
||
\define test()
|
||
some text <!-- inline comment -->
|
||
\end
|
||
|
||
<<test>>
|
||
```
|
||
|
||
! Important
|
||
|
||
!! Security
|
||
|
||
<<.warning """Every HTML attribute prefixed with `on` is removed from rendered HTML content for security reasons. eg: `onclick="some evil code"` would be executed, if no sanitation is active. In ~TiddlyWiki It's important to remove every attribute prefixed with `on` so future extensions to the HTML spec will be secure by default. This can lead to some inconvenience since custom attributes like eg: `one` are removed too. """>>
|
||
|
||
!! Widgets
|
||
|
||
<<.tip """[[Widgets share the same syntax as HTML tags|Widgets in WikiText]]<br>and so the following information applies to them, too.""">>
|
||
|
||
|
||
! Block mode versus Inline mode
|
||
|
||
To get the content of an HTML element to be [[parsed|WikiText Parser Modes]] in [[block mode|Block Mode WikiText]], the opening tag must be followed by two linebreaks.
|
||
|
||
Without the two linebreaks, the tag content will be [[parsed|WikiText Parser Modes]] in [[inline mode|Inline Mode WikiText]] which means that block mode formatting such as wikitext tables, lists and headings is not recognised.
|
||
|
||
See also [[WikiText parser mode: HTML examples]] and [[WikiText parser mode transitions]].
|
||
|
||
! Self closing elements
|
||
|
||
The following tags are treated as 'void'. This means that `<tag>` is treated as if it were `<tag/>`, and that no terminating `</tag>` is needed (if one is provided it will be ignored and treated as plain text).
|
||
|
||
* `<area>`, `<base>`, `<br>`, `<col>`, `<command>`, `<embed>`, `<hr>`, `<img>`, `<input>`, `<keygen>`, `<link>`, `<meta>`, `<param>`, `<source>`, `<track>`, `<wbr>`
|
||
|
||
If you don’t close any other tag then it will behave as if the missing closing tag were at the end of the tiddler.
|
||
|
||
! Attributes
|
||
|
||
In an extension of conventional HTML syntax, attributes of elements/widgets can be specified in several different ways:
|
||
|
||
* a literal string
|
||
* a transclusion of a TextReference
|
||
* a transclusion of a [[macro/variable|Macros in WikiText]]
|
||
* as the result of a [[Filter Expression]]
|
||
|
||
!! Style Attributes
|
||
|
||
<<.from-version "5.2.2">> TiddlyWiki supports the usual HTML ''style'' attribute for assigning CSS styles to elements:
|
||
|
||
```
|
||
<div style="color:red;">Hello</div>
|
||
```
|
||
|
||
In an extension to HTML, TiddlyWiki also supports accessing individual CSS styles as independent attributes. For example:
|
||
|
||
```
|
||
<div style.color="red">Hello</div>
|
||
```
|
||
|
||
The advantage of this syntax is that it simplifies assigning computed values to CSS styles. For example:
|
||
|
||
```
|
||
<div style.color={{!!color}}>Hello</div>
|
||
```
|
||
|
||
!! Literal Attribute Values
|
||
|
||
Literal attribute values can use several different styles of quoting:
|
||
|
||
* Single quotes (eg `attr='value'`)
|
||
* Double quotes (eg `attr="value"`)
|
||
* Tripe double quotes (eg `attr="""value"""`)
|
||
* No quoting is necessary for values that do not contain spaces (eg `attr=value`)
|
||
|
||
Literal attribute values can include line breaks. For example:
|
||
|
||
```
|
||
<div data-address="Mouse House,
|
||
Mouse Lane,
|
||
Rodentville,
|
||
Ratland."/>
|
||
```
|
||
|
||
By using triple-double quotes you can specify attribute values that contain single double quotes. For example:
|
||
|
||
```
|
||
<div data-address="""Mouse House,
|
||
"Mouse" Lane,
|
||
Rodentville,
|
||
Ratland."""/>
|
||
```
|
||
|
||
!! Transcluded Attribute Values
|
||
|
||
Transcluded attribute values are indicated with double curly braces around a TextReference. For example:
|
||
|
||
```
|
||
attr={{tiddler}}
|
||
attr={{!!field}}
|
||
attr={{tiddler!!field}}
|
||
```
|
||
<<.warning "The attribute's value will be the exact text retrieved from the TextReference. Any wiki syntax in that text will be left as-is.">>
|
||
|
||
!! Variable Attribute Values
|
||
|
||
Variable attribute values are indicated with double angle brackets around a [[macro invocation|Macro Calls in WikiText]]. For example:
|
||
|
||
```
|
||
<div title=<<MyMacro "Brian">>>
|
||
...
|
||
</div>
|
||
```
|
||
<<.warning "The text from the macro's definition will be retrieved and text substitution will be performed (i.e. <<.param $param$>> and <<.param $(...)$>> syntax). The attribute's value will be the resulting text. Any wiki syntax in that text (including further macro calls and variable references) will be left as-is.">>
|
||
|
||
!! Filtered Attribute Values
|
||
|
||
Filtered attribute values are indicated with triple curly braces around a [[Filter Expression]]. The value will be the first item in the resulting list, or the empty string if the list is empty.
|
||
|
||
<<.from-version "5.2.2">> To improve readability, newlines can be included anywhere that whitespace is allowed within filtered attributes.
|
||
|
||
This example shows how to add a prefix to a value:
|
||
|
||
```
|
||
<$text text={{{ [<currentTiddler>addprefix[$:/myprefix/]] }}} />
|
||
```
|
||
<<.warning "The attribute's value will be the exact text from the first item in the resulting list. Any wiki syntax in that text will be left as-is.">>
|