Skip to content

Latest commit

 

History

History
224 lines (192 loc) · 14.6 KB

css-classes-reference.rst

File metadata and controls

224 lines (192 loc) · 14.6 KB
Raw

Scopes 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.
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
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 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:

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.