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.
-
static define(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() → 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.
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 defines 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 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.
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
})
)