# @codemirror/lang-html [![NPM version](https://img.shields.io/npm/v/@codemirror/lang-html.svg)](https://www.npmjs.org/package/@codemirror/lang-html) [ [**WEBSITE**](https://codemirror.net/) | [**ISSUES**](https://github.com/codemirror/dev/issues) | [**FORUM**](https://discuss.codemirror.net/c/next/) | [**CHANGELOG**](https://github.com/codemirror/lang-html/blob/main/CHANGELOG.md) ] This package implements HTML language support for the [CodeMirror](https://codemirror.net/) code editor. The [project page](https://codemirror.net/) has more information, a number of [examples](https://codemirror.net/examples/) and the [documentation](https://codemirror.net/docs/). This code is released under an [MIT license](https://github.com/codemirror/lang-html/tree/main/LICENSE). We aim to be an inclusive, welcoming community. To make that explicit, we have a [code of conduct](http://contributor-covenant.org/version/1/1/0/) that applies to communication around the project. ## Usage ```javascript import {EditorView, basicSetup} from "codemirror" import {html} from "@codemirror/lang-html" const view = new EditorView({ parent: document.body, doc: `\nHTML`, 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.