@codemirror/lang-markdown

@codemirror/lang-markdown

[ WEBSITE | ISSUES | FORUM | CHANGELOG ]

This package implements Markdown language support for the CodeMirror code editor.

The project page has more information, a number of examples and the documentation.

This code is released under an MIT license.

We aim to be an inclusive, welcoming community. To make that explicit, we have a code of conduct that applies to communication around the project.

Usage

import {EditorView, basicSetup} from "codemirror"
import {markdown} from "@codemirror/lang-markdown"

const view = new EditorView({
  parent: document.body,
  doc: `*CodeMirror* Markdown \`mode\``,
  extensions: [basicSetup, markdown()]
})

API Reference

markdown(config⁠?: Object = {}) → LanguageSupport

Markdown language support.

config

defaultCodeLanguage⁠?: Language | LanguageSupport

When given, this language will be used by default to parse code blocks.

codeLanguages⁠?: readonly LanguageDescription[] | fn(info: string) → Language | LanguageDescription | null

A source of language support for highlighting fenced code blocks. When it is an array, the parser will use LanguageDescription.matchLanguageName with the fenced code info to find a matching language. When it is a function, will be called with the info string and may return a language or LanguageDescription object.

addKeymap⁠?: boolean

Set this to false to disable installation of the Markdown keymap.

extensions⁠?: MarkdownExtension

Markdown parser extensions to add to the parser.

base⁠?: Language

The base language to use. Defaults to commonmarkLanguage.

completeHTMLTags⁠?: boolean

By default, the extension installs an autocompletion source that completes HTML tags when a < is typed. Set this to false to disable this.

pasteURLAsLink⁠?: boolean

The returned language contains pasteURLAsLink as a support extension unless you set this to false.

htmlTagLanguage⁠?: LanguageSupport

By default, HTML tags in the document are handled by the HTML language package with tag matching turned off. You can pass in an alternative language configuration here if you want.

markdownLanguage: Language

Language support for GFM plus subscript, superscript, and emoji syntax.

commonmarkLanguage: Language

Language support for strict CommonMark.

insertNewlineContinueMarkup: StateCommand

This command, when invoked in Markdown context with cursor selection(s), will create a new line with the markup for blockquotes and lists that were active on the old line. If the cursor was directly after the end of the markup for the old line, trailing whitespace and list markers are removed from that line.

The command does nothing in non-Markdown context, so it should not be used as the only binding for Enter (even in a Markdown document, HTML and code regions might use a different language).

deleteMarkupBackward: StateCommand

This command will, when invoked in a Markdown context with the cursor directly after list or blockquote markup, delete one level of markup. When the markup is for a list, it will be replaced by spaces on the first invocation (a further invocation will delete the spaces), to make it easy to continue a list.

When not after Markdown block markup, this command will return false, so it is intended to be bound alongside other deletion commands, with a higher precedence than the more generic commands.

markdownKeymap: readonly KeyBinding[]

A small keymap with Markdown-specific bindings. Binds Enter to insertNewlineContinueMarkup and Backspace to deleteMarkupBackward.

pasteURLAsLink: Extension

An extension that intercepts pastes when the pasted content looks like a URL and the selection is non-empty and selects regular text, making the selection a link with the pasted URL as target.

Similar packages

Other packages similar to @codemirror/lang-markdown

markdown-it

markdown-it is a Markdown parser that offers fast and extensible parsing capabilities. Unlike @codemirror/lang-markdown, which is integrated into the CodeMirror editor, markdown-it is a standalone parser that can be used in various environments. It provides a plugin system for extending Markdown syntax.

remark

remark is a Markdown processor built on the unified framework. It provides a powerful plugin system for transforming and analyzing Markdown content. While @codemirror/lang-markdown focuses on integrating Markdown support into CodeMirror, remark is more versatile and can be used for a wide range of Markdown processing tasks.

showdown

showdown is a JavaScript Markdown to HTML converter. It is designed to be simple and easy to use, making it a good choice for converting Markdown content to HTML. Unlike @codemirror/lang-markdown, showdown does not provide editor integration but focuses on the conversion process.