Shiki Highlighter
Publisher: litingyesThemes in package: 60
A Visual Studio Code extension that provides beautiful code highlighting using the Shiki syntax highlighter.
Color themes
VS Code preview
Full workbench mockup using this variant's colors and tokenColors.
Loading...
colors
Workbench UI color keys from the theme JSON colors map.
- activityBar.background#FAFAFA
- activityBar.foreground#121417
- activityBarBadge.background#526FFF
- activityBarBadge.foreground#FFFFFF
- badge.background#526FFF
- badge.foreground#FFFFFF
- button.background#5871EF
- button.foreground#FFFFFF
- button.hoverBackground#6B83ED
- diffEditor.insertedTextBackground#00809B33
- dropdown.background#FFFFFF
- dropdown.border#DBDBDC
- editor.background#FAFAFA
- editor.findMatchHighlightBackground#526FFF33
- editor.foreground#383A42
- editor.lineHighlightBackground#383A420C
- editor.selectionBackground#E5E5E6
- editorCursor.foreground#526FFF
- editorGroup.background#EAEAEB
- editorGroup.border#DBDBDC
- editorGroupHeader.tabsBackground#EAEAEB
- editorHoverWidget.background#EAEAEB
- editorHoverWidget.border#DBDBDC
- editorIndentGuide.activeBackground#626772
- editorIndentGuide.background#383A4233
- editorInlayHint.background#F5F5F5
- editorInlayHint.foreground#AFB2BB
- editorLineNumber.activeForeground#383A42
- editorLineNumber.foreground#9D9D9F
- editorRuler.foreground#383A4233
- editorSuggestWidget.background#EAEAEB
- editorSuggestWidget.border#DBDBDC
- editorSuggestWidget.selectedBackground#FFFFFF
- editorWhitespace.foreground#383A4233
- editorWidget.background#EAEAEB
- editorWidget.border#E5E5E6
- extensionButton.prominentBackground#3BBA54
- extensionButton.prominentHoverBackground#4CC263
- focusBorder#526FFF
- input.background#FFFFFF
- input.border#DBDBDC
- list.activeSelectionBackground#DBDBDC
- list.activeSelectionForeground#232324
- list.focusBackground#DBDBDC
- list.highlightForeground#121417
- list.hoverBackground#DBDBDC66
- list.inactiveSelectionBackground#DBDBDC
- list.inactiveSelectionForeground#232324
- notebook.cellEditorBackground#F5F5F5
- notification.background#333333
- peekView.border#526FFF
- peekViewEditor.background#FFFFFF
- peekViewResult.background#EAEAEB
- peekViewResult.selectionBackground#DBDBDC
- peekViewTitle.background#FFFFFF
- pickerGroup.border#526FFF
- scrollbarSlider.activeBackground#747D9180
- scrollbarSlider.background#4E566680
- scrollbarSlider.hoverBackground#5A637580
- sideBar.background#EAEAEB
- sideBarSectionHeader.background#FAFAFA
- statusBar.background#EAEAEB
- statusBar.debuggingForeground#FFFFFF
- statusBar.foreground#424243
- statusBar.noFolderBackground#EAEAEB
- statusBarItem.hoverBackground#DBDBDC
- tab.activeBackground#FAFAFA
- tab.activeForeground#121417
- tab.border#DBDBDC
- tab.inactiveBackground#EAEAEB
- titleBar.activeBackground#EAEAEB
- titleBar.activeForeground#424243
- titleBar.inactiveBackground#EAEAEB
- titleBar.inactiveForeground#424243
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| comment | #A0A1A7 | italic |
| comment markup.link | #A0A1A7 | — |
| entity.name.type | #C18401 | — |
| entity.other.inherited-class | #C18401 | — |
| keyword | #A626A4 | — |
| keyword.control | #A626A4 | — |
| keyword.operator | #383A42 | — |
| keyword.other.special-method | #4078F2 | — |
| keyword.other.unit | #986801 | — |
| storage | #A626A4 | — |
| storage.type.annotation, storage.type.primitive | #A626A4 | — |
| storage.modifier.package, storage.modifier.import | #383A42 | — |
| constant | #986801 | — |
| constant.variable | #986801 | — |
| constant.character.escape | #0184BC | — |
| constant.numeric | #986801 | — |
| constant.other.color | #0184BC | — |
| constant.other.symbol | #0184BC | — |
| variable | #E45649 | — |
| variable.interpolation | #CA1243 | — |
| variable.parameter | #383A42 | — |
| string | #50A14F | — |
| string > source, string embedded | #383A42 | — |
| string.regexp | #0184BC | — |
| string.regexp source.ruby.embedded | #C18401 | — |
| string.other.link | #E45649 | — |
| punctuation.definition.comment | #A0A1A7 | — |
| punctuation.definition.method-parameters, punctuation.definition.function-parameters, punctuation.definition.parameters, punctuation.definition.separator, punctuation.definition.seperator, punctuation.definition.array | #383A42 | — |
| punctuation.definition.heading, punctuation.definition.identity | #4078F2 | — |
| punctuation.definition.bold | #C18401 | bold |
| punctuation.definition.italic | #A626A4 | italic |
| punctuation.section.embedded | #CA1243 | — |
| punctuation.section.method, punctuation.section.class, punctuation.section.inner-class | #383A42 | — |
| support.class | #C18401 | — |
| support.type | #0184BC | — |
| support.function | #0184BC | — |
| support.function.any-method | #4078F2 | — |
| entity.name.function | #4078F2 | — |
| entity.name.class, entity.name.type.class | #C18401 | — |
| entity.name.section | #4078F2 | — |
| entity.name.tag | #E45649 | — |
| entity.other.attribute-name | #986801 | — |
| entity.other.attribute-name.id | #4078F2 | — |
| meta.class | #C18401 | — |
| meta.class.body | #383A42 | — |
| meta.method-call, meta.method | #383A42 | — |
| meta.definition.variable | #E45649 | — |
| meta.link | #986801 | — |
| meta.require | #4078F2 | — |
| meta.selector | #A626A4 | — |
| meta.separator | #383A42 | — |
| meta.tag | #383A42 | — |
| underline | — | — |
| none | #383A42 | — |
| invalid.deprecated | #000000 | — |
| invalid.illegal | white | — |
| markup.bold | #986801 | bold |
| markup.changed | #A626A4 | — |
| markup.deleted | #E45649 | — |
| markup.italic | #A626A4 | italic |
| markup.heading | #E45649 | — |
| markup.heading punctuation.definition.heading | #4078F2 | — |
| markup.link | #0184BC | — |
| markup.inserted | #50A14F | — |
| markup.quote | #986801 | — |
| markup.raw | #50A14F | — |
| source.c keyword.operator | #A626A4 | — |
| source.cpp keyword.operator | #A626A4 | — |
| source.cs keyword.operator | #A626A4 | — |
| source.css property-name, source.css property-value | #696C77 | — |
| source.css property-name.support, source.css property-value.support | #383A42 | — |
| source.elixir source.embedded.source | #383A42 | — |
| source.elixir constant.language, source.elixir constant.numeric, source.elixir constant.definition | #4078F2 | — |
| source.elixir variable.definition, source.elixir variable.anonymous | #A626A4 | — |
| source.elixir parameter.variable.function | #986801 | italic |
| source.elixir quoted | #50A14F | — |
| source.elixir keyword.special-method, source.elixir embedded.section, source.elixir embedded.source.empty | #E45649 | — |
| source.elixir readwrite.module punctuation | #E45649 | — |
| source.elixir regexp.section, source.elixir regexp.string | #CA1243 | — |
| source.elixir separator, source.elixir keyword.operator | #986801 | — |
| source.elixir variable.constant | #C18401 | — |
| source.elixir array, source.elixir scope, source.elixir section | #696C77 | — |
| source.gfm markup | — | — |
| source.gfm link entity | #4078F2 | — |
| source.go storage.type.string | #A626A4 | — |
| source.ini keyword.other.definition.ini | #E45649 | — |
| source.java storage.modifier.import | #C18401 | — |
| source.java storage.type | #C18401 | — |
| source.java keyword.operator.instanceof | #A626A4 | — |
| source.java-properties meta.key-pair | #E45649 | — |
| source.java-properties meta.key-pair > punctuation | #383A42 | — |
| source.js keyword.operator | #0184BC | — |
| source.js keyword.operator.delete, source.js keyword.operator.in, source.js keyword.operator.of, source.js keyword.operator.instanceof, source.js keyword.operator.new, source.js keyword.operator.typeof, source.js keyword.operator.void | #A626A4 | — |
| source.ts keyword.operator | #0184BC | — |
| source.flow keyword.operator | #0184BC | — |
| source.json meta.structure.dictionary.json > string.quoted.json | #E45649 | — |
| source.json meta.structure.dictionary.json > string.quoted.json > punctuation.string | #E45649 | — |
| source.json meta.structure.dictionary.json > value.json > string.quoted.json, source.json meta.structure.array.json > value.json > string.quoted.json, source.json meta.structure.dictionary.json > value.json > string.quoted.json > punctuation, source.json meta.structure.array.json > value.json > string.quoted.json > punctuation | #50A14F | — |
| source.json meta.structure.dictionary.json > constant.language.json, source.json meta.structure.array.json > constant.language.json | #0184BC | — |
| ng.interpolation | #E45649 | — |
| ng.interpolation.begin, ng.interpolation.end | #4078F2 | — |
| ng.interpolation function | #E45649 | — |
| ng.interpolation function.begin, ng.interpolation function.end | #4078F2 | — |
| ng.interpolation bool | #986801 | — |
| ng.interpolation bracket | #383A42 | — |
| ng.pipe, ng.operator | #383A42 | — |
| ng.tag | #0184BC | — |
| ng.attribute-with-value attribute-name | #C18401 | — |
| ng.attribute-with-value string | #A626A4 | — |
| ng.attribute-with-value string.begin, ng.attribute-with-value string.end | #383A42 | — |
| source.ruby constant.other.symbol > punctuation | inherit | — |
| source.php class.bracket | #383A42 | — |
| source.python keyword.operator.logical.python | #A626A4 | — |
| source.python variable.parameter | #986801 | — |
| customrule | #383A42 | — |
| support.type.property-name | #383A42 | — |
| string.quoted.double punctuation | #50A14F | — |
| support.constant | #986801 | — |
| support.type.property-name.json | #E45649 | — |
| support.type.property-name.json punctuation | #E45649 | — |
| punctuation.separator.key-value.ts, punctuation.separator.key-value.js, punctuation.separator.key-value.tsx | #0184BC | — |
| source.js.embedded.html keyword.operator, source.ts.embedded.html keyword.operator | #0184BC | — |
| variable.other.readwrite.js, variable.other.readwrite.ts, variable.other.readwrite.tsx | #383A42 | — |
| support.variable.dom.js, support.variable.dom.ts | #E45649 | — |
| support.variable.property.dom.js, support.variable.property.dom.ts | #E45649 | — |
| meta.template.expression.js punctuation.definition, meta.template.expression.ts punctuation.definition | #CA1243 | — |
| source.ts punctuation.definition.typeparameters, source.js punctuation.definition.typeparameters, source.tsx punctuation.definition.typeparameters | #383A42 | — |
| source.ts punctuation.definition.block, source.js punctuation.definition.block, source.tsx punctuation.definition.block | #383A42 | — |
| source.ts punctuation.separator.comma, source.js punctuation.separator.comma, source.tsx punctuation.separator.comma | #383A42 | — |
| support.variable.property.js, support.variable.property.ts, support.variable.property.tsx | #E45649 | — |
| keyword.control.default.js, keyword.control.default.ts, keyword.control.default.tsx | #E45649 | — |
| keyword.operator.expression.instanceof.js, keyword.operator.expression.instanceof.ts, keyword.operator.expression.instanceof.tsx | #A626A4 | — |
| keyword.operator.expression.of.js, keyword.operator.expression.of.ts, keyword.operator.expression.of.tsx | #A626A4 | — |
| meta.brace.round.js, meta.array-binding-pattern-variable.js, meta.brace.square.js, meta.brace.round.ts, meta.array-binding-pattern-variable.ts, meta.brace.square.ts, meta.brace.round.tsx, meta.array-binding-pattern-variable.tsx, meta.brace.square.tsx | #383A42 | — |
| source.js punctuation.accessor, source.ts punctuation.accessor, source.tsx punctuation.accessor | #383A42 | — |
| punctuation.terminator.statement.js, punctuation.terminator.statement.ts, punctuation.terminator.statement.tsx | #383A42 | — |
| meta.array-binding-pattern-variable.js variable.other.readwrite.js, meta.array-binding-pattern-variable.ts variable.other.readwrite.ts, meta.array-binding-pattern-variable.tsx variable.other.readwrite.tsx | #986801 | — |
| source.js support.variable, source.ts support.variable, source.tsx support.variable | #E45649 | — |
| variable.other.constant.property.js, variable.other.constant.property.ts, variable.other.constant.property.tsx | #986801 | — |
| keyword.operator.new.ts, keyword.operator.new.j, keyword.operator.new.tsx | #A626A4 | — |
| source.ts keyword.operator, source.tsx keyword.operator | #0184BC | — |
| punctuation.separator.parameter.js, punctuation.separator.parameter.ts, punctuation.separator.parameter.tsx | #383A42 | — |
| constant.language.import-export-all.js, constant.language.import-export-all.ts | #E45649 | — |
| constant.language.import-export-all.jsx, constant.language.import-export-all.tsx | #0184BC | — |
| keyword.control.as.js, keyword.control.as.ts, keyword.control.as.jsx, keyword.control.as.tsx | #383A42 | — |
| variable.other.readwrite.alias.js, variable.other.readwrite.alias.ts, variable.other.readwrite.alias.jsx, variable.other.readwrite.alias.tsx | #E45649 | — |
| variable.other.constant.js, variable.other.constant.ts, variable.other.constant.jsx, variable.other.constant.tsx | #986801 | — |
| meta.export.default.js variable.other.readwrite.js, meta.export.default.ts variable.other.readwrite.ts | #E45649 | — |
| source.js meta.template.expression.js punctuation.accessor, source.ts meta.template.expression.ts punctuation.accessor, source.tsx meta.template.expression.tsx punctuation.accessor | #50A14F | — |
| source.js meta.import-equals.external.js keyword.operator, source.jsx meta.import-equals.external.jsx keyword.operator, source.ts meta.import-equals.external.ts keyword.operator, source.tsx meta.import-equals.external.tsx keyword.operator | #383A42 | — |
| entity.name.type.module.js,entity.name.type.module.ts,entity.name.type.module.jsx,entity.name.type.module.tsx | #50A14F | — |
| meta.class.js,meta.class.ts,meta.class.jsx,meta.class.tsx | #383A42 | — |
| meta.definition.property.js variable, meta.definition.property.ts variable, meta.definition.property.jsx variable, meta.definition.property.tsx variable | #383A42 | — |
| meta.type.parameters.js support.type, meta.type.parameters.jsx support.type, meta.type.parameters.ts support.type, meta.type.parameters.tsx support.type | #383A42 | — |
| source.js meta.tag.js keyword.operator, source.jsx meta.tag.jsx keyword.operator, source.ts meta.tag.ts keyword.operator, source.tsx meta.tag.tsx keyword.operator | #383A42 | — |
| meta.tag.js punctuation.section.embedded, meta.tag.jsx punctuation.section.embedded, meta.tag.ts punctuation.section.embedded, meta.tag.tsx punctuation.section.embedded | #383A42 | — |
| meta.array.literal.js variable, meta.array.literal.jsx variable, meta.array.literal.ts variable, meta.array.literal.tsx variable | #C18401 | — |
| support.type.object.module.js, support.type.object.module.jsx, support.type.object.module.ts, support.type.object.module.tsx | #E45649 | — |
| constant.language.json | #0184BC | — |
| variable.other.constant.object.js, variable.other.constant.object.jsx, variable.other.constant.object.ts, variable.other.constant.object.tsx | #986801 | — |
| storage.type.property.js, storage.type.property.jsx, storage.type.property.ts, storage.type.property.tsx | #0184BC | — |
| meta.template.expression.js string.quoted punctuation.definition, meta.template.expression.jsx string.quoted punctuation.definition, meta.template.expression.ts string.quoted punctuation.definition, meta.template.expression.tsx string.quoted punctuation.definition | #50A14F | — |
| meta.template.expression.js string.template punctuation.definition.string.template, meta.template.expression.jsx string.template punctuation.definition.string.template, meta.template.expression.ts string.template punctuation.definition.string.template, meta.template.expression.tsx string.template punctuation.definition.string.template | #50A14F | — |
| keyword.operator.expression.in.js, keyword.operator.expression.in.jsx, keyword.operator.expression.in.ts, keyword.operator.expression.in.tsx | #A626A4 | — |
| variable.other.object.js, variable.other.object.ts | #383A42 | — |
| meta.object-literal.key.js, meta.object-literal.key.ts | #E45649 | — |
| source.python constant.other | #383A42 | — |
| source.python constant | #986801 | — |
| constant.character.format.placeholder.other.python storage | #986801 | — |
| support.variable.magic.python | #E45649 | — |
| meta.function.parameters.python | #986801 | — |
| punctuation.separator.annotation.python | #383A42 | — |
| punctuation.separator.parameters.python | #383A42 | — |
| entity.name.variable.field.cs | #E45649 | — |
| source.cs keyword.operator | #383A42 | — |
| variable.other.readwrite.cs | #383A42 | — |
| variable.other.object.cs | #383A42 | — |
| variable.other.object.property.cs | #383A42 | — |
| entity.name.variable.property.cs | #4078F2 | — |
| storage.type.cs | #C18401 | — |
| keyword.other.unsafe.rust | #A626A4 | — |
| entity.name.type.rust | #0184BC | — |
| storage.modifier.lifetime.rust | #383A42 | — |
| entity.name.lifetime.rust | #986801 | — |
| storage.type.core.rust | #0184BC | — |
| meta.attribute.rust | #986801 | — |
| storage.class.std.rust | #0184BC | — |
| markup.raw.block.markdown | #383A42 | — |
| punctuation.definition.variable.shell | #E45649 | — |
| support.constant.property-value.css | #383A42 | — |
| punctuation.definition.constant.css | #986801 | — |
| punctuation.separator.key-value.scss | #E45649 | — |
| punctuation.definition.constant.scss | #986801 | — |
| meta.property-list.scss punctuation.separator.key-value.scss | #383A42 | — |
| storage.type.primitive.array.java | #C18401 | — |
| entity.name.section.markdown | #E45649 | — |
| punctuation.definition.heading.markdown | #E45649 | — |
| markup.heading.setext | #383A42 | — |
| punctuation.definition.bold.markdown | #986801 | — |
| markup.inline.raw.markdown | #50A14F | — |
| beginning.punctuation.definition.list.markdown | #E45649 | — |
| markup.quote.markdown | #A0A1A7 | italic |
| punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, punctuation.definition.metadata.markdown | #383A42 | — |
| punctuation.definition.metadata.markdown | #A626A4 | — |
| markup.underline.link.markdown, markup.underline.link.image.markdown | #A626A4 | — |
| string.other.link.title.markdown, string.other.link.description.markdown | #4078F2 | — |
| punctuation.separator.variable.ruby | #E45649 | — |
| variable.other.constant.ruby | #986801 | — |
| keyword.operator.other.ruby | #50A14F | — |
| punctuation.definition.variable.php | #E45649 | — |
| meta.class.php | #383A42 | — |
Shiki preview
TypeScript sample highlighted with this variant's colors and tokenColors.
Loading...