@codemirror/lang-yaml

What is @codemirror/lang-yaml?

@codemirror/lang-yaml is a language support package for CodeMirror 6 that provides syntax highlighting, parsing, and other language-specific features for YAML files.

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

Syntax Highlighting

This code sets up a CodeMirror editor with YAML syntax highlighting. The `yaml` function from `@codemirror/lang-yaml` is used as an extension in the editor state.

import { yaml } from '@codemirror/lang-yaml';
import { EditorState } from '@codemirror/state';
import { EditorView, basicSetup } from '@codemirror/basic-setup';

const state = EditorState.create({
  doc: 'key: value\nlist:\n  - item1\n  - item2',
  extensions: [basicSetup, yaml()]
});

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

Parsing

This code demonstrates how to parse a YAML document using the `@codemirror/lang-yaml` package. The `syntaxTree` function is used to get the syntax tree of the document.

import { yaml } from '@codemirror/lang-yaml';
import { syntaxTree } from '@codemirror/language';
import { EditorState } from '@codemirror/state';

const state = EditorState.create({
  doc: 'key: value\nlist:\n  - item1\n  - item2',
  extensions: [yaml()]
});

const tree = syntaxTree(state);
console.log(tree);

Other packages similar to @codemirror/lang-yaml

yaml-language-server

yaml-language-server is a language server for YAML that provides features like validation, autocompletion, and hover information. It is more focused on providing language server protocol (LSP) support for editors like VSCode, whereas @codemirror/lang-yaml is specifically for CodeMirror.

js-yaml

js-yaml is a JavaScript library for parsing and dumping YAML. It is not an editor-specific package but can be used in conjunction with various editors to provide YAML parsing and serialization capabilities. Unlike @codemirror/lang-yaml, it does not provide syntax highlighting or editor integration out of the box.

yaml

yaml is another JavaScript library for parsing and stringifying YAML. Similar to js-yaml, it focuses on YAML data manipulation rather than editor-specific features like syntax highlighting. It can be used alongside editor packages to provide YAML support.

README

@codemirror/lang-yaml

[ WEBSITE | ISSUES | FORUM | CHANGELOG ]

This package implements YAML 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.

The initial implementation of this package was funded by Braintrust Data.

API Reference

yaml() → LanguageSupport

Language support for YAML.

yamlLanguage: LRLanguage

A language provider based on the Lezer YAML parser, extended with highlighting and indentation information.

yamlFrontmatter(config: {content: Language | LanguageSupport}) → LanguageSupport

Returns language support for a document parsed as config.content with an optional YAML "frontmatter" delimited by lines that contain three dashes.

Changelog

6.1.1 (2024-04-12)

Bug fixes

Make block mapping entries, rather than the entire mapping, foldable.