Sugarcane

This page gives examples of the TiddlyWiki markup syntax used in Twine 1.3.5, as well as describing which HTML elements the markup is converted to, so that you can write CSS to style the elements accordingly.\n\n{{{[[This is an internal link to the passage titled "Start2"|Start2]]}}}\n[[This is an internal link to the passage titled "Start2"|Start2]]\n\n{{{This is also a link to Start2: [[Start2]] }}}\nThis is also a link to Start2: [[Start2]]\n\n{{{[[This is an external link to the page "http://l.j-factor.com/gmhtml5/"|http://l.j-factor.com/gmhtml5/]]}}}\n[[This is an external link to the page "http://l.j-factor.com/gmhtml5/"|http://l.j-factor.com/gmhtml5/]]\n\n{{{This is an image: [img[http://l.j-factor.com/gmhtml5/Return_Alive/icon.png]] }}}\nThis is an image: [img[http://l.j-factor.com/gmhtml5/Return_Alive/icon.png]]\nPlease consider doing [[this|http://www.glorioustrainwrecks.com/node/4982]] if you use lots of images.\n\n{{{This is an image that links to the passage titled "Start2": [img[http://l.j-factor.com/gmhtml5/Prizeleaper/icon.png][Start2]] }}}\nThis is an image that links to the passage titled "Start2": [img[http://l.j-factor.com/gmhtml5/Prizeleaper/icon.png][Start2]]\n\n{{{This is an image floated to the left: [<img[http://l.j-factor.com/gmhtml5/Release_Me/icon.png]]}}}\n{{{It has the "align=left" attribute value, which functions similar to the "float:left" CSS attribute value.}}}\nThis is an image floated to the left: [<img[http://l.j-factor.com/gmhtml5/Release_Me/icon.png]] \nIt has the "align=left" attribute value, which functions similar to the "float:left" CSS attribute value.\n\n{{{This is an image floated to the right: [>img[http://l.j-factor.com/gmhtml5/Release_Me/icon.png]]}}}\n{{{It has the "align=right" attribute value, which functions similar to the "float:right" CSS attribute value.}}}\nThis is an image floated to the right: [>img[http://l.j-factor.com/gmhtml5/Release_Me/icon.png]] \nIt has the "align=right" attribute value, which functions similar to the "float:right" CSS attribute value.\n\n{{{This is an image with alt text/title text: [img[An image with alt text|http://l.j-factor.com/gmhtml5/Wee/icon.png]] }}}\nThis is an image with alt text/title text: [img[An image with alt text|http://l.j-factor.com/gmhtml5/Wee/icon.png]]\n\n{{{<html>This is <marquee width="70" style="font-weight:bold;color:teal">raw HTML.</marquee><br>}}}\n{{{<input type="checkbox">Raw HTML blocks are wrapped in a < span > element.</input><br>}}}\n{{{You can't use [[wiki]] ''syntax'' or <<print "macros">> in HTML.</html>}}}\n<html>This is <marquee width="70" style="font-weight:bold;color:teal">raw HTML.</marquee><br>\n<input type="checkbox">Raw HTML blocks are wrapped in a < span > element.</input><br>\nYou can't use [[wiki]] ''syntax'' or <<print "macros">> in HTML.</html>\n\n{{{''This multi-line text is}}}\n{{{in a <strong> element''}}}\n''This multi-line text is \nin a <strong> element''\n\n{{{//This multi-line text is }}}\n{{{in a <em> element//}}}\n//This multi-line text is \nin a <em> element//\n\n{{{__This multi-line text is }}}\n{{{in a <u> element__}}}\n__This multi-line text is \nin a <u> element__\n\n{{{==This multi-line text is }}}\n{{{in a <strike> element==}}}\n==This multi-line text is \nin a <strike> element==\n\n{{{^^This multi-line text is }}}\n{{{in a <sup> element^^, and is superscripted}}}\n^^This multi-line text is \nin a <sup> element^^, and is superscripted\n\n{{{~~This multi-line text is }}}\n{{{in a <sub> element~~, and is subscripted}}}\n~~This multi-line text is \nin a <sub> element~~, and is subscripted\n\n{{{@@This multi-line text is in }}}\n{{{a <span class="marked"> element.@@}}}\n@@This multi-line text is in \na <span class="marked"> element.@@\n\n{{{@@color:magenta;letter-spacing:3px;text-shadow: 0.1em 0.1em pink;font-size:1.5em;This multi-line text is in}}}\n{{{a <span style="..."> tag, with the given CSS styles.}}}\n{{{//NOTE:// this is bugged! You need [[this script code|http://www.glorioustrainwrecks.com/node/5063]] to make it work. @@}}}\n@@color:magenta;letter-spacing:3px;text-shadow: 0.1em 0.1em pink;font-size:1.5em;This multi-line text is in\na <span style="..."> tag, with the given CSS styles.\n//NOTE:// this is bugged! You need [[this script code|http://www.glorioustrainwrecks.com/node/5063]] to make it work. @@\n\n{{{This becomes a <hr> tag:}}}\n{{{----}}}\n----\n\n{{{!This line is in a <h1> element}}}\n!This line is in a <h1> element\n\n{{{!!This line is in a <h2> element}}}\n!!This line is in a <h2> element\n\n{{{!!!This line is in a <h3> element}}}\n!!!This line is in a <h3> element\n\n{{{!!!!This line is in a <h4> element}}}\n!!!!This line is in a <h4> element\n\n{{{!!!!!This line is in a <h5> element}}}\n!!!!!This line is in a <h5> element\n\n{{{*This line is in a <li> element inside a <ul> element.}}}\n{{{*This line is also inside the same <ul> element.}}}\n{{{**This line is in a nested <ul> element.}}}\n{{{***As is this line.}}}\n{{{****And this one.}}}\n{{{*This line is still inside the <ul> element.}}}\n*This line is in a <li> element inside a <ul> element.\n*This line is also inside the same <ul> element.\n**This line is in a nested <ul> element inside the first.\n***As is this line.\n****And this one.\n*This line is still inside the first <ul> element.\n\n{{{#This line is in a <li> element inside a <ol> element.}}}\n{{{#This line is also inside the same <ol> element.}}}\n{{{##This line is in a nested <ol> element.}}}\n{{{###As is this line.}}}\n{{{####And this one.}}}\n{{{#This line is still inside the <ol> element.}}}\n#This line is in a <li> element inside a <ol> element.\n#This line is also inside the same <ol> element.\n##This line is in a nested <ol> element inside the first.\n###As is this line.\n####And this one.\n#This line is still inside the first <ol> element.\n\n{{{>This line is inside a <blockquote> element.}}}\n{{{>As is this line.}}}\n{{{>>This line is in a nested <blockquote> element inside the first.}}}\n{{{>>>As is this one.}}}\n{{{>This line is still inside the first <blockquote> element.}}}\n>This line is inside a <blockquote> element.\n>As is this line.\n>>This line is in a nested <blockquote> element inside the first.\n>>>As is this one.\n>This line is still inside the first <blockquote> element.\n\n{{{<<<}}}\n{{{This multi-line text is}}}\n{{{inside a single <blockquote> element.}}}\n{{{You must put the opening and closing triple-chevrons on separate lines by themselves.}}}\n{{{<<<}}}\n<<<\nThis multi-line text is\ninside a single <blockquote> element.\nYou must put the opening and closing triple-chevrons on separate lines by themselves.\n<<<\n\n{{{{{{This line is in a <code> element. No [[formatting]] or <html> is usable in here.}}}}}}\n{{{This line is in a <code> element. No [[formatting]] or <html> is processed in here.}}}\n\n<html><pre>{{{\nThese lines are in a < code > element.\nYou must put the opening and closing triple-parens on separate lines by themselves.\n}}}</pre></html>{{{\nThese lines are in a < code > element.\nYou must put the opening and closing triple-parens on separate lines by themselves.\n}}}\n\n{{{/% This is a comment. None of this will}}}\n{{{be displayed <<print "Die!">> or executed. %/}}}\n/% This is a comment. None of this will\nbe displayed <<print "Die!">> or executed. %/\n\n{{{\n|!table header <th>|!table header <th>|table header <td>|\n|row 1|row 1|row 1|\n|row 2|row 2|row 2|\n|>|row 3|row 3|\n|>|>|row 4|\n|rows 5 and 6|row 5|row 5|\n|~|row 6|row 6|\n|rows 7, 8 and 9|>|row 7|\n|~|>|row 8|\n|~|row 9|row 9|\n|table <caption>|c\n}}}\n|!table header <th>|!table header <th>|table header <td>|\n|row 1|row 1|row 1|\n|row 2|row 2|row 2|\n|>|row 3|row 3|\n|>|>|row 4|\n|rows 5 and 6|row 5|row 5|\n|~|row 6|row 6|\n|rows 7, 8 and 9|>|row 7|\n|~|>|row 8|\n|~|row 9|row 9|\n|table <caption>|c\n//Note:// you have to alter the default CSS to make the cell boundaries visible.\n\n{{{/***}}}\n{{{This triple-asterisk enclosure is unused TiddlyWiki syntax. It does nothing.}}}\n{{{***/}}}\n/***\nThis triple-asterisk enclosure is unused TiddlyWiki syntax. It does nothing.\n***/\n

String.prototype.unDash = function()\n{\n var s = this.split("-");\n if(s.length > 1)\n for(var t=1; t < s.length; t++)\n s[t] = s[t].substr(0,1).toUpperCase() + s[t].substr(1);\n return s.join("");\n}\n\nsetTimeout(function(){ var next = "Start2";\n\nvar h = state.history; if (h[0].passage.title=="Start") { var n = insertElement(null, 'div');n.style.display="none";n.appendChild($("passages").removeChild($("passageStart")));state.display(next,null);$("passages").appendChild(n);}},1);

Twine 1.3.5 Markup Syntax Examples

code,pre { font-size: 1.5em; }\n\nbody { background-color: #fff;\ncolor: #000; }\n\ntable,tr,td { border-width: 1px; border-style: solid; }