index.html 4.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191
  1. <!doctype html>
  2. <title>CodeMirror: Textile mode</title>
  3. <meta charset="utf-8"/>
  4. <link rel=stylesheet href="../../doc/docs.css">
  5. <link rel="stylesheet" href="../../lib/codemirror.css">
  6. <script src="../../lib/codemirror.js"></script>
  7. <script src="textile.js"></script>
  8. <style>.CodeMirror {background: #f8f8f8;}</style>
  9. <div id=nav>
  10. <a href="http://codemirror.net"><h1>CodeMirror</h1><img id=logo src="../../doc/logo.png"></a>
  11. <ul>
  12. <li><a href="../../index.html">Home</a>
  13. <li><a href="../../doc/manual.html">Manual</a>
  14. <li><a href="https://github.com/marijnh/codemirror">Code</a>
  15. </ul>
  16. <ul>
  17. <li><a href="../index.html">Language modes</a>
  18. <li><a class="active" href="#">Textile</a>
  19. </ul>
  20. </div>
  21. <article>
  22. <h2>Textile mode</h2>
  23. <form><textarea id="code" name="code">
  24. h1. Textile Mode
  25. A paragraph without formatting.
  26. p. A simple Paragraph.
  27. h2. Phrase Modifiers
  28. Here are some simple phrase modifiers: *strong*, _emphasis_, **bold**, and __italic__.
  29. A ??citation??, -deleted text-, +inserted text+, some ^superscript^, and some ~subscript~.
  30. A %span element% and @code element@
  31. A "link":http://example.com, a "link with (alt text)":urlAlias
  32. [urlAlias]http://example.com/
  33. An image: !http://example.com/image.png! and an image with a link: !http://example.com/image.png!:http://example.com
  34. A sentence with a footnote.[123]
  35. fn123. The footnote is defined here.
  36. Registered(r), Trademark(tm), and Copyright(c)
  37. h2. Headers
  38. h1. Top level
  39. h2. Second level
  40. h3. Third level
  41. h4. Fourth level
  42. h5. Fifth level
  43. h6. Lowest level
  44. h2. Lists
  45. * An unordered list
  46. ** foo bar
  47. *** foo bar
  48. **** foo bar
  49. ** foo bar
  50. # An ordered list
  51. ## foo bar
  52. ### foo bar
  53. #### foo bar
  54. ## foo bar
  55. - definition list := description
  56. - another item := foo bar
  57. - spanning ines :=
  58. foo bar
  59. foo bar =:
  60. h2. Attributes
  61. Layouts and phrase modifiers can be modified with various kinds of attributes: alignment, CSS ID, CSS class names, language, padding, and CSS styles.
  62. h3. Alignment
  63. div<. left align
  64. div>. right align
  65. h3. CSS ID and class name
  66. You are a %(my-id#my-classname) rad% person.
  67. h3. Language
  68. p[en_CA]. Strange weather, eh?
  69. h3. Horizontal Padding
  70. p(())). 2em left padding, 3em right padding
  71. h3. CSS styling
  72. p{background: red}. Fire!
  73. h2. Table
  74. |_. Header 1 |_. Header 2 |
  75. |{background:#ddd}. Cell with background| Normal |
  76. |\2. Cell spanning 2 columns |
  77. |/2. Cell spanning 2 rows |(cell-class). one |
  78. | two |
  79. |>. Right aligned cell |<. Left aligned cell |
  80. h3. A table with attributes:
  81. table(#prices).
  82. |Adults|$5|
  83. |Children|$2|
  84. h2. Code blocks
  85. bc.
  86. function factorial(n) {
  87. if (n === 0) {
  88. return 1;
  89. }
  90. return n * factorial(n - 1);
  91. }
  92. pre..
  93. ,,,,,,
  94. o#'9MMHb':'-,o,
  95. .oH":HH$' "' ' -*R&o,
  96. dMMM*""'`' .oM"HM?.
  97. ,MMM' "HLbd< ?&H\
  98. .:MH ."\ ` MM MM&b
  99. . "*H - &MMMMMMMMMH:
  100. . dboo MMMMMMMMMMMM.
  101. . dMMMMMMb *MMMMMMMMMP.
  102. . MMMMMMMP *MMMMMP .
  103. `#MMMMM MM6P ,
  104. ' `MMMP" HM*`,
  105. ' :MM .- ,
  106. '. `#?.. . ..'
  107. -. . .-
  108. ''-.oo,oo.-''
  109. \. _(9>
  110. \==_)
  111. -'=
  112. h2. Temporarily disabling textile markup
  113. notextile. Don't __touch this!__
  114. Surround text with double-equals to disable textile inline. Example: Use ==*asterisks*== for *strong* text.
  115. h2. HTML
  116. Some block layouts are simply textile versions of HTML tags with the same name, like @div@, @pre@, and @p@. HTML tags can also exist on their own line:
  117. <section>
  118. <h1>Title</h1>
  119. <p>Hello!</p>
  120. </section>
  121. </textarea></form>
  122. <script>
  123. var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
  124. lineNumbers: true,
  125. mode: "text/x-textile"
  126. });
  127. </script>
  128. <p><strong>MIME types defined:</strong> <code>text/x-textile</code>.</p>
  129. <p><strong>Parsing/Highlighting Tests:</strong> <a href="../../test/index.html#textile_*">normal</a>, <a href="../../test/index.html#verbose,textile_*">verbose</a>.</p>
  130. </article>