@codemirror/lang-html
Advanced tools
@codemirror/lang-html is a language support package for CodeMirror 6 that provides syntax highlighting, code folding, and other editing features for HTML. It is part of the CodeMirror 6 ecosystem, which is a versatile text editor implemented in JavaScript for the browser.
Syntax Highlighting
This code sets up a CodeMirror editor with HTML syntax highlighting. The `html` function from `@codemirror/lang-html` is used to provide the necessary language support.
import { html } from '@codemirror/lang-html';
import { EditorState } from '@codemirror/state';
import { EditorView, basicSetup } from '@codemirror/basic-setup';
const state = EditorState.create({
doc: '<!DOCTYPE html>\n<html>\n <head>\n <title>My HTML</title>\n </head>\n <body>\n <h1>Hello, world!</h1>\n </body>\n</html>',
extensions: [basicSetup, html()]
});
const view = new EditorView({
state,
parent: document.body
});Code Folding
This code sets up a CodeMirror editor with HTML syntax highlighting and code folding. The `foldGutter` extension is used to add foldable regions to the editor.
import { html } from '@codemirror/lang-html';
import { foldGutter } from '@codemirror/fold';
import { EditorState } from '@codemirror/state';
import { EditorView, basicSetup } from '@codemirror/basic-setup';
const state = EditorState.create({
doc: '<!DOCTYPE html>\n<html>\n <head>\n <title>My HTML</title>\n </head>\n <body>\n <h1>Hello, world!</h1>\n </body>\n</html>',
extensions: [basicSetup, html(), foldGutter()]
});
const view = new EditorView({
state,
parent: document.body
});Linting
This code sets up a CodeMirror editor with HTML syntax highlighting and linting. The `linter` and `lintGutter` extensions are used to add linting support to the editor.
import { html } from '@codemirror/lang-html';
import { linter, lintGutter } from '@codemirror/lint';
import { EditorState } from '@codemirror/state';
import { EditorView, basicSetup } from '@codemirror/basic-setup';
const state = EditorState.create({
doc: '<!DOCTYPE html>\n<html>\n <head>\n <title>My HTML</title>\n </head>\n <body>\n <h1>Hello, world!</h1>\n </body>\n</html>',
extensions: [basicSetup, html(), lintGutter(), linter((view) => [])]
});
const view = new EditorView({
state,
parent: document.body
});Ace is a standalone code editor written in JavaScript. It provides syntax highlighting, code folding, and other features for HTML and many other languages. Compared to @codemirror/lang-html, Ace is a more monolithic solution, whereas CodeMirror 6 is modular and allows for more customization.
Monaco Editor is the code editor that powers VS Code. It provides rich language support for HTML, including syntax highlighting, code folding, and more. Monaco Editor is more feature-rich and integrated with the VS Code ecosystem, while @codemirror/lang-html is part of the more lightweight and modular CodeMirror 6.
Prism is a lightweight, extensible syntax highlighter. It supports HTML and many other languages. Unlike @codemirror/lang-html, Prism is focused solely on syntax highlighting and does not provide other editor features like code folding or linting.
[ 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.
html(config?: {selfClosingTags?: boolean} = {}) → LanguageSupportLanguage support for HTML, including
htmlCompletion and JavaScript and
CSS support extensions.
configBy 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).
Determines whether autoCloseTags
is included in the support extensions. Defaults to true.
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(attrs: Object<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: LRLanguageA 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(context: CompletionContext) → CompletionResult | nullHTML tag completion. Opens and closes tags and attributes in a context-aware way.
Type used to specify tags to complete.
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.
When set to false, don't complete global attributes on this tag.
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) → fn(context: CompletionContext) → CompletionResult | nullCreate a completion source for HTML extended with additional tags or attributes.
Extension that will automatically insert close tags when a > or
/ is typed.
6.4.9 (2024-04-12)
Fix a bug in autoCloseTags that made tags not close when typing > after an attribute.
FAQs
HTML language support for the CodeMirror code editor
We found that @codemirror/lang-html demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 2 open source maintainers collaborating on the project.
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.
Security News
In this segment of the Risky Business podcast, Feross Aboukhadijeh and Patrick Gray discuss the challenges of tracking malware discovered in open source softare.
Research
Security News
A threat actor's playbook for exploiting the npm ecosystem was exposed on the dark web, detailing how to build a blockchain-powered botnet.
Security News
NVD’s backlog surpasses 20,000 CVEs as analysis slows and NIST announces new system updates to address ongoing delays.