index.html 4.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  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>
  13. </head>
  14. <body>
  15. <h1>CodeMirror: TiddlyWiki mode</h1>
  16. <div><textarea id="code" name="code">
  17. !TiddlyWiki Formatting
  18. * Rendered versions can be found at: http://www.tiddlywiki.com/#Reference
  19. |!Option | !Syntax |
  20. |bold font | ''bold'' |
  21. |italic type | //italic// |
  22. |underlined text | __underlined__ |
  23. |strikethrough text | --strikethrough-- |
  24. |superscript text | super^^script^^ |
  25. |subscript text | sub~~script~~ |
  26. |highlighted text | @@highlighted@@ |
  27. |preformatted text | {{{preformatted}}} |
  28. !Block Elements
  29. <<<
  30. !Heading 1
  31. !!Heading 2
  32. !!!Heading 3
  33. !!!!Heading 4
  34. !!!!!Heading 5
  35. <<<
  36. !!Lists
  37. <<<
  38. * unordered list, level 1
  39. ** unordered list, level 2
  40. *** unordered list, level 3
  41. # ordered list, level 1
  42. ## ordered list, level 2
  43. ### unordered list, level 3
  44. ; definition list, term
  45. : definition list, description
  46. <<<
  47. !!Blockquotes
  48. <<<
  49. > blockquote, level 1
  50. >> blockquote, level 2
  51. >>> blockquote, level 3
  52. > blockquote
  53. <<<
  54. !!Preformatted Text
  55. <<<
  56. {{{
  57. preformatted (e.g. code)
  58. }}}
  59. <<<
  60. !!Code Sections
  61. <<<
  62. {{{
  63. Text style code
  64. }}}
  65. //{{{
  66. JS styled code. TiddlyWiki mixed mode should support highlighter switching in the future.
  67. //}}}
  68. <!--{{{-->
  69. XML styled code. TiddlyWiki mixed mode should support highlighter switching in the future.
  70. <!--}}}-->
  71. <<<
  72. !!Tables
  73. <<<
  74. |CssClass|k
  75. |!heading column 1|!heading column 2|
  76. |row 1, column 1|row 1, column 2|
  77. |row 2, column 1|row 2, column 2|
  78. |>|COLSPAN|
  79. |ROWSPAN| ... |
  80. |~| ... |
  81. |CssProperty:value;...| ... |
  82. |caption|c
  83. ''Annotation:''
  84. * The {{{>}}} marker creates a "colspan", causing the current cell to merge with the one to the right.
  85. * The {{{~}}} marker creates a "rowspan", causing the current cell to merge with the one above.
  86. <<<
  87. !!Images /% TODO %/
  88. cf. [[TiddlyWiki.com|http://www.tiddlywiki.com/#EmbeddedImages]]
  89. !Hyperlinks
  90. * [[WikiWords|WikiWord]] are automatically transformed to hyperlinks to the respective tiddler
  91. ** the automatic transformation can be suppressed by preceding the respective WikiWord with a tilde ({{{~}}}): {{{~WikiWord}}}
  92. * [[PrettyLinks]] are enclosed in square brackets and contain the desired tiddler name: {{{[[tiddler name]]}}}
  93. ** 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).
  94. !Custom Styling
  95. * {{{@@CssProperty:value;CssProperty:value;...@@}}}<br>''N.B.:'' CSS color definitions should use lowercase letters to prevent the inadvertent creation of WikiWords.
  96. * <html><code>{{customCssClass{...}}}</code></html>
  97. * raw HTML can be inserted by enclosing the respective code in HTML tags: {{{<html> ... </html>}}}
  98. !Special Markers
  99. * {{{<br>}}} forces a manual line break
  100. * {{{----}}} creates a horizontal ruler
  101. * [[HTML entities|http://www.tiddlywiki.com/#HtmlEntities]]
  102. * [[HTML entities local|HtmlEntities]]
  103. * {{{<<macroName>>}}} calls the respective [[macro|Macros]]
  104. * 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.
  105. * To prevent wiki markup from taking effect for a particular section, that section can be enclosed in three double quotes: e.g. {{{"""WikiWord"""}}}.
  106. </textarea></div>
  107. <script>
  108. var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
  109. mode: 'tiddlywiki',
  110. lineNumbers: true,
  111. enterMode: 'keep',
  112. matchBrackets: true
  113. });
  114. </script>
  115. <p>TiddlyWiki mode supports a single configuration.</p>
  116. <p><strong>MIME types defined:</strong> <code>text/x-tiddlywiki</code>.</p>
  117. </body>
  118. </html>