mirror of
https://github.com/Jermolene/TiddlyWiki5
synced 2024-12-04 23:39:57 +00:00
3825e2579f
* feat: new text substitution support, first pass * fix: use the widget method instead of evaluating a filter * revert to earlier implementation that emulates macro syntax * fix: capitalize comments * feat: add support for triple backticks for substituted attributes * docs: added docs for substitute operator * chore: more docs tweaks * docs: substituted attributes, refactored docs for widget attributes * docs: fixed typo * docs: more examples for substituted attributes * docs: updated prior documentation on concatenating text and variables * docs: documentation corrections * Update editions/tw5.com/tiddlers/filters/examples/substitute Operator (Examples).tid Co-authored-by: btheado <brian.theado@gmail.com> --------- Co-authored-by: btheado <brian.theado@gmail.com>
96 lines
3.4 KiB
Plaintext
96 lines
3.4 KiB
Plaintext
caption: HTML
|
|
created: 20131205160816081
|
|
modified: 20230615060119987
|
|
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 """Note that any HTML attributes prefixed with `on` are removed from the rendered HTML content. This is done to prevent event handlers (such as "onclick") being used as a clandestine way to execute untrusted JavaScript. A design goal of TiddlyWiki is to ensure that executable JavaScript can only enter the system through explicit JavaScript module tiddlers or raw markup tiddlers. This makes it possible to filter unsafe content in multiuser environments, and also makes it safer to copy untrusted wikitext examples.""">>
|
|
|
|
!! 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 do not 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 and widgets can be specified in [[several different ways|Widget Attributes]]:
|
|
|
|
* [[a literal string|Literal Attribute Values]]
|
|
* [[a transclusion of a textReference|Transcluded Attribute Values]]
|
|
* [[a transclusion of a macro/variable|Transcluded Attribute Values]]
|
|
* [[as the result of a filter expression|Filtered Attribute Values]]
|
|
* <<.from-version "5.3.0">> [[as the result of performing filter and variable substitutions on the given string|Substituted Attribute Values]]
|
|
|
|
!! 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>
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|