HTML language support for the CodeMirror code editor https://codemirror.net
  • TypeScript 100%
Find a file
2026-04-15 11:34:42 +02:00
src Update github links 2026-04-14 20:56:30 +02:00
test Fix restricting completed tag names to declared children 2023-04-28 16:45:45 +02:00
.gitignore Move to @codemirror/buildhelper 2021-03-09 17:47:10 +01:00
.npmignore Tell TypeScript to not go through dist to load the package itself 2020-12-29 16:52:02 +01:00
CHANGELOG.md Mark version 6.4.11 2025-10-02 10:18:50 +02:00
LICENSE Update maintainer email 2023-01-24 08:20:09 +01:00
package.json Update github links 2026-04-14 20:56:30 +02:00
README.md Update github links 2026-04-14 20:56:30 +02:00

@codemirror/lang-html NPM version

[ WEBSITE | ISSUES | FORUM | CHANGELOG ]

This package implements HTML 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 {html} from "@codemirror/lang-html"

const view = new EditorView({
  parent: document.body,
  doc: `<!doctype html>\n<title>HTML</title>`,
  extensions: [basicSetup, html()]
})

API Reference

html(config?: Object = {}) → LanguageSupport

Language support for HTML, including htmlCompletion and JavaScript and CSS support extensions.

config
matchClosingTags?: boolean

By default, the syntax tree will highlight mismatched closing tags. Set this to false to turn that off (for example when you expect to only be parsing a fragment of HTML text, not a full document).

selfClosingTags?: boolean

By default, the parser does not allow arbitrary self-closing tags. Set this to true to turn on support for /> self-closing tag syntax.

autoCloseTags?: boolean

Determines whether autoCloseTags is included in the support extensions. Defaults to true.

extraTags?: Record<string, TagSpec>

Add additional tags that can be completed.

extraGlobalAttributes?: Record<string, readonly string[] | null>

Add additional completable attributes to all tags.

nestedLanguages?: {tag: string, attrs?: fn(attrsObject<string>) → boolean, parser: Parser}[]

Register additional languages to parse the content of specific tags. If given, attrs should be a function that, given an object representing the tag's attributes, returns true if this language applies.

nestedAttributes?: {name: string, tagName?: string, parser: Parser}[]

Register additional languages to parse attribute values with.

htmlLanguage: LRLanguage

A language provider based on the Lezer HTML parser, extended with the JavaScript and CSS parsers to parse the content of <script> and <style> tags.

htmlCompletionSource(contextCompletionContext) → CompletionResult | null

HTML tag completion. Opens and closes tags and attributes in a context-aware way.

interface TagSpec

Type used to specify tags to complete.

attrs?: Record<string, readonly string[] | null>

Define tag-specific attributes. Property names are attribute names, and property values can be null to indicate free-form attributes, or a list of strings for suggested attribute values.

globalAttrs?: boolean

When set to false, don't complete global attributes on this tag.

children?: readonly string[]

Can be used to specify a list of child tags that are valid inside this tag. The default is to allow any tag.

htmlCompletionSourceWith(configObject) → fn(contextCompletionContext) → CompletionResult | null

Create a completion source for HTML extended with additional tags or attributes.

config
extraTags?: Record<string, TagSpec>

Define extra tag names to complete.

extraGlobalAttributes?: Record<string, readonly string[] | null>

Add global attributes that are available on all tags.

autoCloseTags: Extension

Extension that will automatically insert close tags when a > or / is typed.