# @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: `<!doctype html>\n<title>HTML</title>`,
  extensions: [basicSetup, html()]
})
```

## API Reference

  html(config⁠?: Object (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object) = {}) → LanguageSupport (https://codemirror.net/docs/ref#language.LanguageSupport)

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

  config

  matchClosingTags⁠?: boolean (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/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 (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/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 (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean)

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

  extraTags⁠?: Record (https://www.typescriptlang.org/docs/handbook/utility-types.html#recordkeystype)<string (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String), TagSpec>

Add additional tags that can be completed.

  extraGlobalAttributes⁠?: Record (https://www.typescriptlang.org/docs/handbook/utility-types.html#recordkeystype)<string (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String), readonly string (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)[] | null (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/null)>

Add additional completable attributes to all tags.

  nestedLanguages⁠?: {tag: string (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String), attrs⁠?: fn(attrs: Object (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object)<string (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)>) → boolean (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean), parser: Parser (https://lezer.codemirror.net/docs/ref/#common.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 (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String), tagName⁠?: string (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String), parser: Parser (https://lezer.codemirror.net/docs/ref/#common.Parser)}[]

Register additional languages to parse attribute values with.

  htmlLanguage: LRLanguage (https://codemirror.net/docs/ref#language.LRLanguage)

A language provider based on the Lezer HTML
parser (https://github.com/lezer-parser/html), extended with the
JavaScript and CSS parsers to parse the content of <script> and
<style> tags.

  htmlCompletionSource(context: CompletionContext (https://codemirror.net/docs/ref#autocomplete.CompletionContext)) → CompletionResult (https://codemirror.net/docs/ref#autocomplete.CompletionResult) | null (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/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 (https://www.typescriptlang.org/docs/handbook/utility-types.html#recordkeystype)<string (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String), readonly string (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)[] | null (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/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 (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean)

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

  children⁠?: readonly string (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/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(config: Object (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object)) → fn(context: CompletionContext (https://codemirror.net/docs/ref#autocomplete.CompletionContext)) → CompletionResult (https://codemirror.net/docs/ref#autocomplete.CompletionResult) | null (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/null)

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

  config

  extraTags⁠?: Record (https://www.typescriptlang.org/docs/handbook/utility-types.html#recordkeystype)<string (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String), TagSpec>

Define extra tag names to complete.

  extraGlobalAttributes⁠?: Record (https://www.typescriptlang.org/docs/handbook/utility-types.html#recordkeystype)<string (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String), readonly string (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)[] | null (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/null)>

Add global attributes that are available on all tags.

  autoCloseTags: Extension (https://codemirror.net/docs/ref#state.Extension)

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

