@codemirror/lang-xml
Advanced tools
@codemirror/lang-xml is a language support package for CodeMirror 6 that provides syntax highlighting, parsing, and other language-related features for XML. It is designed to be used with the CodeMirror 6 editor to enhance the editing experience for XML documents.
Syntax Highlighting
This code sets up a CodeMirror editor with XML syntax highlighting. The `xml` function from `@codemirror/lang-xml` is used as an extension to provide the necessary syntax highlighting for XML content.
import { xml } from '@codemirror/lang-xml';
import { EditorState } from '@codemirror/state';
import { EditorView, basicSetup } from '@codemirror/basic-setup';
const state = EditorState.create({
doc: '<note><to>Tove</to><from>Jani</from><heading>Reminder</heading><body>Don't forget me this weekend!</body></note>',
extensions: [basicSetup, xml()]
});
const view = new EditorView({
state,
parent: document.body
});XML Parsing
This code demonstrates how to parse an XML document using the `@codemirror/lang-xml` package. The `syntaxTree` function is used to get the syntax tree of the XML document, which can be used for further analysis or manipulation.
import { xml } from '@codemirror/lang-xml';
import { syntaxTree } from '@codemirror/language';
import { EditorState } from '@codemirror/state';
const state = EditorState.create({
doc: '<note><to>Tove</to><from>Jani</from><heading>Reminder</heading><body>Don't forget me this weekend!</body></note>',
extensions: [xml()]
});
const tree = syntaxTree(state);
console.log(tree);The `monaco-editor` package is the code editor that powers Visual Studio Code. It provides extensive language support, including XML. While it offers similar features like syntax highlighting and parsing, it is a different editor framework compared to CodeMirror.
The `ace-builds` package is a standalone code editor similar to CodeMirror. It supports XML syntax highlighting and parsing. Ace is known for its performance and extensive language support, but it is a different editor framework from CodeMirror.
[ WEBSITE | ISSUES | FORUM | CHANGELOG ]
This package implements XML 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.
xml(conf?: Object = {}) → LanguageSupportXML language support. Includes schema-based autocompletion when configured.
confelements?: readonly ElementSpec[]Provide a schema to create completions from.
attributes?: readonly AttrSpec[]Supporting attribute descriptions for the schema specified in
elements.
Determines whether autoCloseTags
is included in the support extensions. Defaults to true.
xmlLanguage: LRLanguageA language provider based on the Lezer XML parser, extended with highlighting and indentation information.
interface
ElementSpecDescribes an element in your XML document schema.
name: stringThe element name.
children?: readonly string[]Allowed children in this element. When not given, all elements are allowed inside it.
textContent?: readonly string[]When given, allows users to complete the given content strings as plain text when at the start of the element.
top?: booleanWhether this element may appear at the top of the document.
attributes?: readonly (string | AttrSpec)[]Allowed attributes in this element. Strings refer to attributes
specified in XMLConfig.attrs, but
you can also provide one-off attribute
specs. Attributes marked as
global are allowed in every
element, and don't have to be mentioned here.
completion?: Partial<Completion>Can be provided to add extra fields to the completion object created for this element.
interface
AttrSpecDescribes an attribute in your XML schema.
name: stringThe attribute name.
values?: readonly (string | Completion)[]Pre-defined values to complete for this attribute.
global?: booleanWhen true, this attribute can be added to all elements.
completion?: Partial<Completion>Provides extra fields to the completion object created for this element
completeFromSchema(eltSpecs: readonly ElementSpec[], attrSpecs: readonly AttrSpec[]) → CompletionSourceCreate a completion source for the given schema.
Extension that will automatically insert close tags when a > or
/ is typed.
6.1.0 (2024-03-06)
Add an autoCloseTags extension that closes tags on typing > or /. Enable it by default in the xml() language support.
FAQs
XML language support for the CodeMirror code editor
We found that @codemirror/lang-xml 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
Research
The Socket Research Team breaks down a malicious wrapper package that uses obfuscation to harvest credentials and exfiltrate sensitive data.
Research
Security News
Attackers used a malicious npm package typosquatting a popular ESLint plugin to steal sensitive data, execute commands, and exploit developer systems.
Security News
The Ultralytics' PyPI Package was compromised four times in one weekend through GitHub Actions cache poisoning and failure to rotate previously compromised API tokens.