1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 | <!doctype html> <html> <head> <title>CodeMirror: TiddlyWiki mode</title> <link rel="stylesheet" href="../../lib/codemirror.css"> <script src="../../lib/codemirror.js"></script> <script src="tiddlywiki.js"></script> <link rel="stylesheet" href="tiddlywiki.css"> <link rel="stylesheet" href="../../doc/docs.css"> <style type="text/css">.CodeMirror {border-top: 1px solid black; border-bottom: 1px solid black;}</style> </head> <body> <h1>CodeMirror: TiddlyWiki mode</h1> <div><textarea id="code" name="code"> !TiddlyWiki Formatting * Rendered versions can be found at: http://www.tiddlywiki.com/#Reference |!Option|!Syntax|!Output| |bold font|{{{''bold''}}}|''bold''| |italic type|{{{//italic//}}}|//italic//| |underlined text|{{{__underlined__}}}|__underlined__| |strikethrough text|{{{--strikethrough--}}}|--strikethrough--| |superscript text|{{{^^super^^script}}}|^^super^^script| |subscript text|{{{~~sub~~script}}}|~~sub~~script| |highlighted text|{{{@@highlighted@@}}}|@@highlighted@@| |preformatted text|<html><code>{{{preformatted}}}</code></html>|{{{preformatted}}}| !Block Elements !!Headings {{{ !Heading 1 !!Heading 2 !!!Heading 3 !!!!Heading 4 !!!!!Heading 5 }}} <<< !Heading 1 !!Heading 2 !!!Heading 3 !!!!Heading 4 !!!!!Heading 5 <<< !!Lists {{{ * unordered list, level 1 ** unordered list, level 2 *** unordered list, level 3 # ordered list, level 1 ## ordered list, level 2 ### unordered list, level 3 ; definition list, term : definition list, description }}} <<< * unordered list, level 1 ** unordered list, level 2 *** unordered list, level 3 # ordered list, level 1 ## ordered list, level 2 ### unordered list, level 3 ; definition list, term : definition list, description <<< !!Blockquotes {{{ > blockquote, level 1 >> blockquote, level 2 >>> blockquote, level 3 <<< blockquote <<< }}} <<< > blockquote, level 1 >> blockquote, level 2 >>> blockquote, level 3 > blockquote <<< !!Preformatted Text <html><pre> {{{ preformatted (e.g. code) }}} </pre></html> <<< {{{ preformatted (e.g. code) }}} <<< !!Code Sections {{{ Text style code }}} //{{{ JS styled code. TiddlyWiki mixed mode should support highlighter switching in the future. //}}} <!--{{{--> XML styled code. TiddlyWiki mixed mode should support highlighter switching in the future. <!--}}}--> !!Tables {{{ |CssClass|k |!heading column 1|!heading column 2| |row 1, column 1|row 1, column 2| |row 2, column 1|row 2, column 2| |>|COLSPAN| |ROWSPAN| ... | |~| ... | |CssProperty:value;...| ... | |caption|c }}} ''Annotation:'' * The {{{>}}} marker creates a "colspan", causing the current cell to merge with the one to the right. * The {{{~}}} marker creates a "rowspan", causing the current cell to merge with the one above. <<< |CssClass|k |!heading column 1|!heading column 2| |row 1, column 1|row 1, column 2| |row 2, column 1|row 2, column 2| |>|COLSPAN| |ROWSPAN| ... | |~| ... | |CssProperty:value;...| ... | |caption|c <<< !!Images /% TODO %/ cf. [[TiddlyWiki.com|http://www.tiddlywiki.com/#EmbeddedImages]] !Hyperlinks * [[WikiWords|WikiWord]] are automatically transformed to hyperlinks to the respective tiddler ** the automatic transformation can be suppressed by preceding the respective WikiWord with a tilde ({{{~}}}): {{{~WikiWord}}} * [[PrettyLinks]] are enclosed in square brackets and contain the desired tiddler name: {{{[[tiddler name]]}}} ** optionally, a custom title or description can be added, separated by a pipe character ({{{|}}}): {{{[[title|target]]}}}<br>'''N.B.:''' In this case, the target can also be any website (i.e. URL). !Custom Styling * {{{@@CssProperty:value;CssProperty:value;...@@}}}<br>''N.B.:'' CSS color definitions should use lowercase letters to prevent the inadvertent creation of WikiWords. * <html><code>{{customCssClass{...}}}</code></html> * raw HTML can be inserted by enclosing the respective code in HTML tags: {{{<html> ... </html>}}} !Special Markers * {{{<br>}}} forces a manual line break * {{{----}}} creates a horizontal ruler * [[HTML entities|http://www.tiddlywiki.com/#HtmlEntities]] * [[HTML entities local|HtmlEntities]] * {{{<<macroName>>}}} calls the respective [[macro|Macros]] * To hide text within a tiddler so that it is not displayed, it can be wrapped in {{{/%}}} and {{{%/}}}.<br/>This can be a useful trick for hiding drafts or annotating complex markup. * To prevent wiki markup from taking effect for a particular section, that section can be enclosed in three double quotes: e.g. {{{"""WikiWord"""}}}. </textarea></div> <script> var editor = CodeMirror.fromTextArea(document.getElementById("code"), { mode: 'tiddlywiki', lineNumbers: true, enterMode: 'keep', matchBrackets: true }); </script> <p>TiddlyWiki mode supports a single configuration.</p> <p><strong>MIME types defined:</strong> <code>text/x-tiddlywiki</code>.</p> </body> </html> |