css-classes-reference.rst

Scope Reference

Stylable Scopes

The general purpose scopes are intended to be used for any language, but the other scopes may also be used when semantically correct. For example if you had a general purpose language that allowed inline URLs:

var GOOGLE = https://www.google.com/

It would be reasonable to use the link class for this, even if your language is not a markup language. However, many themes might not be designed with this in mind so a better choice (for best theme support) might possibly be string.

General purpose
keyword	keyword in a regular Algol-style language
built_in	built-in or library object (constant, class, function)
type	data type (in a language with syntactically significant types) (string, int, array, etc.)
literal	special identifier for a built-in value (true, false, null, etc.)
number	number, including units and modifiers, if any.
operator	operators: +, -, >>, |, ==
punctuation	aux. punctuation that should be subtly highlighted (parentheses, brackets, etc.)
property	object property obj.prop1.prop2.value
regexp	literal regular expression
string	literal string, character
char.escape	an escape character such as \n
subst	parsed section inside a literal string
symbol	symbolic constant, interned string, goto label
class	deprecated You probably want title.class
function	deprecated You probably want title.function
variable	variables
variable.language	variable with special meaning in a language, e.g.: this, window, super, self, etc.
variable.constant	variable that is a constant value, ie MAX_FILES
title	name of a class or a function
title.class	name of a class (interface, trait, module, etc)
title.class.inherited	name of class being inherited from, extended, etc.
title.function	name of a function
title.function.invoke	name of a function (when being invoked)
params	block of function arguments (parameters) at the place of declaration
comment	comments
doctag	documentation markup within comments, e.g. @params
Meta
meta	flags, modifiers, annotations, processing instructions, preprocessor directives, etc
meta.prompt	REPL or shell prompts or similar
meta keyword	a keyword inside a meta block (note this is nested, not subscoped)
meta string	a string inside a meta block (note this is nested, not subscoped)
Tags, attributes, configs
section	heading of a section in a config file, heading in text markup
tag	XML/HTML tag
name	name of an XML tag, the first word in an s-expression
attr	name of an attribute with no language defined semantics (keys in JSON, setting names in .ini), also sub-attribute within another highlighted object, like XML tag
attribute	name of an attribute followed by a structured value part, like CSS properties
Text Markup
bullet	list item bullet
code	code block
emphasis	emphasis
strong	strong emphasis
formula	mathematical formula
link	hyperlink
quote	quotation or blockquote
CSS
selector-tag	tag selector
selector-id	#id selector
selector-class	.class selector
selector-attr	[attr] selector
selector-pseudo	:pseudo selector
Templates
template-tag	tag of a template language
template-variable	variable in a template language
diff
addition	added or changed line
deletion	deleted line

A note on scopes with sub-scopes

Some scope names above have a . in them. We use this notation to specify sub-scopes. In the generated HTML this will output multiple computed class names. The depth of nesting determines the number of underscores appended to sub-scope names. For example, Lets say the scope is title.class.other.

The CSS class names generated would be:

• hljs-title
• class_
• other__

The top-level scope is always the one that has the configured prefix applied.

The generated HTML would be:

<span class="hljs-title class_ other__">Render</span>

A theme could then simply target that using the following CSS:

.hljs-title.class_.other__ {
   color: blue;
}

A note on newer scopes

Some scopes have been added more recently and do not enjoy universal theme support. For themes without support, these items will simply not be highlighted. This doesn't mean not to use them, only that they will be highlighted better as support improves over time.

A list of these scopes:

• operator
• punctuation
• property

Reserved scopes

The below scopes (ReasonML) are left here for documentation purposes but may not be used in other grammars because they are very poorly supported by all themes.

If you'd like to help out with the larger issue here:

• #2521
• #2500

ReasonML
pattern-match	pattern matching matchers
typing	type signatures on function parameters
constructor	type constructors
module-access	scope access into a module
module	module reference within scope access

Language names and aliases

The language names and aliases table has moved to SUPPORTED_LANGUAGES.md.