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