This shows you the differences between two versions of the page.
Both sides previous revision Previous revision Next revision | Previous revision | ||
syntax [2014/01/23 00:21] l |
syntax [2015/05/21 15:21] kussmaul [Table syntax] |
||
---|---|---|---|
Line 1: | Line 1: | ||
+ | <- [[link|About Links]] --------- [[tag|About Tags]]-> | ||
+ | |||
===== Formatting Passages ===== | ===== Formatting Passages ===== | ||
Line 10: | Line 12: | ||
| Subscript | %%H~~2~~O%% | H<sub>2</sub>O |%%H<sub>2</sub>O %%| | | Subscript | %%H~~2~~O%% | H<sub>2</sub>O |%%H<sub>2</sub>O %%| | ||
| Superscript | %%meters/second^^2^^%% | meters/second<sup>2</sup> |%%meters/second<sup>2</sup>%%| | | Superscript | %%meters/second^^2^^%% | meters/second<sup>2</sup> |%%meters/second<sup>2</sup>%%| | ||
- | | Monospace | %%{{{some //text//}}}%% | ''some //text//'' |%%<code>some //text//</code>%%| | + | | Monospace | %%{{{a //word//}}}%% | ''a %%//word//%%'' |%%<code>a //word//</code>%%| |
- | | Comment | %%/%comment%/%% | | | | + | | Comment | %%/%a comment%/%% | | | |
| Error | %%@@error@@%% | **error** |<span class=marked>error</span>| | | Error | %%@@error@@%% | **error** |<span class=marked>error</span>| | ||
| Inline styling | %%@@font-weight:bold;text@@%% | **text** |<span style="font-weight:bold">text</span>| | | Inline styling | %%@@font-weight:bold;text@@%% | **text** |<span style="font-weight:bold">text</span>| | ||
Some additional syntax: | Some additional syntax: | ||
- | ^ Formatting ^ Source Code ^Resultant HTML^ | + | ^ Formatting ^ Source Code ^Resulting HTML^ |
| Bulleted list | %%* one%% \\ %%* two%% |<ul><li>one</li>\\ <li>two</li></ul>| | | Bulleted list | %%* one%% \\ %%* two%% |<ul><li>one</li>\\ <li>two</li></ul>| | ||
| Numbered list | %%# one%% \\ %%# two%% |<ol><li>one</li>\\ <li>two</li></ol>| | | Numbered list | %%# one%% \\ %%# two%% |<ol><li>one</li>\\ <li>two</li></ol>| | ||
Line 31: | Line 33: | ||
==== A note about monospace ==== | ==== A note about monospace ==== | ||
- | When you use the monospace ''{{{'' and ''}}}'' syntax, all other syntax inside the triple curly braces will be disabled. This allows you to, for instance, include ASCII art in your stories, or write documentation about a particular macro or HTML tag without that being interpreted by Twine. | + | When you use the monospace ''%%{{{%%'' and ''%%}}}%%'' syntax, all other syntax inside the triple curly braces will be disabled. This allows you to, for instance, include ASCII art in your stories, or write documentation about a particular macro or HTML tag without that being interpreted by Twine. |
==== Escaped line breaks ==== | ==== Escaped line breaks ==== | ||
Line 41: | Line 43: | ||
Some shorthand syntax for creating HTML tables exists, and is used like so: | Some shorthand syntax for creating HTML tables exists, and is used like so: | ||
- | >|!//table header <th>//|!//table header <th>//|//table header <td>//| | + | >|!//table header //|!//table header //|!//table header //| |
>|//row 1//|//row 1//|//row 1//| | >|//row 1//|//row 1//|//row 1//| | ||
>|//row 2//|//row 2//|//row 2//| | >|//row 2//|//row 2//|//row 2//| | ||
Line 51: | Line 53: | ||
>|~|>|//row 8//| | >|~|>|//row 8//| | ||
>|~|//row 9//|//row 9//| | >|~|//row 9//|//row 9//| | ||
- | >|//table <caption>//|c | + | >|//table caption//|c |
The text content of the table is italicised in the above sample. | The text content of the table is italicised in the above sample. | ||
+ | |||
+ | **Note**: make sure the first | character in each line doesn't have any whitespace before it. | ||
==== Comments ==== | ==== Comments ==== | ||
Line 94: | Line 98: | ||
''@@color:magenta;letter-spacing:3px;font-size:1.5em;Some text@@'' | ''@@color:magenta;letter-spacing:3px;font-size:1.5em;Some text@@'' | ||
- | **Note** that if you intend to re-use a particular set of CSS styles throughout the story, there is an easier way than copying and pasting the same inline style syntax over and over! You should create a [[stylesheet]] and define a CSS class like so: | + | Any text between the first ''@@'' and the final '';'' is usually interpreted as CSS style properties to apply to the span. |
+ | |||
+ | **Note** that if you intend to re-use a particular set of CSS styles throughout the story, there is an easier way than copying and pasting the same inline style syntax over and over! You should create a [[stylesheet]] and define a CSS class (say, that you named "hotpink") like so: | ||
<code> | <code> | ||
Line 103: | Line 109: | ||
}</code> | }</code> | ||
- | Then, you can simply write this HTML every time you want to use this style: | + | This class collects several CSS properties into a set that you wish to re-use many times throughout your story. You can simply write this syntax every time you want to use this class: |
+ | |||
+ | ''@@.hotpink;Some text@@'' | ||
- | ''<span class="hotpink">Some text</span>'' | + | Any properties which begin with ''.'' are interpreted as CSS class names to apply to the style, instead of individual style properties. |
+ | <- [[link|About Links]] --------- [[tag|About Tags]]-> |