5 <title>CodeMirror: TiddlyWiki mode</title>
6 <link rel="stylesheet" href="../../lib/codemirror.css">
7 <script src="../../lib/codemirror.js"></script>
8 <script src="../../addon/edit/matchbrackets.js"></script>
9 <script src="tiddlywiki.js"></script>
10 <link rel="stylesheet" href="tiddlywiki.css">
11 <link rel="stylesheet" href="../../doc/docs.css">
12 <style type="text/css">.CodeMirror {border-top: 1px solid black; border-bottom: 1px solid black;}</style>
15 <h1>CodeMirror: TiddlyWiki mode</h1>
17 <div><textarea id="code" name="code">
18 !TiddlyWiki Formatting
19 * Rendered versions can be found at: http://www.tiddlywiki.com/#Reference
22 |bold font | ''bold'' |
23 |italic type | //italic// |
24 |underlined text | __underlined__ |
25 |strikethrough text | --strikethrough-- |
26 |superscript text | super^^script^^ |
27 |subscript text | sub~~script~~ |
28 |highlighted text | @@highlighted@@ |
29 |preformatted text | {{{preformatted}}} |
46 * unordered list, level 1
47 ** unordered list, level 2
48 *** unordered list, level 3
50 # ordered list, level 1
51 ## ordered list, level 2
52 ### unordered list, level 3
54 ; definition list, term
55 : definition list, description
61 >> blockquote, level 2
62 >>> blockquote, level 3
70 preformatted (e.g. code)
81 JS styled code. TiddlyWiki mixed mode should support highlighter switching in the future.
85 XML styled code. TiddlyWiki mixed mode should support highlighter switching in the future.
92 |!heading column 1|!heading column 2|
93 |row 1, column 1|row 1, column 2|
94 |row 2, column 1|row 2, column 2|
98 |CssProperty:value;...| ... |
102 * The {{{>}}} marker creates a "colspan", causing the current cell to merge with the one to the right.
103 * The {{{~}}} marker creates a "rowspan", causing the current cell to merge with the one above.
106 cf. [[TiddlyWiki.com|http://www.tiddlywiki.com/#EmbeddedImages]]
109 * [[WikiWords|WikiWord]] are automatically transformed to hyperlinks to the respective tiddler
110 ** the automatic transformation can be suppressed by preceding the respective WikiWord with a tilde ({{{~}}}): {{{~WikiWord}}}
111 * [[PrettyLinks]] are enclosed in square brackets and contain the desired tiddler name: {{{[[tiddler name]]}}}
112 ** 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).
115 * {{{@@CssProperty:value;CssProperty:value;...@@}}}<br>''N.B.:'' CSS color definitions should use lowercase letters to prevent the inadvertent creation of WikiWords.
116 * <html><code>{{customCssClass{...}}}</code></html>
117 * raw HTML can be inserted by enclosing the respective code in HTML tags: {{{<html> ... </html>}}}
120 * {{{<br>}}} forces a manual line break
121 * {{{----}}} creates a horizontal ruler
122 * [[HTML entities|http://www.tiddlywiki.com/#HtmlEntities]]
123 * [[HTML entities local|HtmlEntities]]
124 * {{{<<macroName>>}}} calls the respective [[macro|Macros]]
125 * 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.
126 * To prevent wiki markup from taking effect for a particular section, that section can be enclosed in three double quotes: e.g. {{{"""WikiWord"""}}}.
130 var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
138 <p>TiddlyWiki mode supports a single configuration.</p>
140 <p><strong>MIME types defined:</strong> <code>text/x-tiddlywiki</code>.</p>