github.com/jancarloviray/community@v0.41.1-0.20170124221257-33a66c87cf2f/app/public/codemirror/mode/markdown/index.html (about) 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 <ul id="ProjectSubmenu"> 39 <li><a href="/projects/markdown/" title="Markdown Project Page">Main</a></li> 40 <li><a class="selected" title="Markdown Basics">Basics</a></li> 41 <li><a href="/projects/markdown/syntax" title="Markdown Syntax Documentation">Syntax</a></li> 42 <li><a href="/projects/markdown/license" title="Pricing and License Information">License</a></li> 43 <li><a href="/projects/markdown/dingus" title="Online Markdown Web Form">Dingus</a></li> 44 </ul> 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 `<h1>` and `<h2>` 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 '`>`' 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 > This is a blockquote. 104 > 105 > This is the second paragraph in the blockquote. 106 > 107 > ## This is an H2 in a blockquote 108 109 110 Output: 111 112 <h1>A First Level Header</h1> 113 114 <h2>A Second Level Header</h2> 115 116 <p>Now is the time for all good men to come to 117 the aid of their country. This is just a 118 regular paragraph.</p> 119 120 <p>The quick brown fox jumped over the lazy 121 dog's back.</p> 122 123 <h3>Header 3</h3> 124 125 <blockquote> 126 <p>This is a blockquote.</p> 127 128 <p>This is the second paragraph in the blockquote.</p> 129 130 <h2>This is an H2 in a blockquote</h2> 131 </blockquote> 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 <p>Some of these words <em>are emphasized</em>. 150 Some of these words <em>are emphasized also</em>.</p> 151 152 <p>Use two asterisks for <strong>strong emphasis</strong>. 153 Or, if you prefer, <strong>use two underscores instead</strong>.</p> 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 <ul> 182 <li>Candy.</li> 183 <li>Gum.</li> 184 <li>Booze.</li> 185 </ul> 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 <ol> 197 <li>Red</li> 198 <li>Green</li> 199 <li>Blue</li> 200 </ol> 201 202 If you put blank lines between items, you'll get `<p>` 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 <ul> 215 <li><p>A list item.</p> 216 <p>With multiple paragraphs.</p></li> 217 <li><p>Another item in the list.</p></li> 218 </ul> 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 <p>This is an <a href="http://example.com/"> 236 example link</a>.</p> 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 <p>This is an <a href="http://example.com/" title="With a Title"> 245 example link</a>.</p> 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 <p>I get 10 times more traffic from <a href="http://google.com/" 260 title="Google">Google</a> than from <a href="http://search.yahoo.com/" 261 title="Yahoo Search">Yahoo</a> or <a href="http://search.msn.com/" 262 title="MSN Search">MSN</a>.</p> 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 <p>I start my morning with a cup of coffee and 275 <a href="http://www.nytimes.com/">The New York Times</a>.</p> 276 277 278 ### Images ### 279 280 Image syntax is very much like link syntax. 281 282 Inline (titles are optional): 283 284  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 <img src="/path/to/img.jpg" alt="alt text" title="Title" /> 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 (`&`) and angle brackets (`<` or 302 `>`) 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 `<blink>` tags. 306 307 I wish SmartyPants used named entities like `&mdash;` 308 instead of decimal-encoded entites like `&#8212;`. 309 310 Output: 311 312 <p>I strongly recommend against using any 313 <code>&lt;blink&gt;</code> tags.</p> 314 315 <p>I wish SmartyPants used named entities like 316 <code>&amp;mdash;</code> instead of decimal-encoded 317 entites like <code>&amp;#8212;</code>.</p> 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, `&`, `<`, 322 and `>` 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 <blockquote> 330 <p>For example.</p> 331 </blockquote> 332 333 Output: 334 335 <p>If you want your page to validate under XHTML 1.0 Strict, 336 you've got to put paragraph tags in your blockquotes:</p> 337 338 <pre><code>&lt;blockquote&gt; 339 &lt;p&gt;For example.&lt;/p&gt; 340 &lt;/blockquote&gt; 341 </code></pre> 342 </textarea></form> 343 344 <script> 345 var editor = CodeMirror.fromTextArea(document.getElementById("code"), { 346 mode: 'markdown', 347 lineNumbers: true, 348 theme: "default", 349 extraKeys: {"Enter": "newlineAndIndentContinueMarkdownList"} 350 }); 351 </script> 352 353 <p>You might want to use the <a href="../gfm/index.html">Github-Flavored Markdown mode</a> instead, which adds support for fenced code blocks and a few other things.</p> 354 355 <p>Optionally depends on the XML mode for properly highlighted inline XML blocks.</p> 356 357 <p><strong>MIME types defined:</strong> <code>text/x-markdown</code>.</p> 358 359 <p><strong>Parsing/Highlighting Tests:</strong> <a href="../../test/index.html#markdown_*">normal</a>, <a href="../../test/index.html#verbose,markdown_*">verbose</a>.</p> 360 361 </article>