Mercurial
comparison .cms/lib/codemirror/mode/markdown/index.html @ 0:78edf6b517a0 draft
24.10
author | Coffee CMS <info@coffee-cms.ru> |
---|---|
date | Fri, 11 Oct 2024 22:40:23 +0000 |
parents | |
children |
comparison
equal
deleted
inserted
replaced
-1:000000000000 | 0:78edf6b517a0 |
---|---|
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 ![alt text](/path/to/img.jpg "Title") | |
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> |