scripts/CodeMirror/mode/markdown/index.html (view raw)
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"><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/codemirror">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">
36Markdown: 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
48Getting the Gist of Markdown's Formatting Syntax
49------------------------------------------------
50
51This page offers a brief overview of what it's like to use Markdown.
52The [syntax page] [s] provides complete, detailed documentation for
53every feature, but Markdown should be very easy to pick up simply by
54looking at a few examples of it in action. The examples on this page
55are written in a before/after style, showing example syntax and the
56HTML output produced by Markdown.
57
58It's also helpful to simply try Markdown out; the [Dingus] [d] is a
59web application that allows you type your own Markdown-formatted text
60and translate it to XHTML.
61
62**Note:** This document is itself written using Markdown; you
63can [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
72A paragraph is simply one or more consecutive lines of text, separated
73by one or more blank lines. (A blank line is any line that looks like
74a blank line -- a line containing nothing but spaces or tabs is
75considered blank.) Normal paragraphs should not be indented with
76spaces or tabs.
77
78Markdown offers two styles of headers: *Setext* and *atx*.
79Setext-style headers for `<h1>` and `<h2>` are created by
80"underlining" with equal signs (`=`) and hyphens (`-`), respectively.
81To create an atx-style header, you put 1-6 hash marks (`#`) at the
82beginning of the line -- the number of hashes equals the resulting
83HTML header level.
84
85Blockquotes are indicated using email-style '`>`' angle brackets.
86
87Markdown:
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
111Output:
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
138Markdown uses asterisks and underscores to indicate spans of emphasis.
139
140Markdown:
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
148Output:
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
160Unordered (bulleted) lists use asterisks, pluses, and hyphens (`*`,
161`+`, and `-`) as list markers. These three markers are
162interchangable; this:
163
164 * Candy.
165 * Gum.
166 * Booze.
167
168this:
169
170 + Candy.
171 + Gum.
172 + Booze.
173
174and this:
175
176 - Candy.
177 - Gum.
178 - Booze.
179
180all produce the same output:
181
182 <ul>
183 <li>Candy.</li>
184 <li>Gum.</li>
185 <li>Booze.</li>
186 </ul>
187
188Ordered (numbered) lists use regular numbers, followed by periods, as
189list markers:
190
191 1. Red
192 2. Green
193 3. Blue
194
195Output:
196
197 <ol>
198 <li>Red</li>
199 <li>Green</li>
200 <li>Blue</li>
201 </ol>
202
203If you put blank lines between items, you'll get `<p>` tags for the
204list item text. You can create multi-paragraph list items by indenting
205the 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
213Output:
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
225Markdown supports two styles for creating links: *inline* and
226*reference*. With both styles, you use square brackets to delimit the
227text you want to turn into a link.
228
229Inline-style links use parentheses immediately after the link text.
230For example:
231
232 This is an [example link](http://example.com/).
233
234Output:
235
236 <p>This is an <a href="http://example.com/">
237 example link</a>.</p>
238
239Optionally, you may include a title attribute in the parentheses:
240
241 This is an [example link](http://example.com/ "With a Title").
242
243Output:
244
245 <p>This is an <a href="http://example.com/" title="With a Title">
246 example link</a>.</p>
247
248Reference-style links allow you to refer to your links by names, which
249you 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
258Output:
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
265The title attribute is optional. Link names may contain letters,
266numbers 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
273Output:
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
281Image syntax is very much like link syntax.
282
283Inline (titles are optional):
284
285 
286
287Reference-style:
288
289 ![alt text][id]
290
291 [id]: /path/to/img.jpg "Title"
292
293Both 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
301In a regular paragraph, you can create code span by wrapping text in
302backtick quotes. Any ampersands (`&`) and angle brackets (`<` or
303`>`) will automatically be translated into HTML entities. This makes
304it 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 entites like `&#8212;`.
310
311Output:
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 entites like <code>&amp;#8212;</code>.</p>
319
320
321To specify an entire block of pre-formatted code, indent every line of
322the block by 4 spaces or 1 tab. Just like with code spans, `&`, `<`,
323and `>` characters will be escaped automatically.
324
325Markdown:
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
334Output:
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
347for (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 characterts (<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>