Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →

@codemirror/lang-html

Package Overview

Dependencies

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

@codemirror/lang-html

HTML language support for the CodeMirror code editor

6.1.2
Source
npm

Version published: 2 years ago

Weekly downloads: 467K; increased by0.6%

Maintainers: 2

Weekly downloads

Created: 4 years ago

What is @codemirror/lang-html?

@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.

What are @codemirror/lang-html's main functionalities?

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
});

Other packages similar to @codemirror/lang-html

@codemirror/lang-html

[ 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.

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).
autoCloseTags⁠?: boolean: Determines whether autoCloseTags is included in the support extensions. Defaults to true.

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.

htmlCompletion: Extension

HTML tag completion. Opens and closes tags and attributes in a context-aware way.

autoCloseTags: Extension

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

6.1.2 (2022-09-27)

Bug fixes

Make tag auto-closing consume > characters after the cursor.

Keywords

FAQs

What is @codemirror/lang-html?

Is @codemirror/lang-html popular?

Is @codemirror/lang-html well maintained?

Package last updated on 27 Sep 2022

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.

Install