This package provides a vocabulary for syntax-highlighting code based
on a Lezer syntax tree.
-
Highlighting tags are markers that denote a highlighting category.
They are associated with parts of a syntax
tree by a language mode, and then mapped to an actual CSS style by
a highlighter.
Because syntax tree node types and highlight styles have to be
able to talk the same language, CodeMirror uses a mostly closed
vocabulary of syntax tags (as opposed to
traditional open string-based systems, which make it hard for
highlighting themes to cover all the tokens produced by the
various languages).
It is possible to define your own
highlighting tags for system-internal use (where you control both
the language package and the highlighter), but such tags will not
be picked up by regular highlighters (though you can derive them
from standard tags to allow highlighters to fall back to those).
-
set: Tag[]
The set of this tag and all its parent tags, starting with
this one itself and sorted in order of decreasing specificity.
-
toString() → string
-
static define(name?: string, parent?: Tag) → Tag
Define a new tag. If parent
is given, the tag is treated as a
sub-tag of that parent, and
highlighters that don't mention
this tag will try to fall back to the parent tag (or grandparent
tag, etc).
-
static defineModifier(name?: string) → fn(tag: Tag) → Tag
Define a tag modifier, which is a function that, given a tag,
will return a tag that is a subtag of the original. Applying the
same modifier to a twice tag will return the same value (m1(t1) == m1(t1)
) and applying multiple modifiers will, regardless or
order, produce the same tag (m1(m2(t1)) == m2(m1(t1))
).
When multiple modifiers are applied to a given base tag, each
smaller set of modifiers is registered as a parent, so that for
example m1(m2(m3(t1)))
is a subtype of m1(m2(t1))
,
m1(m3(t1)
, and so on.
-
tags: Object
The default set of highlighting tags.
This collection is heavily biased towards programming languages,
and necessarily incomplete. A full ontology of syntactic
constructs would fill a stack of books, and be impractical to
write themes for. So try to make do with this set. If all else
fails, open an
issue to propose a
new tag, or define a local custom tag for
your use case.
Note that it is not obligatory to always attach the most specific
tag possible to an element—if your grammar can't easily
distinguish a certain type of element (such as a local variable),
it is okay to style it as its more general variant (a variable).
For tags that extend some parent tag, the documentation links to
the parent.
A comment.
A line comment.
A block comment.
A documentation comment.
-
name: Tag
Any kind of identifier.
-
variableName: Tag
The name of a variable.
-
typeName: Tag
A type name.
-
tagName: Tag
A tag name (subtag of typeName
).
-
propertyName: Tag
A property or field name.
-
attributeName: Tag
An attribute name (subtag of propertyName
).
-
className: Tag
The name of a class.
-
labelName: Tag
A label name.
-
namespace: Tag
A namespace name.
-
macroName: Tag
The name of a macro.
-
literal: Tag
A literal value.
-
string: Tag
A string literal.
-
docString: Tag
A documentation string.
-
character: Tag
A character literal (subtag of string).
-
attributeValue: Tag
An attribute value (subtag of string).
-
number: Tag
A number literal.
-
integer: Tag
An integer number literal.
-
float: Tag
A floating-point number literal.
-
bool: Tag
A boolean literal.
-
regexp: Tag
Regular expression literal.
-
escape: Tag
An escape literal, for example a
backslash escape in a string.
-
color: Tag
A color literal.
-
url: Tag
A URL literal.
-
keyword: Tag
A language keyword.
-
self: Tag
The keyword for the self or this
object.
-
null: Tag
The keyword for null.
-
atom: Tag
A keyword denoting some atomic value.
-
unit: Tag
A keyword that represents a unit.
-
modifier: Tag
A modifier keyword.
-
operatorKeyword: Tag
A keyword that acts as an operator.
-
controlKeyword: Tag
A control-flow related keyword.
-
definitionKeyword: Tag
A keyword that defines something.
-
moduleKeyword: Tag
A keyword related to defining or
interfacing with modules.
-
operator: Tag
An operator.
-
derefOperator: Tag
An operator that dereferences something.
-
arithmeticOperator: Tag
Arithmetic-related operator.
-
logicOperator: Tag
Logical operator.
-
bitwiseOperator: Tag
Bit operator.
-
compareOperator: Tag
Comparison operator.
-
updateOperator: Tag
Operator that updates its operand.
-
definitionOperator: Tag
Operator that defines something.
-
typeOperator: Tag
Type-related operator.
-
controlOperator: Tag
Control-flow operator.
-
punctuation: Tag
Program or markup punctuation.
-
separator: Tag
Punctuation that separates
things.
-
bracket: Tag
Bracket-style punctuation.
-
angleBracket: Tag
Angle brackets (usually <
and >
tokens).
-
squareBracket: Tag
Square brackets (usually [
and ]
tokens).
-
paren: Tag
Parentheses (usually (
and )
tokens). Subtag of
bracket.
-
brace: Tag
Braces (usually {
and }
tokens). Subtag of
bracket.
-
content: Tag
Content, for example plain text in XML or markup documents.
-
heading: Tag
Content that represents a heading.
-
heading1: Tag
A level 1 heading.
-
heading2: Tag
A level 2 heading.
-
heading3: Tag
A level 3 heading.
-
heading4: Tag
A level 4 heading.
-
heading5: Tag
A level 5 heading.
-
heading6: Tag
A level 6 heading.
-
contentSeparator: Tag
A prose content separator (such as a horizontal rule).
-
list: Tag
Content that represents a list.
-
quote: Tag
Content that represents a quote.
-
emphasis: Tag
Content that is emphasized.
-
strong: Tag
Content that is styled strong.
-
link: Tag
Content that is part of a link.
-
monospace: Tag
Content that is styled as code or
monospace.
-
strikethrough: Tag
Content that has a strike-through
style.
-
inserted: Tag
Inserted text in a change-tracking format.
-
deleted: Tag
Deleted text.
-
changed: Tag
Changed text.
-
invalid: Tag
An invalid or unsyntactic element.
-
meta: Tag
Metadata or meta-instruction.
-
documentMeta: Tag
Metadata that applies to the entire
document.
-
annotation: Tag
Metadata that annotates or adds
attributes to a given syntactic element.
-
processingInstruction: Tag
Processing instruction or preprocessor directive. Subtag of
meta.
-
definition(tag: Tag) → Tag
Modifier that indicates that a
given element is being defined. Expected to be used with the
various name tags.
-
constant(tag: Tag) → Tag
Modifier that indicates that
something is constant. Mostly expected to be used with
variable names.
-
function(tag: Tag) → Tag
Modifier used to indicate that
a variable or property
name is being called or defined
as a function.
-
standard(tag: Tag) → Tag
Modifier that can be applied to
names to indicate that they belong to
the language's standard environment.
-
local(tag: Tag) → Tag
Modifier that indicates a given
names is local to some scope.
-
special(tag: Tag) → Tag
A generic variant modifier that
can be used to tag language-specific alternative variants of
some common tag. It is recommended for themes to define special
forms of at least the string and
variable name tags, since those
come up a lot.
-
styleTags(spec: Object<Tag | readonly Tag[]>) → NodePropSource
This function is used to add a set of tags to a language syntax
via NodeSet.extend
or
LRParser.configure
.
The argument object maps node selectors to highlighting
tags or arrays of tags.
Node selectors may hold one or more (space-separated) node paths.
Such a path can be a node name, or
multiple node names (or *
wildcards) separated by slash
characters, as in "Block/Declaration/VariableName"
. Such a path
matches the final node but only if its direct parent nodes are the
other nodes mentioned. A *
in such a path matches any parent,
but only a single level—wildcards that match multiple parents
aren't supported, both for efficiency reasons and because Lezer
trees make it rather hard to reason about what they would match.)
A path can be ended with /...
to indicate that the tag assigned
to the node should also apply to all child nodes, even if they
match their own style (by default, only the innermost style is
used).
When a path ends in !
, as in Attribute!
, no further matching
happens for the node's child nodes, and the entire node gets the
given style.
In this notation, node names that contain /
, !
, *
, or ...
must be quoted as JSON strings.
For example:
parser.withProps(
styleTags({
// Style Number and BigNumber nodes
"Number BigNumber": tags.number,
// Style Escape nodes whose parent is String
"String/Escape": tags.escape,
// Style anything inside Attributes nodes
"Attributes!": tags.meta,
// Add a style to all content inside Italic nodes
"Italic/...": tags.emphasis,
// Style InvalidString nodes as both `string` and `invalid`
"InvalidString": [tags.string, tags.invalid],
// Style the node named "/" as punctuation
'"/"': tags.punctuation
})
)
-
getStyleTags(node: SyntaxNodeRef) → {tags: readonly Tag[], opaque: boolean, inherit: boolean} |
Match a syntax node's highlight rules. If
there's a match, return its set of tags, and whether it is
opaque (uses a !
) or applies to all child nodes (/...
).
-
A highlighter defines a mapping from highlighting tags and
language scopes to CSS class names. They are usually defined via
tagHighlighter
or some wrapper
around that, but it is also possible to implement them from
scratch.
-
style(tags: readonly Tag[]) → string | null
Get the set of classes that should be applied to the given set
of highlighting tags, or null if this highlighter doesn't assign
a style to the tags.
-
scope?: fn(node: NodeType) → boolean
When given, the highlighter will only be applied to trees on
whose top node this predicate returns
true.
-
tagHighlighter() → Highlighter
Define a highlighter from an array of
tag/class pairs. Classes associated with more specific tags will
take precedence.
-
options
-
scope?: fn(node: NodeType) → boolean
By default, highlighters apply to the entire document. You can
scope them to a single language by providing the tree's
top node type here.
-
all?: string
Add a style to all tokens. Probably only useful in combination
with scope
.
-
highlightCode()
Highlight the given tree with the given highlighter, calling
putText
for every piece of text, either with a set of classes or
with the empty string when unstyled, and putBreak
for every line
break.
-
highlightTree()
Highlight the given tree with the given
highlighter. Often, the higher-level
highlightCode
function is easier to
use.
-
putStyle(from: number, to: number, classes: string)
Assign styling to a region of the text. Will be called, in order
of position, for any ranges where more than zero classes apply.
classes
is a space separated string of CSS classes.
-
from
The start of the range to highlight.
-
to
The end of the range.
-
classHighlighter: Highlighter
This is a highlighter that adds stable, predictable classes to
tokens, for styling with external CSS.
The following tags are mapped to their name prefixed with "tok-"
(for example "tok-comment"
):
In addition, these mappings are provided: