User Tools

Site Tools


syntax

Differences

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

Link to this comparison view

Both sides previous revision Previous revision
Next revision
Previous revision
syntax [2014/01/01 03:50]
l
syntax [2017/10/09 20:39] (current)
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   | %%/%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.1388566201.txt.gz · Last modified: 2017/10/09 20:38 (external edit)