Diffdown is a real-time collaborative Markdown editor/previewer built on the AT Protocol
diffdown.com
1<!-- NOTE: README.md is generated from src/README.md -->
2
3# @codemirror/lang-markdown [](https://www.npmjs.org/package/@codemirror/lang-markdown)
4
5[ [**WEBSITE**](https://codemirror.net/) | [**ISSUES**](https://github.com/codemirror/dev/issues) | [**FORUM**](https://discuss.codemirror.net/c/next/) | [**CHANGELOG**](https://github.com/codemirror/lang-markdown/blob/main/CHANGELOG.md) ]
6
7This package implements Markdown language support for the
8[CodeMirror](https://codemirror.net/) code editor.
9
10The [project page](https://codemirror.net/) has more information, a
11number of [examples](https://codemirror.net/examples/) and the
12[documentation](https://codemirror.net/docs/).
13
14This code is released under an
15[MIT license](https://github.com/codemirror/lang-markdown/tree/main/LICENSE).
16
17We aim to be an inclusive, welcoming community. To make that explicit,
18we have a [code of
19conduct](http://contributor-covenant.org/version/1/1/0/) that applies
20to communication around the project.
21
22## Usage
23
24```javascript
25import {EditorView, basicSetup} from "codemirror"
26import {markdown} from "@codemirror/lang-markdown"
27
28const view = new EditorView({
29 parent: document.body,
30 doc: `*CodeMirror* Markdown \`mode\``,
31 extensions: [basicSetup, markdown()]
32})
33```
34
35## API Reference
36
37<dl>
38<dt id="user-content-markdown">
39 <code><strong><a href="#user-content-markdown">markdown</a></strong>(<a id="user-content-markdown^config" href="#user-content-markdown^config">config</a>⁠?: <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a> = {}) → <a href="https://codemirror.net/docs/ref#language.LanguageSupport">LanguageSupport</a></code></dt>
40
41<dd><p>Markdown language support.</p>
42<dl><dt id="user-content-markdown^config">
43 <code><strong><a href="#user-content-markdown^config">config</a></strong></code></dt>
44
45<dd><dl><dt id="user-content-markdown^config.defaultcodelanguage">
46 <code><strong><a href="#user-content-markdown^config.defaultcodelanguage">defaultCodeLanguage</a></strong>⁠?: <a href="https://codemirror.net/docs/ref#language.Language">Language</a> | <a href="https://codemirror.net/docs/ref#language.LanguageSupport">LanguageSupport</a></code></dt>
47
48<dd><p>When given, this language will be used by default to parse code
49blocks.</p>
50</dd><dt id="user-content-markdown^config.codelanguages">
51 <code><strong><a href="#user-content-markdown^config.codelanguages">codeLanguages</a></strong>⁠?: readonly <a href="https://codemirror.net/docs/ref#language.LanguageDescription">LanguageDescription</a>[] | fn(<a id="user-content-markdown^config.codelanguages^info" href="#user-content-markdown^config.codelanguages^info">info</a>: <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String">string</a>) → <a href="https://codemirror.net/docs/ref#language.Language">Language</a> | <a href="https://codemirror.net/docs/ref#language.LanguageDescription">LanguageDescription</a> | <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/null">null</a></code></dt>
52
53<dd><p>A source of language support for highlighting fenced code
54blocks. When it is an array, the parser will use
55<a href="https://codemirror.net/docs/ref/#language.LanguageDescription%5EmatchLanguageName"><code>LanguageDescription.matchLanguageName</code></a>
56with the fenced code info to find a matching language. When it
57is a function, will be called with the info string and may
58return a language or <code>LanguageDescription</code> object.</p>
59</dd><dt id="user-content-markdown^config.addkeymap">
60 <code><strong><a href="#user-content-markdown^config.addkeymap">addKeymap</a></strong>⁠?: <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean">boolean</a></code></dt>
61
62<dd><p>Set this to false to disable installation of the Markdown
63<a href="#user-content-markdownkeymap">keymap</a>.</p>
64</dd><dt id="user-content-markdown^config.extensions">
65 <code><strong><a href="#user-content-markdown^config.extensions">extensions</a></strong>⁠?: <a href="https://github.com/lezer-parser/markdown#user-content-markdownextension">MarkdownExtension</a></code></dt>
66
67<dd><p>Markdown parser
68<a href="https://github.com/lezer-parser/markdown#user-content-markdownextension">extensions</a>
69to add to the parser.</p>
70</dd><dt id="user-content-markdown^config.base">
71 <code><strong><a href="#user-content-markdown^config.base">base</a></strong>⁠?: <a href="https://codemirror.net/docs/ref#language.Language">Language</a></code></dt>
72
73<dd><p>The base language to use. Defaults to
74<a href="#user-content-commonmarklanguage"><code>commonmarkLanguage</code></a>.</p>
75</dd><dt id="user-content-markdown^config.completehtmltags">
76 <code><strong><a href="#user-content-markdown^config.completehtmltags">completeHTMLTags</a></strong>⁠?: <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean">boolean</a></code></dt>
77
78<dd><p>By default, the extension installs an autocompletion source that
79completes HTML tags when a <code><</code> is typed. Set this to false to
80disable this.</p>
81</dd><dt id="user-content-markdown^config.pasteurlaslink">
82 <code><strong><a href="#user-content-markdown^config.pasteurlaslink">pasteURLAsLink</a></strong>⁠?: <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean">boolean</a></code></dt>
83
84<dd><p>The returned language contains
85<a href="#user-content-pasteurlaslink"><code>pasteURLAsLink</code></a> as a support
86extension unless you set this to false.</p>
87</dd><dt id="user-content-markdown^config.htmltaglanguage">
88 <code><strong><a href="#user-content-markdown^config.htmltaglanguage">htmlTagLanguage</a></strong>⁠?: <a href="https://codemirror.net/docs/ref#language.LanguageSupport">LanguageSupport</a></code></dt>
89
90<dd><p>By default, HTML tags in the document are handled by the <a href="https://github.com/codemirror/lang-html">HTML
91language</a> package with
92tag matching turned off. You can pass in an alternative language
93configuration here if you want.</p>
94</dd></dl></dd></dl></dd>
95<dt id="user-content-markdownlanguage">
96 <code><strong><a href="#user-content-markdownlanguage">markdownLanguage</a></strong>: <a href="https://codemirror.net/docs/ref#language.Language">Language</a></code></dt>
97
98<dd><p>Language support for <a href="https://github.github.com/gfm/">GFM</a> plus
99subscript, superscript, and emoji syntax.</p>
100</dd>
101<dt id="user-content-commonmarklanguage">
102 <code><strong><a href="#user-content-commonmarklanguage">commonmarkLanguage</a></strong>: <a href="https://codemirror.net/docs/ref#language.Language">Language</a></code></dt>
103
104<dd><p>Language support for strict CommonMark.</p>
105</dd>
106<dt id="user-content-insertnewlinecontinuemarkup">
107 <code><strong><a href="#user-content-insertnewlinecontinuemarkup">insertNewlineContinueMarkup</a></strong>: <a href="https://codemirror.net/docs/ref#state.StateCommand">StateCommand</a></code></dt>
108
109<dd><p>This command, when invoked in Markdown context with cursor
110selection(s), will create a new line with the markup for
111blockquotes and lists that were active on the old line. If the
112cursor was directly after the end of the markup for the old line,
113trailing whitespace and list markers are removed from that line.</p>
114<p>The command does nothing in non-Markdown context, so it should
115not be used as the only binding for Enter (even in a Markdown
116document, HTML and code regions might use a different language).</p>
117</dd>
118<dt id="user-content-insertnewlinecontinuemarkupcommand">
119 <code><strong><a href="#user-content-insertnewlinecontinuemarkupcommand">insertNewlineContinueMarkupCommand</a></strong>(<a id="user-content-insertnewlinecontinuemarkupcommand^config" href="#user-content-insertnewlinecontinuemarkupcommand^config">config</a>⁠?: <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a> = {}) → <a href="https://codemirror.net/docs/ref#state.StateCommand">StateCommand</a></code></dt>
120
121<dd><p>Returns a command like
122<a href="#user-content-insertnewlinecontinuemarkup"><code>insertNewlineContinueMarkup</code></a>,
123allowing further configuration.</p>
124<dl><dt id="user-content-insertnewlinecontinuemarkupcommand^config">
125 <code><strong><a href="#user-content-insertnewlinecontinuemarkupcommand^config">config</a></strong></code></dt>
126
127<dd><dl><dt id="user-content-insertnewlinecontinuemarkupcommand^config.nontightlists">
128 <code><strong><a href="#user-content-insertnewlinecontinuemarkupcommand^config.nontightlists">nonTightLists</a></strong>⁠?: <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean">boolean</a></code></dt>
129
130<dd><p>By default, when pressing enter in a blank second item in a
131tight (no blank lines between items) list, the command will
132insert a blank line above that item, starting a non-tight list.
133Set this to false to disable this behavior.</p>
134</dd></dl></dd></dl></dd>
135<dt id="user-content-deletemarkupbackward">
136 <code><strong><a href="#user-content-deletemarkupbackward">deleteMarkupBackward</a></strong>: <a href="https://codemirror.net/docs/ref#state.StateCommand">StateCommand</a></code></dt>
137
138<dd><p>This command will, when invoked in a Markdown context with the
139cursor directly after list or blockquote markup, delete one level
140of markup. When the markup is for a list, it will be replaced by
141spaces on the first invocation (a further invocation will delete
142the spaces), to make it easy to continue a list.</p>
143<p>When not after Markdown block markup, this command will return
144false, so it is intended to be bound alongside other deletion
145commands, with a higher precedence than the more generic commands.</p>
146</dd>
147<dt id="user-content-markdownkeymap">
148 <code><strong><a href="#user-content-markdownkeymap">markdownKeymap</a></strong>: readonly <a href="https://codemirror.net/docs/ref#view.KeyBinding">KeyBinding</a>[]</code></dt>
149
150<dd><p>A small keymap with Markdown-specific bindings. Binds Enter to
151<a href="#user-content-insertnewlinecontinuemarkup"><code>insertNewlineContinueMarkup</code></a>
152and Backspace to
153<a href="#user-content-deletemarkupbackward"><code>deleteMarkupBackward</code></a>.</p>
154</dd>
155<dt id="user-content-pasteurlaslink">
156 <code><strong><a href="#user-content-pasteurlaslink">pasteURLAsLink</a></strong>: <a href="https://codemirror.net/docs/ref#state.Extension">Extension</a></code></dt>
157
158<dd><p>An extension that intercepts pastes when the pasted content looks
159like a URL and the selection is non-empty and selects regular
160text, making the selection a link with the pasted URL as target.</p>
161</dd>
162</dl>