syntax
Differences
This shows you the differences between two versions of the page.
| Both sides previous revision Previous revision Next revision | Previous revision | ||
|
syntax [2014/01/01 03:50] l |
syntax [2015/05/21 15:21] kussmaul [Table syntax] |
||
|---|---|---|---|
| Line 1: | Line 1: | ||
| + | <- [[link|About Links]] --------- [[tag|About Tags]]-> | ||
| + | |||
| ===== Formatting Passages ===== | ===== Formatting Passages ===== | ||
| Sometimes you'd like to apply styles to your text -- to italicize a book title, for example. You can do this with simple formatting codes that are similar to the double brackets of a link. Here is what's available to you: | Sometimes you'd like to apply styles to your text -- to italicize a book title, for example. You can do this with simple formatting codes that are similar to the double brackets of a link. Here is what's available to you: | ||
| - | ^ Formatting ^ Source Code ^Appears As ^Resulting HTML | + | ^ Formatting ^ Source Code ^Appears As ^Resulting HTML^ |
| - | | Italics | %%//text//%% | //text// |<em>text</em> | + | | Italics | %%//text//%% | //text// |<em>text</em>| |
| - | | Boldface | %%''text''%% | **text** |<strong>text</strong> | + | | Boldface | %%''text''%% | **text** |<strong>text</strong>| |
| - | | Underline | %%__text__%% | __text__ |<u>text</u> | + | | Underline | %%__text__%% | __text__ |<u>text</u>| |
| - | | Strikethrough | %%==text==%% | <del>text</del> |<strike>text</strike> | + | | Strikethrough | %%==text==%% | <del>text</del> |<strike>text</strike>| |
| - | | 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 | %%{{{text}}}%% | ''text'' |%%<code>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 ^ | + | ^ Formatting ^ Source Code ^Resulting HTML^ |
| - | | Bulleted list | %%* one%% \\ %%* two%% | | + | | Bulleted list | %%* one%% \\ %%* two%% |<ul><li>one</li>\\ <li>two</li></ul>| |
| - | | Numbered list | %%# one%% \\ %%# two%% | | + | | Numbered list | %%# one%% \\ %%# two%% |<ol><li>one</li>\\ <li>two</li></ol>| |
| - | | Horizontal line | %%----%% | | + | | Horizontal line | %%----%% |<hr>| |
| - | | Indented text | >Text | | + | | Indented text | >Text |<blockquote>Text</blockquote>| |
| - | | Doubly indented text | %%>>Text%% | | + | | Doubly indented text | %%>>Text%% | <blockquote><blockquote>Text</blockquote></blockquote>| |
| - | | Indented block | %%<<<%% \\ Text \\ %%<<<%% | | + | | Indented block | %%<<<%% \\ Text \\ %%<<<%% | <blockquote>Text</blockquote>| |
| - | | Heading <h1> | !Title | | + | | Heading <h1> | !Title |<h1>Title</h1>| |
| - | | Heading <h2> | !!Title | | + | | Heading <h2> | !!Title |<h2>Title</h2>| |
| - | | Heading <h3> | !!!Title | | + | | Heading <h3> | !!!Title |<h3>Title</h3>| |
| - | | Heading <h4> | !!!!Title | | + | | Heading <h4> | !!!!Title |<h4>Title</h4>| |
| - | | Heading <h5> | !!!!!Title | | + | | Heading <h5> | !!!!!Title |<h5>Title</h5>| |
| + | |||
| + | ==== 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. | ||
| ==== Escaped line breaks ==== | ==== Escaped line breaks ==== | ||
| Line 37: | 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 47: | 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 56: | Line 64: | ||
| Comments are used to leave remarks about particular parts of a passage. They are not displayed when the player views the passage. You could leave reminder messages to yourself, explanations about what a particularly complex macro structure is doing, or advice to a collaborator working on this game with you. | Comments are used to leave remarks about particular parts of a passage. They are not displayed when the player views the passage. You could leave reminder messages to yourself, explanations about what a particularly complex macro structure is doing, or advice to a collaborator working on this game with you. | ||
| + | For larger comments about the general story, consider [[annotation]]s. | ||
| ==== HTML ==== | ==== HTML ==== | ||
| Line 73: | Line 81: | ||
| | <span style="text-align:right">Text</span> | Right-aligned text | | | <span style="text-align:right">Text</span> | Right-aligned text | | ||
| | <span style="text-align:justify">Text</span> | Fully justified text | | | <span style="text-align:justify">Text</span> | Fully justified text | | ||
| - | | <abbr title="Alt text">Text</abbr> | "< text" that is visible when you hover over the text | | + | | <abbr title="Alt text">Text</abbr> | "alt text" that is visible when you hover over the text | |
| | <small>Text</small> | Smaller text | | | <small>Text</small> | Smaller text | | ||
| | <big>Text</big> | Bigger text | | | <big>Text</big> | Bigger text | | ||
| Line 90: | 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 99: | 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]]-> |
syntax.txt · Last modified: 2017/10/09 20:39 (external edit)
Page Tools
Except where otherwise noted, content on this wiki is licensed under the following license: CC Attribution-Share Alike 4.0 International
