Minimal-Mistakes Syntax Highlighting Specification
AnsiBlack
AnsiBlue
AnsiBrightBlack
AnsiBrightBlue
AnsiBrightCyan
AnsiBrightGreen
AnsiBrightMagenta
AnsiBrightRed
AnsiBrightWhite
AnsiBrightYellow
AnsiCyan
AnsiGreen
AnsiMagenta
AnsiRed
AnsiWhite
AnsiYellow
Background
BracketsParensBraces
BuiltInFunctions
BuiltInMagicMethodsOrConstants
ClassName
Comment
Constant
ConstantEscapeSequences
CssParentSelectors
Cyan
DateTime
Decorators
Deprecated
DestructureingAliasRHS
DestructuringAliasLHS
DiffChanged
DiffDeleted
DiffHeader
DiffInserted
DiffText
DocCommentKeywords
DocCommentParameters
DocCommentTypes
Error
Foreground
FunctionNames
FunctionParameters
GenericTemplatesAndMappedDeclarations
Green
HtmlCssAttributeNames
HtmlTags
InheritedClassName
InstanceReservedWords
Invalid
Keys
Keyword
KeywordGenericCssSelector
KeywordNew
MarkupBlockquote
MarkupBold
MarkupCodeBlockWithoutSyntax
MarkupHeading
MarkupHorizontalRule
MarkupInlineCode
MarkupItalic
MarkupLinkText
MarkupLinkUrl
MarkupListBulletOrNumber
MarkupRSTConstants
Modifiers
ObjectKeys
Orange
Pink
Purple
Red
ScopeOfInterest
Selection
SeparatorsReferencesOrAccessors
Storage
String
StringInterpolationOperators
StringRegExp
Support
Types
Variable
YamlAliases
Yellow
1Prelude
1.1Interpreting this specification
Language syntaxes and scopes will be referred to in the following manner throughout this document:
ScopeOfInterest
(ForegroundColor,BackgroundColoropt)ItalicoptBoldopt
Note
Throughout the document, broad ranges of syntax tokens will be referred to using TextMate Naming
Conventions
1.2Color Palette
1.2.1Standard
Background
#282A36
Foreground
#F8F8F2
Selection
#44475A
Comment
#6272A4
Red
#FF5555
Orange
#FFB86C
Yellow
#F1FA8C
Green
#50FA7B
Purple
#BD93F9
Cyan
#8BE9FD
Pink
#FF79C6
1.2.2ANSI
AnsiBlack
#21222C
AnsiRed
#FF5555
AnsiGreen
#50FA7B
AnsiYellow
#F1FA8C
AnsiBlue
#BD93F9
AnsiMagenta
#FF79C6
AnsiCyan
#8BE9FD
AnsiWhite
#F8F8F2
AnsiBrightBlack
#6272A4
AnsiBrightRed
#FF6E6E
AnsiBrightGreen
#69FF94
AnsiBrightYellow
#FFFFA5
AnsiBrightBlue
#D6ACFF
AnsiBrightMagenta
#FF92DF
AnsiBrightCyan
#A4FFFF
AnsiBrightWhite
#FFFFFF
1.3Example spec-compliant theme implementation
A fully spec‐compliant theme implementation can be found by visiting the Minimal-Mistakes/visual‐studio‐code repository.
2General
2.1Diffs
2.2Markup (Markdown, RST, etc.)
Note
Braces and parens should be the same color as the foreground color of the currently scoped position
in the document (e.g. Purple
for headings, Foreground
for regular text)
2.1Diffs
2.2Markup (Markdown, RST, etc.)
Note
Braces and parens should be the same color as the foreground color of the currently scoped position
in the document (e.g. Purple
for headings, Foreground
for regular text)
3Classes
Note
InstanceReservedWords refers to reserved words that
the language uses to interact with the instance (e.g.
this
, self
,
super
).
4Comments
Example
/**
* @param {string} foo - Some string parameter.
// ^^^^^^ -------------------------------------- Pink
// ^ ^ ----------------------------- Cyan
// ^^^^^^ ------------------------------ Cyan Italic
// ^^^ ------------------------- Orange Italic
*/
5Constants
6Entities
7Functions/Methods
8Keywords
9Language Built-ins
10Punctuation
Note
SeparatorsReferencesOrAccessors does not
refer to simple object or class dot accessors.
11Serializable / Configuration Languages
12Storage
Note
GenericTemplatesAndMappedDeclarations
refers to the declarations of generic types only. In the following example, only the
T
in
the brackets would be Orange.
function myFunc<T>(x: T): T {}
Note
GenericTemplatesAndMappedDeclarations
would also color
P
and T
on the LHS and T
in the declaration of
the following expression.
Example
type PartialExample<T> = { // T = Orange Italic
[P in keyof T]?: T[P]; // P and T on the LHS = Orange Italic
}
13Strings
14Variables
DestructureingAliasRHS
(Foregroud)
Destructuring
Example
const x = {
foo: 'foo',
bar: 'bar',
baz: 'baz',
};
// foo = Orange Italic
// myFoo = Foreground
const { foo: myFoo } = x;
Import/Export
Example
export { Foo }; // Foo = Foreground
export { Foo as myFoo }; // Foo = Orange Italic, myFoo = Foreground
import { Foo as myFoo } from 'foo'; // Foo = Orange Italic, myFoo = Foreground
import { Foo } from 'foo'; // Foo = Foreground
(Foregroud)
Destructuring Example
const x = {
foo: 'foo',
bar: 'bar',
baz: 'baz',
};
// foo = Orange Italic
// myFoo = Foreground
const { foo: myFoo } = x;
Import/Export Example
export { Foo }; // Foo = Foreground
export { Foo as myFoo }; // Foo = Orange Italic, myFoo = Foreground
import { Foo as myFoo } from 'foo'; // Foo = Orange Italic, myFoo = Foreground
import { Foo } from 'foo'; // Foo = Foreground