File modules/editor/codemirror/mode/markdown/index.html

Last commit: Sun Dec 17 01:14:09 2017 +0100	Jan Dankert	Integration eines weiteren Code-Editors: Codemirror. Demnächst müssen wir hier mal aufräumen und andere Editoren rauswerfen.


     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>



Download modules/editor/codemirror/mode/markdown/index.html


History
Sun, 17 Dec 2017 01:14:09 +0100	Jan Dankert	Integration eines weiteren Code-Editors: Codemirror. Demnächst müssen wir hier mal aufräumen und andere Editoren rauswerfen.