Shiki Highlighter

Name: Shiki Highlighter
Author: litingyes

Publisher: litingyesThemes in package: 60

A Visual Studio Code extension that provides beautiful code highlighting using the Shiki syntax highlighter.

GitHub

Color themes

VS Code preview

Full workbench mockup using this variant's colors and tokenColors.

Shiki Highlighter — Material Theme Darker

fetchUser.ts

index.ts

README.md

srccomponentsfetchUser.tsfetchUser

Problems1

Output

Debug Console

Terminal

Ports

~/my-project $ pnpm dev
▲ Next.js ready on http://localhost:3000
✓ compiled client and server successfully in 412ms
wait - compiling /theme/vscode...

main*

Copilot

Ln 5, Col 12

Spaces: 2

UTF-8

TypeScript

Dark+

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.activeBorder#80CBC4
activityBar.background#212121
activityBar.border#21212160
activityBar.dropBackground#f0717880
activityBar.foreground#EEFFFF
activityBarBadge.background#80CBC4
activityBarBadge.foreground#000000
badge.background#00000030
badge.foreground#545454
breadcrumb.activeSelectionForeground#80CBC4
breadcrumb.background#212121
breadcrumb.focusForeground#EEFFFF
breadcrumb.foreground#676767
breadcrumbPicker.background#212121
button.background#61616150
button.foreground#ffffff
debugConsole.errorForeground#f07178
debugConsole.infoForeground#89DDFF
debugConsole.warningForeground#FFCB6B
debugToolBar.background#212121
diffEditor.insertedTextBackground#89DDFF20
diffEditor.removedTextBackground#ff9cac20
dropdown.background#212121
dropdown.border#FFFFFF10
editor.background#212121
editor.findMatchBackground#000000
editor.findMatchBorder#80CBC4
editor.findMatchHighlight#EEFFFF
editor.findMatchHighlightBackground#00000050
editor.findMatchHighlightBorder#ffffff30
editor.findRangeHighlightBackground#FFCB6B30
editor.foreground#EEFFFF
editor.lineHighlightBackground#00000050
editor.lineHighlightBorder#00000000
editor.rangeHighlightBackground#FFFFFF0d
editor.selectionBackground#61616150
editor.selectionHighlightBackground#FFCC0020
editor.wordHighlightBackground#ff9cac30
editor.wordHighlightStrongBackground#C3E88D30
editorBracketMatch.background#212121
editorBracketMatch.border#FFCC0050
editorCursor.foreground#FFCC00
editorError.foreground#f0717870
editorGroup.border#00000030
editorGroup.dropBackground#f0717880
editorGroup.focusedEmptyBorder#f07178
editorGroupHeader.tabsBackground#212121
editorGutter.addedBackground#C3E88D60
editorGutter.deletedBackground#f0717860
editorGutter.modifiedBackground#82AAFF60
editorHoverWidget.background#212121
editorHoverWidget.border#FFFFFF10
editorIndentGuide.activeBackground#424242
editorIndentGuide.background#42424270
editorInfo.foreground#82AAFF70
editorLineNumber.activeForeground#676767
editorLineNumber.foreground#424242
editorLink.activeForeground#EEFFFF
editorMarkerNavigation.background#EEFFFF05
editorOverviewRuler.border#212121
editorOverviewRuler.errorForeground#f0717840
editorOverviewRuler.findMatchForeground#80CBC4
editorOverviewRuler.infoForeground#82AAFF40
editorOverviewRuler.warningForeground#FFCB6B40
editorRuler.foreground#424242
editorSuggestWidget.background#212121
editorSuggestWidget.border#FFFFFF10
editorSuggestWidget.foreground#EEFFFF
editorSuggestWidget.highlightForeground#80CBC4
editorSuggestWidget.selectedBackground#00000050
editorWarning.foreground#FFCB6B70
editorWhitespace.foreground#EEFFFF40
editorWidget.background#212121
editorWidget.border#80CBC4
editorWidget.resizeBorder#80CBC4
extensionBadge.remoteForeground#EEFFFF
extensionButton.prominentBackground#C3E88D90
extensionButton.prominentForeground#EEFFFF
extensionButton.prominentHoverBackground#C3E88D
focusBorder#FFFFFF00
foreground#EEFFFF
gitDecoration.conflictingResourceForeground#FFCB6B90
gitDecoration.deletedResourceForeground#f0717890
gitDecoration.ignoredResourceForeground#67676790
gitDecoration.modifiedResourceForeground#82AAFF90
gitDecoration.untrackedResourceForeground#C3E88D90
input.background#2B2B2B
input.border#FFFFFF10
input.foreground#EEFFFF
input.placeholderForeground#EEFFFF60
inputOption.activeBackground#EEFFFF30
inputOption.activeBorder#EEFFFF30
inputValidation.errorBorder#f07178
inputValidation.infoBorder#82AAFF
inputValidation.warningBorder#FFCB6B
list.activeSelectionBackground#212121
list.activeSelectionForeground#80CBC4
list.dropBackground#f0717880
list.focusBackground#EEFFFF20
list.focusForeground#EEFFFF
list.highlightForeground#80CBC4
list.hoverBackground#212121
list.hoverForeground#FFFFFF
list.inactiveSelectionBackground#00000030
list.inactiveSelectionForeground#80CBC4
listFilterWidget.background#00000030
listFilterWidget.noMatchesOutline#00000030
listFilterWidget.outline#00000030
menu.background#212121
menu.foreground#EEFFFF
menu.selectionBackground#00000050
menu.selectionBorder#00000030
menu.selectionForeground#80CBC4
menu.separatorBackground#EEFFFF
menubar.selectionBackground#00000030
menubar.selectionBorder#00000030
menubar.selectionForeground#80CBC4
notebook.focusedCellBorder#80CBC4
notebook.inactiveFocusedCellBorder#80CBC450
notificationLink.foreground#80CBC4
notifications.background#212121
notifications.foreground#EEFFFF
panel.background#212121
panel.border#21212160
panel.dropBackground#EEFFFF
panelTitle.activeBorder#80CBC4
panelTitle.activeForeground#FFFFFF
panelTitle.inactiveForeground#EEFFFF
peekView.border#00000030
peekViewEditor.background#2B2B2B
peekViewEditor.matchHighlightBackground#61616150
peekViewEditorGutter.background#2B2B2B
peekViewResult.background#2B2B2B
peekViewResult.matchHighlightBackground#61616150
peekViewResult.selectionBackground#67676770
peekViewTitle.background#2B2B2B
peekViewTitleDescription.foreground#EEFFFF60
pickerGroup.border#FFFFFF1a
pickerGroup.foreground#80CBC4
progressBar.background#80CBC4
quickInput.background#212121
quickInput.foreground#676767
quickInput.list.focusBackground#EEFFFF20
sash.hoverBorder#80CBC450
scrollbar.shadow#00000030
scrollbarSlider.activeBackground#80CBC4
scrollbarSlider.background#EEFFFF20
scrollbarSlider.hoverBackground#EEFFFF10
selection.background#00000080
settings.checkboxBackground#212121
settings.checkboxForeground#EEFFFF
settings.dropdownBackground#212121
settings.dropdownForeground#EEFFFF
settings.headerForeground#80CBC4
settings.modifiedItemIndicator#80CBC4
settings.numberInputBackground#212121
settings.numberInputForeground#EEFFFF
settings.textInputBackground#212121
settings.textInputForeground#EEFFFF
sideBar.background#212121
sideBar.border#21212160
sideBar.foreground#676767
sideBarSectionHeader.background#212121
sideBarSectionHeader.border#21212160
sideBarTitle.foreground#EEFFFF
statusBar.background#212121
statusBar.border#21212160
statusBar.debuggingBackground#C792EA
statusBar.debuggingForeground#ffffff
statusBar.foreground#616161
statusBar.noFolderBackground#212121
statusBarItem.activeBackground#f0717880
statusBarItem.hoverBackground#54545420
statusBarItem.remoteBackground#80CBC4
statusBarItem.remoteForeground#000000
tab.activeBackground#212121
tab.activeBorder#80CBC4
tab.activeForeground#FFFFFF
tab.activeModifiedBorder#676767
tab.border#212121
tab.inactiveBackground#212121
tab.inactiveForeground#676767
tab.inactiveModifiedBorder#904348
tab.unfocusedActiveBorder#545454
tab.unfocusedActiveForeground#EEFFFF
tab.unfocusedActiveModifiedBorder#c05a60
tab.unfocusedInactiveModifiedBorder#904348
terminal.ansiBlack#000000
terminal.ansiBlue#82AAFF
terminal.ansiBrightBlack#545454
terminal.ansiBrightBlue#82AAFF
terminal.ansiBrightCyan#89DDFF
terminal.ansiBrightGreen#C3E88D
terminal.ansiBrightMagenta#C792EA
terminal.ansiBrightRed#f07178
terminal.ansiBrightWhite#ffffff
terminal.ansiBrightYellow#FFCB6B
terminal.ansiCyan#89DDFF
terminal.ansiGreen#C3E88D
terminal.ansiMagenta#C792EA
terminal.ansiRed#f07178
terminal.ansiWhite#ffffff
terminal.ansiYellow#FFCB6B
terminalCursor.background#000000
terminalCursor.foreground#FFCB6B
textLink.activeForeground#EEFFFF
textLink.foreground#80CBC4
titleBar.activeBackground#212121
titleBar.activeForeground#EEFFFF
titleBar.border#21212160
titleBar.inactiveBackground#212121
titleBar.inactiveForeground#676767
tree.indentGuidesStroke#424242
widget.shadow#00000030

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
—	#EEFFFF	—
string	#C3E88D	—
punctuation, constant.other.symbol	#89DDFF	—
constant.character.escape, text.html constant.character.entity.named	#EEFFFF	—
constant.language.boolean	#ff9cac	—
constant.numeric	#F78C6C	—
variable, variable.parameter, support.variable, variable.language, support.constant, meta.definition.variable entity.name.function, meta.function-call.arguments	#EEFFFF	—
keyword.other	#F78C6C	—
keyword, modifier, variable.language.this, support.type.object, constant.language	#89DDFF	—
entity.name.function, support.function	#82AAFF	—
storage.type, storage.modifier, storage.control	#C792EA	—
support.module, support.node	#f07178	italic
support.type, constant.other.key	#FFCB6B	—
entity.name.type, entity.other.inherited-class, entity.other	#FFCB6B	—
comment	#545454	italic
comment punctuation.definition.comment, string.quoted.docstring	#545454	italic
punctuation	#89DDFF	—
entity.name, entity.name.type.class, support.type, support.class, meta.use	#FFCB6B	—
variable.object.property, meta.field.declaration entity.name.function	#f07178	—
meta.definition.method entity.name.function	#f07178	—
meta.function entity.name.function	#82AAFF	—
template.expression.begin, template.expression.end, punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end	#89DDFF	—
meta.embedded, source.groovy.embedded, meta.template.expression	#EEFFFF	—
entity.name.tag.yaml	#f07178	—
meta.object-literal.key, meta.object-literal.key string, support.type.property-name.json	#f07178	—
constant.language.json	#89DDFF	—
entity.other.attribute-name.class	#FFCB6B	—
entity.other.attribute-name.id	#F78C6C	—
source.css entity.name.tag	#FFCB6B	—
support.type.property-name.css	#B2CCD6	—
meta.tag, punctuation.definition.tag	#89DDFF	—
entity.name.tag	#f07178	—
entity.other.attribute-name	#C792EA	—
punctuation.definition.entity.html	#EEFFFF	—
markup.heading	#89DDFF	—
text.html.markdown meta.link.inline, meta.link.reference	#f07178	—
text.html.markdown beginning.punctuation.definition.list	#89DDFF	—
markup.italic	#f07178	italic
markup.bold	#f07178	bold
markup.bold markup.italic, markup.italic markup.bold	#f07178	italic bold
markup.fenced_code.block.markdown punctuation.definition.markdown	#C3E88D	—
markup.inline.raw.string.markdown	#C3E88D	—
keyword.other.definition.ini	#f07178	—
entity.name.section.group-title.ini	#89DDFF	—
source.cs meta.class.identifier storage.type	#FFCB6B	—
source.cs meta.method.identifier entity.name.function	#f07178	—
source.cs meta.method-call meta.method, source.cs entity.name.function	#82AAFF	—
source.cs storage.type	#FFCB6B	—
source.cs meta.method.return-type	#FFCB6B	—
source.cs meta.preprocessor	#545454	—
source.cs entity.name.type.namespace	#EEFFFF	—
meta.jsx.children, SXNested	#EEFFFF	—
support.class.component	#FFCB6B	—
source.cpp meta.block variable.other	#EEFFFF	—
source.python meta.member.access.python	#f07178	—
source.python meta.function-call.python, meta.function-call.arguments	#82AAFF	—
meta.block	#f07178	—
entity.name.function.call	#82AAFF	—
source.php support.other.namespace, source.php meta.use support.class	#EEFFFF	—
constant.keyword	#89DDFF	italic
entity.name.function	#82AAFF	—
—	#EEFFFF	—
constant.other.placeholder	#f07178	—
markup.deleted	#f07178	—
markup.inserted	#C3E88D	—
markup.underline	—	underline
keyword.control	#89DDFF	italic
variable.parameter	—	italic
variable.parameter.function.language.special.self.python	#f07178	italic
constant.character.format.placeholder.other.python	#F78C6C	—
markup.quote	#89DDFF	italic
markup.fenced_code.block	#EEFFFF90	—
punctuation.definition.quote	#ff9cac	—
meta.structure.dictionary.json support.type.property-name.json	#C792EA	—
meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#FFCB6B	—
meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#F78C6C	—
meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#f07178	—
meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#916b53	—
meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#82AAFF	—
meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#ff9cac	—
meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#C792EA	—
meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#C3E88D	—

Shiki preview

TypeScript sample highlighted with this variant's colors and tokenColors.

export interface User {
  id: string;
  name: string;
  role: "admin" | "member";
  tags: string[];
}

/**
 * Fetch user data by ID
 * @param id  
 * @returns User object or null if ID is invalid
 */
export async function fetchUser(id: string): Promise<User | null> {
  if (!id) {
    return null;
  }

  const response = await fetch(`/api/users/${id}`, {
    method: "GET",
    headers: { Accept: "application/json" },
  });

  if (!response.ok) {
    throw new Error(`HTTP ${response.status}`);
  }

  return (await response.json()) as User;
}

function greet(user: User): string {
  // Simple greeting function that uses the user's name
  return `Hello, ${user.name}!`;
}