@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?: Object = {}) → 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.
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.
htmlCompletion: ExtensionHTML tag completion. Opens and closes tags and attributes in a context-aware way.
Extension that will automatically insert close tags when a > or
/ is typed.
0.19.3 (2021-09-23)
The package now exports a completion source function, rather than a prebuilt completion extension.
Use more specific highlighting tags for attribute names and values.
FAQs
HTML language support for the CodeMirror code editor
The npm package @codemirror/lang-html receives a total of 390,530 weekly downloads. As such, @codemirror/lang-html popularity was classified as popular.
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.