topical media & game development

talk show tell print

mobile-query-three-www-vendor-CodeMirror2-mode-tiddlywiki-index.htm / htm



  <!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
  
  
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
  
  
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>
  


(C) Æliens 04/09/2009

You may not copy or print any of this material without explicit permission of the author or the publisher. In case of other copyright issues, contact the author.