@codemirror/lang-markdown is a language support package for CodeMirror 6 that provides syntax highlighting, parsing, and other language features for Markdown. It allows developers to integrate Markdown editing capabilities into their CodeMirror-based editors.

What are @codemirror/lang-markdown's main functionalities?

Syntax Highlighting

This feature provides syntax highlighting for Markdown content. The code sample demonstrates how to set up a CodeMirror editor with Markdown syntax highlighting.

import { markdown } from '@codemirror/lang-markdown';
import { EditorState } from '@codemirror/state';
import { EditorView, basicSetup } from 'codemirror';

const state = EditorState.create({
  doc: '# Hello, Markdown!',
  extensions: [basicSetup, markdown()]
});

const view = new EditorView({
  state,
  parent: document.body
});

Markdown Parsing

This feature allows for parsing Markdown content within the editor. The code sample shows how to set up the editor and access the parsed Markdown document.

import { markdown } from '@codemirror/lang-markdown';
import { EditorState } from '@codemirror/state';
import { EditorView, basicSetup } from 'codemirror';

const state = EditorState.create({
  doc: '# Hello, Markdown!',
  extensions: [basicSetup, markdown()]
});

const view = new EditorView({
  state,
  parent: document.body
});

// Accessing the parsed Markdown document
const parsedDoc = state.doc.toString();
console.log(parsedDoc);

Custom Markdown Extensions

This feature allows for the creation of custom Markdown extensions. The code sample demonstrates how to configure and use a custom Markdown language extension in the CodeMirror editor.

import { markdown, markdownLanguage } from '@codemirror/lang-markdown';
import { EditorState } from '@codemirror/state';
import { EditorView, basicSetup } from 'codemirror';
import { LRLanguage, LanguageSupport } from '@codemirror/language';

const customMarkdown = markdownLanguage.configure({
  defineNodes: [{ name: 'CustomNode', style: 'custom-style' }],
  parseInline: [{ name: 'CustomInline', style: 'custom-inline-style' }]
});

const state = EditorState.create({
  doc: '# Hello, Custom Markdown!',
  extensions: [basicSetup, markdown({ base: customMarkdown })]
});

const view = new EditorView({
  state,
  parent: document.body
});

Other packages similar to @codemirror/lang-markdown

Changelog

Source

6.2.5 (2024-04-12)

Bug fixes

Disable folding for list nodes (since it will shadow the folding on the first list item).

Readme

Source

@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.

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.

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.

Keywords

FAQs

What is @codemirror/lang-markdown?

Is @codemirror/lang-markdown popular?

Is @codemirror/lang-markdown well maintained?

Last updated on 12 Apr 2024

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install