User Tools

Site Tools


syntax

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

syntax [2014/09/28 14:45]
ateyourlembas
syntax [2017/10/09 20:39]
Line 1: Line 1:
-<- [[link|About Links]] --------- [[tag|About Tags]]-> 
  
-===== 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: 
- 
-^ Formatting ​   ^ Source Code                ^Appears As         ​^Resulting HTML^ 
-| Italics   | %%//​text//​%%      | //​text// ​         |<​em>​text</​em>​| 
-| Boldface   | %%''​text''​%%      | **text** ​         |<​strong>​text</​strong>​| 
-| Underline   | %%__text__%% ​            | __text__ ​         |<​u>​text</​u>​| 
-| Strikethrough ​  | %%==text==%% ​            | <​del>​text</​del> ​         |<​strike>​text</​strike>​| 
-| 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>​%%| 
-| Monospace   | %%{{{a //​word//​}}}%%      | ''​a %%//​word//​%%'' ​             |%%<​code>​a //​word//</​code>​%%| 
-| Comment   | %%/%a comment%/%%      ​| ​                  | | 
-| Error   | %%@@error@@%%      | **error** ​                 |<span class=marked>​error</​span>​| 
-| Inline styling ​ | %%@@font-weight:​bold;​text@@%% | **text** ​    ​|<​span style="​font-weight:​bold">​text</​span>​| 
- 
-Some additional syntax: 
-^ Formatting ​   ^ Source Code ^Resulting HTML^ 
-| Bulleted list   | %%* one%% \\ %%* two%%   ​|<​ul><​li>​one</​li>​\\ <​li>​two</​li></​ul>​| 
-| Numbered list   | %%# one%% \\ %%# two%%   ​|<​ol><​li>​one</​li>​\\ <​li>​two</​li></​ol>​| 
-| Horizontal line | %%----%% ​                ​|<​hr>​| 
-| Indented text | >​Text ​               |<​blockquote>​Text</​blockquote>​| 
-| Doubly indented text | %%>>​Text%% ​               | <​blockquote><​blockquote>​Text</​blockquote></​blockquote>​|  
-| Indented block | %%<<<​%% \\ Text \\ %%<<<​%% ​               | <​blockquote>​Text</​blockquote>​|  
-| Heading <h1> | !Title |<​h1>​Title</​h1>​| 
-| Heading <h2> | !!Title |<​h2>​Title</​h2>​| 
-| Heading <h3> | !!!Title |<​h3>​Title</​h3>​| 
-| Heading <h4> | !!!!Title |<​h4>​Title</​h4>​| 
-| 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 ==== 
- 
-One extra piece of syntax, separate from the above tables, is available: ending a line with a backslash ''​\''​ will cause both the backslash and the line break to be removed from the passage, thus "​joining together"​ both lines. The main purpose of this will become apparent when you use [[macro]]s. 
- 
-==== Table syntax ==== 
- 
-Some shorthand syntax for creating HTML tables exists, and is used like so: 
- 
->​|!//​table header //|!//table header //|//table header //| 
->|//row 1//|//row 1//|//row 1//| 
->|//row 2//|//row 2//|//row 2//| 
->​|>​|//​row 3//|//row 3//| 
->​|>​|>​|//​row 4//| 
->|//rows 5 and 6//|//row 5//|//row 5//| 
->​|~|//​row 6//|//row 6//| 
->|//rows 7, 8 and 9//​|>​|//​row 7//| 
->​|~|>​|//​row 8//| 
->​|~|//​row 9//|//row 9//| 
->​|//​table caption//|c 
- 
- 
-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 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 ==== 
- 
-If there'​s a particular kind of formatting that you'd like to use that isn't supported natively by Twine, you can put HTML tags directly into your story'​s text. You can, for instance, produce a block of centered text with a white border using custom CSS like so: 
- 
-<​code>​ 
-The sign reads: 
-<center style="​padding:​1em;​ border: 1px solid white;">​TICKTOCKERSON INSTITUTE OF TEMPORAL FREEZING</​center>​ 
-It hangs in midair, detached from the wall and tilted askew, as if some cosmic video watcher clicked 
-the Pause button as it began to fall. 
-</​code>​ 
- 
-Here's some HTML that you may find helpful: 
-^ HTML    ^ Produces ^ 
-| <​center>​Text</​center> ​  | Horizontally centered text   | 
-| <span style="​text-align:​right">​Text</​span> ​  | Right-aligned text   | 
-| <span style="​text-align:​justify">​Text</​span> ​  | Fully justified text   | 
-| <abbr title="​Alt text">​Text</​abbr> ​  | "alt text" that is visible when you hover over the text   | 
-| <​small>​Text</​small> ​  | Smaller text  | 
-| <​big>​Text</​big> ​  | Bigger text  | 
-| <​br> ​  | A line break (best used in a [[<<​nobr>>​]] block) ​ | 
- 
-Also, don't forget that HTML tags have a "​style"​ attribute which can be used to apply CSS styles to the element. 
- 
-==== Inline styling ==== 
- 
-Inline styling is a shorthand way to apply one-off CSS styles to a span of text. Where normally you would have to write: 
- 
-''<​span style="​color:​magenta;​letter-spacing:​3px;​font-size:​1.5em;">​Some text</​span>''​ 
- 
-You can instead write: 
- 
-''​@@color:​magenta;​letter-spacing:​3px;​font-size:​1.5em;​Some text@@''​ 
- 
-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>​ 
-.hotpink { 
-    color:​magenta;​ 
-    letter-spacing:​3px;​ 
-    font-size:​1.5em;​ 
-}</​code>​ 
- 
-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@@''​ 
- 
-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)