@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.
6.1.2 (2022-09-27)
Make tag auto-closing consume > characters after the cursor.
FAQs
HTML language support for the CodeMirror code editor
The npm package @codemirror/lang-html receives a total of 527,189 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.
Research
Security News
The Socket Research Team has discovered six new malicious npm packages linked to North Korea’s Lazarus Group, designed to steal credentials and deploy backdoors.
Security News
Socket CEO Feross Aboukhadijeh discusses the open web, open source security, and how Socket tackles software supply chain attacks on The Pair Program podcast.
Security News
Opengrep continues building momentum with the alpha release of its Playground tool, demonstrating the project's rapid evolution just two months after its initial launch.