1
0
mirror of https://github.com/Jermolene/TiddlyWiki5 synced 2024-11-28 12:29:56 +00:00
TiddlyWiki5/editions/tw5.com/tiddlers/wikitext/HTML in WikiText.tid
Mario Pietsch 9c0d6a46cc
Add "commentpragma" html style rule (#5726)
* html-comment, that can be used in the pragma area

* add commentpragma test

* fix typo

* fix typo and change comments ab bit

* combine html-comment and pragma-comment and add some docs, how to use it

* Make docs simpler by removing caching info

* change h2 wording
2021-06-14 17:39:56 +01:00

116 lines
3.3 KiB
Plaintext
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

caption: HTML
created: 20131205160816081
modified: 20210614100305329
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
<<.tip """[[Widgets share the same syntax as HTML tags|Widgets in WikiText]], 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 in block mode, the opening tag must be followed by two linebreaks.
Without the two linebreaks, the tag content will be parsed in inline mode which means that block mode formatting such as wikitext tables, lists and headings is not recognised.
! 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 dont 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]]
!! 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}}
```
!! 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>
```
!! 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.
This example shows how to add a prefix to a value:
```
<$text text={{{ [<currentTiddler>addprefix[$:/myprefix/]] }}} />
```