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/23 00:21]
l
syntax [2017/10/09 20:39] (current)
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   | %%{{{a //​word//​}}}%%      | ''​a %%//​word//​%%'' ​             |%%<​code>​some //text//</​code>​%%| +| Monospace   | %%{{{a //​word//​}}}%%      | ''​a %%//​word//​%%'' ​             |%%<​code>​//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 ^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]]->
syntax.1390454512.txt.gz · Last modified: 2017/10/09 20:38 (external edit)