openrat-cms

Unnamed repository; edit this file 'description' to name the repository.
Log | Files | Refs | README

index.html (12483B)


      1 <!doctype html>
      2 
      3 <title>CodeMirror: Markdown mode</title>
      4 <meta charset="utf-8"/>
      5 <link rel=stylesheet href="../../doc/docs.css">
      6 
      7 <link rel="stylesheet" href="../../lib/codemirror.css">
      8 <script src="../../lib/codemirror.js"></script>
      9 <script src="../../addon/edit/continuelist.js"></script>
     10 <script src="../xml/xml.js"></script>
     11 <script src="markdown.js"></script>
     12 <style type="text/css">
     13       .CodeMirror {border-top: 1px solid black; border-bottom: 1px solid black;}
     14       .cm-s-default .cm-trailing-space-a:before,
     15       .cm-s-default .cm-trailing-space-b:before {position: absolute; content: "\00B7"; color: #777;}
     16       .cm-s-default .cm-trailing-space-new-line:before {position: absolute; content: "\21B5"; color: #777;}
     17     </style>
     18 <div id=nav>
     19   <a href="http://codemirror.net"><h1>CodeMirror</h1><img id=logo src="../../doc/logo.png"></a>
     20 
     21   <ul>
     22     <li><a href="../../index.html">Home</a>
     23     <li><a href="../../doc/manual.html">Manual</a>
     24     <li><a href="https://github.com/codemirror/codemirror">Code</a>
     25   </ul>
     26   <ul>
     27     <li><a href="../index.html">Language modes</a>
     28     <li><a class=active href="#">Markdown</a>
     29   </ul>
     30 </div>
     31 
     32 <article>
     33 <h2>Markdown mode</h2>
     34 <form><textarea id="code" name="code">
     35 Markdown: Basics
     36 ================
     37 
     38 &lt;ul id="ProjectSubmenu"&gt;
     39     &lt;li&gt;&lt;a href="/projects/markdown/" title="Markdown Project Page"&gt;Main&lt;/a&gt;&lt;/li&gt;
     40     &lt;li&gt;&lt;a class="selected" title="Markdown Basics"&gt;Basics&lt;/a&gt;&lt;/li&gt;
     41     &lt;li&gt;&lt;a href="/projects/markdown/syntax" title="Markdown Syntax Documentation"&gt;Syntax&lt;/a&gt;&lt;/li&gt;
     42     &lt;li&gt;&lt;a href="/projects/markdown/license" title="Pricing and License Information"&gt;License&lt;/a&gt;&lt;/li&gt;
     43     &lt;li&gt;&lt;a href="/projects/markdown/dingus" title="Online Markdown Web Form"&gt;Dingus&lt;/a&gt;&lt;/li&gt;
     44 &lt;/ul&gt;
     45 
     46 
     47 Getting the Gist of Markdown's Formatting Syntax
     48 ------------------------------------------------
     49 
     50 This page offers a brief overview of what it's like to use Markdown.
     51 The [syntax page] [s] provides complete, detailed documentation for
     52 every feature, but Markdown should be very easy to pick up simply by
     53 looking at a few examples of it in action. The examples on this page
     54 are written in a before/after style, showing example syntax and the
     55 HTML output produced by Markdown.
     56 
     57 It's also helpful to simply try Markdown out; the [Dingus] [d] is a
     58 web application that allows you type your own Markdown-formatted text
     59 and translate it to XHTML.
     60 
     61 **Note:** This document is itself written using Markdown; you
     62 can [see the source for it by adding '.text' to the URL] [src].
     63 
     64   [s]: /projects/markdown/syntax  "Markdown Syntax"
     65   [d]: /projects/markdown/dingus  "Markdown Dingus"
     66   [src]: /projects/markdown/basics.text
     67 
     68 
     69 ## Paragraphs, Headers, Blockquotes ##
     70 
     71 A paragraph is simply one or more consecutive lines of text, separated
     72 by one or more blank lines. (A blank line is any line that looks like
     73 a blank line -- a line containing nothing but spaces or tabs is
     74 considered blank.) Normal paragraphs should not be indented with
     75 spaces or tabs.
     76 
     77 Markdown offers two styles of headers: *Setext* and *atx*.
     78 Setext-style headers for `&lt;h1&gt;` and `&lt;h2&gt;` are created by
     79 "underlining" with equal signs (`=`) and hyphens (`-`), respectively.
     80 To create an atx-style header, you put 1-6 hash marks (`#`) at the
     81 beginning of the line -- the number of hashes equals the resulting
     82 HTML header level.
     83 
     84 Blockquotes are indicated using email-style '`&gt;`' angle brackets.
     85 
     86 Markdown:
     87 
     88     A First Level Header
     89     ====================
     90 
     91     A Second Level Header
     92     ---------------------
     93 
     94     Now is the time for all good men to come to
     95     the aid of their country. This is just a
     96     regular paragraph.
     97 
     98     The quick brown fox jumped over the lazy
     99     dog's back.
    100 
    101     ### Header 3
    102 
    103     &gt; This is a blockquote.
    104     &gt;
    105     &gt; This is the second paragraph in the blockquote.
    106     &gt;
    107     &gt; ## This is an H2 in a blockquote
    108 
    109 
    110 Output:
    111 
    112     &lt;h1&gt;A First Level Header&lt;/h1&gt;
    113 
    114     &lt;h2&gt;A Second Level Header&lt;/h2&gt;
    115 
    116     &lt;p&gt;Now is the time for all good men to come to
    117     the aid of their country. This is just a
    118     regular paragraph.&lt;/p&gt;
    119 
    120     &lt;p&gt;The quick brown fox jumped over the lazy
    121     dog's back.&lt;/p&gt;
    122 
    123     &lt;h3&gt;Header 3&lt;/h3&gt;
    124 
    125     &lt;blockquote&gt;
    126         &lt;p&gt;This is a blockquote.&lt;/p&gt;
    127 
    128         &lt;p&gt;This is the second paragraph in the blockquote.&lt;/p&gt;
    129 
    130         &lt;h2&gt;This is an H2 in a blockquote&lt;/h2&gt;
    131     &lt;/blockquote&gt;
    132 
    133 
    134 
    135 ### Phrase Emphasis ###
    136 
    137 Markdown uses asterisks and underscores to indicate spans of emphasis.
    138 
    139 Markdown:
    140 
    141     Some of these words *are emphasized*.
    142     Some of these words _are emphasized also_.
    143 
    144     Use two asterisks for **strong emphasis**.
    145     Or, if you prefer, __use two underscores instead__.
    146 
    147 Output:
    148 
    149     &lt;p&gt;Some of these words &lt;em&gt;are emphasized&lt;/em&gt;.
    150     Some of these words &lt;em&gt;are emphasized also&lt;/em&gt;.&lt;/p&gt;
    151 
    152     &lt;p&gt;Use two asterisks for &lt;strong&gt;strong emphasis&lt;/strong&gt;.
    153     Or, if you prefer, &lt;strong&gt;use two underscores instead&lt;/strong&gt;.&lt;/p&gt;
    154 
    155 
    156 
    157 ## Lists ##
    158 
    159 Unordered (bulleted) lists use asterisks, pluses, and hyphens (`*`,
    160 `+`, and `-`) as list markers. These three markers are
    161 interchangable; this:
    162 
    163     *   Candy.
    164     *   Gum.
    165     *   Booze.
    166 
    167 this:
    168 
    169     +   Candy.
    170     +   Gum.
    171     +   Booze.
    172 
    173 and this:
    174 
    175     -   Candy.
    176     -   Gum.
    177     -   Booze.
    178 
    179 all produce the same output:
    180 
    181     &lt;ul&gt;
    182     &lt;li&gt;Candy.&lt;/li&gt;
    183     &lt;li&gt;Gum.&lt;/li&gt;
    184     &lt;li&gt;Booze.&lt;/li&gt;
    185     &lt;/ul&gt;
    186 
    187 Ordered (numbered) lists use regular numbers, followed by periods, as
    188 list markers:
    189 
    190     1.  Red
    191     2.  Green
    192     3.  Blue
    193 
    194 Output:
    195 
    196     &lt;ol&gt;
    197     &lt;li&gt;Red&lt;/li&gt;
    198     &lt;li&gt;Green&lt;/li&gt;
    199     &lt;li&gt;Blue&lt;/li&gt;
    200     &lt;/ol&gt;
    201 
    202 If you put blank lines between items, you'll get `&lt;p&gt;` tags for the
    203 list item text. You can create multi-paragraph list items by indenting
    204 the paragraphs by 4 spaces or 1 tab:
    205 
    206     *   A list item.
    207 
    208         With multiple paragraphs.
    209 
    210     *   Another item in the list.
    211 
    212 Output:
    213 
    214     &lt;ul&gt;
    215     &lt;li&gt;&lt;p&gt;A list item.&lt;/p&gt;
    216     &lt;p&gt;With multiple paragraphs.&lt;/p&gt;&lt;/li&gt;
    217     &lt;li&gt;&lt;p&gt;Another item in the list.&lt;/p&gt;&lt;/li&gt;
    218     &lt;/ul&gt;
    219 
    220 
    221 
    222 ### Links ###
    223 
    224 Markdown supports two styles for creating links: *inline* and
    225 *reference*. With both styles, you use square brackets to delimit the
    226 text you want to turn into a link.
    227 
    228 Inline-style links use parentheses immediately after the link text.
    229 For example:
    230 
    231     This is an [example link](http://example.com/).
    232 
    233 Output:
    234 
    235     &lt;p&gt;This is an &lt;a href="http://example.com/"&gt;
    236     example link&lt;/a&gt;.&lt;/p&gt;
    237 
    238 Optionally, you may include a title attribute in the parentheses:
    239 
    240     This is an [example link](http://example.com/ "With a Title").
    241 
    242 Output:
    243 
    244     &lt;p&gt;This is an &lt;a href="http://example.com/" title="With a Title"&gt;
    245     example link&lt;/a&gt;.&lt;/p&gt;
    246 
    247 Reference-style links allow you to refer to your links by names, which
    248 you define elsewhere in your document:
    249 
    250     I get 10 times more traffic from [Google][1] than from
    251     [Yahoo][2] or [MSN][3].
    252 
    253     [1]: http://google.com/        "Google"
    254     [2]: http://search.yahoo.com/  "Yahoo Search"
    255     [3]: http://search.msn.com/    "MSN Search"
    256 
    257 Output:
    258 
    259     &lt;p&gt;I get 10 times more traffic from &lt;a href="http://google.com/"
    260     title="Google"&gt;Google&lt;/a&gt; than from &lt;a href="http://search.yahoo.com/"
    261     title="Yahoo Search"&gt;Yahoo&lt;/a&gt; or &lt;a href="http://search.msn.com/"
    262     title="MSN Search"&gt;MSN&lt;/a&gt;.&lt;/p&gt;
    263 
    264 The title attribute is optional. Link names may contain letters,
    265 numbers and spaces, but are *not* case sensitive:
    266 
    267     I start my morning with a cup of coffee and
    268     [The New York Times][NY Times].
    269 
    270     [ny times]: http://www.nytimes.com/
    271 
    272 Output:
    273 
    274     &lt;p&gt;I start my morning with a cup of coffee and
    275     &lt;a href="http://www.nytimes.com/"&gt;The New York Times&lt;/a&gt;.&lt;/p&gt;
    276 
    277 
    278 ### Images ###
    279 
    280 Image syntax is very much like link syntax.
    281 
    282 Inline (titles are optional):
    283 
    284     ![alt text](/path/to/img.jpg "Title")
    285 
    286 Reference-style:
    287 
    288     ![alt text][id]
    289 
    290     [id]: /path/to/img.jpg "Title"
    291 
    292 Both of the above examples produce the same output:
    293 
    294     &lt;img src="/path/to/img.jpg" alt="alt text" title="Title" /&gt;
    295 
    296 
    297 
    298 ### Code ###
    299 
    300 In a regular paragraph, you can create code span by wrapping text in
    301 backtick quotes. Any ampersands (`&amp;`) and angle brackets (`&lt;` or
    302 `&gt;`) will automatically be translated into HTML entities. This makes
    303 it easy to use Markdown to write about HTML example code:
    304 
    305     I strongly recommend against using any `&lt;blink&gt;` tags.
    306 
    307     I wish SmartyPants used named entities like `&amp;mdash;`
    308     instead of decimal-encoded entites like `&amp;#8212;`.
    309 
    310 Output:
    311 
    312     &lt;p&gt;I strongly recommend against using any
    313     &lt;code&gt;&amp;lt;blink&amp;gt;&lt;/code&gt; tags.&lt;/p&gt;
    314 
    315     &lt;p&gt;I wish SmartyPants used named entities like
    316     &lt;code&gt;&amp;amp;mdash;&lt;/code&gt; instead of decimal-encoded
    317     entites like &lt;code&gt;&amp;amp;#8212;&lt;/code&gt;.&lt;/p&gt;
    318 
    319 
    320 To specify an entire block of pre-formatted code, indent every line of
    321 the block by 4 spaces or 1 tab. Just like with code spans, `&amp;`, `&lt;`,
    322 and `&gt;` characters will be escaped automatically.
    323 
    324 Markdown:
    325 
    326     If you want your page to validate under XHTML 1.0 Strict,
    327     you've got to put paragraph tags in your blockquotes:
    328 
    329         &lt;blockquote&gt;
    330             &lt;p&gt;For example.&lt;/p&gt;
    331         &lt;/blockquote&gt;
    332 
    333 Output:
    334 
    335     &lt;p&gt;If you want your page to validate under XHTML 1.0 Strict,
    336     you've got to put paragraph tags in your blockquotes:&lt;/p&gt;
    337 
    338     &lt;pre&gt;&lt;code&gt;&amp;lt;blockquote&amp;gt;
    339         &amp;lt;p&amp;gt;For example.&amp;lt;/p&amp;gt;
    340     &amp;lt;/blockquote&amp;gt;
    341     &lt;/code&gt;&lt;/pre&gt;
    342 
    343 ## Fenced code blocks (and syntax highlighting)
    344 
    345 ```javascript
    346 for (var i = 0; i < items.length; i++) {
    347     console.log(items[i], i); // log them
    348 }
    349 ```
    350 
    351 </textarea></form>
    352 
    353     <script>
    354       var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
    355         mode: 'markdown',
    356         lineNumbers: true,
    357         theme: "default",
    358         extraKeys: {"Enter": "newlineAndIndentContinueMarkdownList"}
    359       });
    360     </script>
    361 
    362     <p>If you also want support <code>strikethrough</code>, <code>emoji</code> and few other goodies, check out <a href="../gfm/index.html">Github-Flavored Markdown mode</a>.</p>
    363 
    364     <p>Optionally depends on other modes for properly highlighted code blocks,
    365       and XML mode for properly highlighted inline XML blocks.</p>
    366 
    367     <p>Markdown mode supports these options:</p>
    368     <ul>
    369       <li>
    370         <d1>
    371           <dt><code>highlightFormatting: boolean</code></dt>
    372           <dd>Whether to separately highlight markdown meta characterts (<code>*[]()</code>etc.) (default: <code>false</code>).</dd>
    373         </d1>
    374       </li>
    375       <li>
    376         <d1>
    377           <dt><code>maxBlockquoteDepth: boolean</code></dt>
    378           <dd>Maximum allowed blockquote nesting (default: <code>0</code> - infinite nesting).</dd>
    379         </d1>
    380       </li>
    381       <li>
    382         <d1>
    383           <dt><code>xml: boolean</code></dt>
    384           <dd>Whether to highlight inline XML (default: <code>true</code>).</dd>
    385         </d1>
    386       </li>
    387       <li>
    388         <d1>
    389           <dt><code>fencedCodeBlockHighlighting: boolean</code></dt>
    390           <dd>Whether to syntax-highlight fenced code blocks, if given mode is included (default: <code>true</code>).</dd>
    391         </d1>
    392       </li>
    393       <li>
    394         <d1>
    395           <dt><code>tokenTypeOverrides: Object</code></dt>
    396           <dd>When you want ot override default token type names (e.g. <code>{code: "code"}</code>).</dd>
    397         </d1>
    398       </li>
    399       <li>
    400         <d1>
    401           <dt><code>allowAtxHeaderWithoutSpace: boolean</code></dt>
    402           <dd>Allow lazy headers without whitespace between hashtag and text (default: <code>false</code>).</dd>
    403         </d1>
    404       </li>
    405     </ul>
    406 
    407     <p><strong>MIME types defined:</strong> <code>text/x-markdown</code>.</p>
    408 
    409     <p><strong>Parsing/Highlighting Tests:</strong> <a href="../../test/index.html#markdown_*">normal</a>,  <a href="../../test/index.html#verbose,markdown_*">verbose</a>.</p>
    410 
    411   </article>