* Update CodeMirror to version 5.49.0 * Update CodeMirror versions in librejs and VERSIONS
		
			
				
	
	
		
			191 lines
		
	
	
	
		
			4.2 KiB
		
	
	
	
		
			HTML
		
	
	
	
	
	
			
		
		
	
	
			191 lines
		
	
	
	
		
			4.2 KiB
		
	
	
	
		
			HTML
		
	
	
	
	
	
<!doctype html>
 | 
						|
 | 
						|
<title>CodeMirror: Textile mode</title>
 | 
						|
<meta charset="utf-8"/>
 | 
						|
<link rel=stylesheet href="../../doc/docs.css">
 | 
						|
 | 
						|
<link rel="stylesheet" href="../../lib/codemirror.css">
 | 
						|
<script src="../../lib/codemirror.js"></script>
 | 
						|
<script src="textile.js"></script>
 | 
						|
<style>.CodeMirror {background: #f8f8f8;}</style>
 | 
						|
<div id=nav>
 | 
						|
  <a href="https://codemirror.net"><h1>CodeMirror</h1><img id=logo src="../../doc/logo.png"></a>
 | 
						|
 | 
						|
  <ul>
 | 
						|
    <li><a href="../../index.html">Home</a>
 | 
						|
    <li><a href="../../doc/manual.html">Manual</a>
 | 
						|
    <li><a href="https://github.com/marijnh/codemirror">Code</a>
 | 
						|
  </ul>
 | 
						|
  <ul>
 | 
						|
    <li><a href="../index.html">Language modes</a>
 | 
						|
    <li><a class="active" href="#">Textile</a>
 | 
						|
  </ul>
 | 
						|
</div>
 | 
						|
 | 
						|
<article>
 | 
						|
    <h2>Textile mode</h2>
 | 
						|
    <form><textarea id="code" name="code">
 | 
						|
h1. Textile Mode
 | 
						|
 | 
						|
A paragraph without formatting.
 | 
						|
 | 
						|
p. A simple Paragraph.
 | 
						|
 | 
						|
 | 
						|
h2. Phrase Modifiers
 | 
						|
 | 
						|
Here are some simple phrase modifiers: *strong*, _emphasis_, **bold**, and __italic__.
 | 
						|
 | 
						|
A ??citation??, -deleted text-, +inserted text+, some ^superscript^, and some ~subscript~.
 | 
						|
 | 
						|
A %span element% and @code element@
 | 
						|
 | 
						|
A "link":http://example.com, a "link with (alt text)":urlAlias
 | 
						|
 | 
						|
[urlAlias]http://example.com/
 | 
						|
 | 
						|
An image: !http://example.com/image.png! and an image with a link: !http://example.com/image.png!:http://example.com
 | 
						|
 | 
						|
A sentence with a footnote.[123]
 | 
						|
 | 
						|
fn123. The footnote is defined here.
 | 
						|
 | 
						|
Registered(r), Trademark(tm), and Copyright(c)
 | 
						|
 | 
						|
 | 
						|
h2. Headers
 | 
						|
 | 
						|
h1. Top level
 | 
						|
h2. Second level
 | 
						|
h3. Third level
 | 
						|
h4. Fourth level
 | 
						|
h5. Fifth level
 | 
						|
h6. Lowest level
 | 
						|
 | 
						|
 | 
						|
h2.  Lists
 | 
						|
 | 
						|
* An unordered list
 | 
						|
** foo bar
 | 
						|
*** foo bar
 | 
						|
**** foo bar
 | 
						|
** foo bar
 | 
						|
 | 
						|
# An ordered list
 | 
						|
## foo bar
 | 
						|
### foo bar
 | 
						|
#### foo bar
 | 
						|
## foo bar
 | 
						|
 | 
						|
- definition list := description
 | 
						|
- another item    := foo bar
 | 
						|
- spanning ines   :=
 | 
						|
                     foo bar
 | 
						|
 | 
						|
                     foo bar =:
 | 
						|
 | 
						|
 | 
						|
h2. Attributes
 | 
						|
 | 
						|
Layouts and phrase modifiers can be modified with various kinds of attributes: alignment, CSS ID, CSS class names, language, padding, and CSS styles.
 | 
						|
 | 
						|
h3. Alignment
 | 
						|
 | 
						|
div<. left align
 | 
						|
div>. right align
 | 
						|
 | 
						|
h3. CSS ID and class name
 | 
						|
 | 
						|
You are a %(my-id#my-classname) rad% person.
 | 
						|
 | 
						|
h3. Language
 | 
						|
 | 
						|
p[en_CA]. Strange weather, eh?
 | 
						|
 | 
						|
h3. Horizontal Padding
 | 
						|
 | 
						|
p(())). 2em left padding, 3em right padding
 | 
						|
 | 
						|
h3. CSS styling
 | 
						|
 | 
						|
p{background: red}. Fire!
 | 
						|
 | 
						|
 | 
						|
h2. Table
 | 
						|
 | 
						|
|_.              Header 1               |_.      Header 2        |
 | 
						|
|{background:#ddd}. Cell with background|         Normal         |
 | 
						|
|\2.         Cell spanning 2 columns                             |
 | 
						|
|/2.         Cell spanning 2 rows       |(cell-class). one       |
 | 
						|
|                                                two             |
 | 
						|
|>.                  Right aligned cell |<. Left aligned cell    |
 | 
						|
 | 
						|
 | 
						|
h3. A table with attributes:
 | 
						|
 | 
						|
table(#prices).
 | 
						|
|Adults|$5|
 | 
						|
|Children|$2|
 | 
						|
 | 
						|
 | 
						|
h2. Code blocks
 | 
						|
 | 
						|
bc.
 | 
						|
function factorial(n) {
 | 
						|
    if (n === 0) {
 | 
						|
        return 1;
 | 
						|
    }
 | 
						|
    return n * factorial(n - 1);
 | 
						|
}
 | 
						|
 | 
						|
pre..
 | 
						|
                ,,,,,,
 | 
						|
            o#'9MMHb':'-,o,
 | 
						|
         .oH":HH$' "' ' -*R&o,
 | 
						|
        dMMM*""'`'      .oM"HM?.
 | 
						|
       ,MMM'          "HLbd< ?&H\
 | 
						|
      .:MH ."\          ` MM  MM&b
 | 
						|
     . "*H    -        &MMMMMMMMMH:
 | 
						|
     .    dboo        MMMMMMMMMMMM.
 | 
						|
     .   dMMMMMMb      *MMMMMMMMMP.
 | 
						|
     .    MMMMMMMP        *MMMMMP .
 | 
						|
          `#MMMMM           MM6P ,
 | 
						|
       '    `MMMP"           HM*`,
 | 
						|
        '    :MM             .- ,
 | 
						|
         '.   `#?..  .       ..'
 | 
						|
            -.   .         .-
 | 
						|
              ''-.oo,oo.-''
 | 
						|
 | 
						|
\. _(9>
 | 
						|
 \==_)
 | 
						|
  -'=
 | 
						|
 | 
						|
h2. Temporarily disabling textile markup
 | 
						|
 | 
						|
notextile. Don't __touch this!__
 | 
						|
 | 
						|
Surround text with double-equals to disable textile inline. Example: Use ==*asterisks*== for *strong* text.
 | 
						|
 | 
						|
 | 
						|
h2. HTML
 | 
						|
 | 
						|
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:
 | 
						|
 | 
						|
<section>
 | 
						|
  <h1>Title</h1>
 | 
						|
  <p>Hello!</p>
 | 
						|
</section>
 | 
						|
 | 
						|
</textarea></form>
 | 
						|
    <script>
 | 
						|
        var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
 | 
						|
            lineNumbers: true,
 | 
						|
            mode: "text/x-textile"
 | 
						|
        });
 | 
						|
    </script>
 | 
						|
 | 
						|
    <p><strong>MIME types defined:</strong> <code>text/x-textile</code>.</p>
 | 
						|
 | 
						|
    <p><strong>Parsing/Highlighting Tests:</strong> <a href="../../test/index.html#textile_*">normal</a>,  <a href="../../test/index.html#verbose,textile_*">verbose</a>.</p>
 | 
						|
 | 
						|
</article>
 |