@codemirror/language-data

What is @codemirror/language-data?

@codemirror/language-data is a package that provides language data for the CodeMirror editor. It includes language definitions, syntax highlighting, and other language-related features that can be used to enhance the CodeMirror editor's functionality.

What are @codemirror/language-data's main functionalities?

Language Support

This feature allows you to import and use language definitions provided by the package. In this example, we import the languages and find the JavaScript language definition.

import { languages } from '@codemirror/language-data';

const javascript = languages.find(lang => lang.name === 'javascript');
console.log(javascript);

Syntax Highlighting

This feature allows you to set up syntax highlighting for a specific language. In this example, we create an editor state with JavaScript syntax highlighting and attach it to the document body.

import { languages } from '@codemirror/language-data';
import { EditorState } from '@codemirror/state';
import { EditorView, basicSetup } from '@codemirror/view';
import { javascript } from '@codemirror/lang-javascript';

const state = EditorState.create({
  doc: 'console.log("Hello, world!");',
  extensions: [basicSetup, javascript()]
});

const view = new EditorView({
  state,
  parent: document.body
});

Language Configuration

This feature allows you to access and configure language-specific settings. In this example, we find the Python language definition and log its extensions.

import { languages } from '@codemirror/language-data';

const python = languages.find(lang => lang.name === 'python');
console.log(python.extensions);

Other packages similar to @codemirror/language-data

highlight.js

highlight.js is a popular library for syntax highlighting. It supports a wide range of languages and is easy to integrate into web projects. Compared to @codemirror/language-data, highlight.js is more focused on static code highlighting rather than being part of an interactive code editor.

prismjs

Prism is a lightweight, extensible syntax highlighter. It is designed to be easy to use and extend, with a focus on performance. Like highlight.js, Prism is more about static code highlighting and does not provide the interactive editing capabilities that @codemirror/language-data offers.

ace

Ace is a standalone code editor written in JavaScript. It provides syntax highlighting, code folding, and other features similar to CodeMirror. While Ace offers a comprehensive set of features for code editing, @codemirror/language-data is specifically designed to work with the CodeMirror editor.

README

@codemirror/language-data

[ WEBSITE | DOCS | ISSUES | FORUM | CHANGELOG ]

This package implements language metadata and dynamic loading 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.

Changelog

6.5.1 (2024-04-15)

Bug fixes

Properly specify the dependency on @codemirror/legacy-modes version 6.4.