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 Lighter

fetchUser.ts

index.ts

README.md

srccomponentsfetchUser.ts

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

Light+

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.activeBorder#80CBC4
activityBar.background#FAFAFA
activityBar.border#FAFAFA60
activityBar.dropBackground#E5393580
activityBar.foreground#90A4AE
activityBarBadge.background#80CBC4
activityBarBadge.foreground#000000
badge.background#CCD7DA30
badge.foreground#90A4AE
breadcrumb.activeSelectionForeground#80CBC4
breadcrumb.background#FAFAFA
breadcrumb.focusForeground#90A4AE
breadcrumb.foreground#758a95
breadcrumbPicker.background#FAFAFA
button.background#80CBC440
button.foreground#ffffff
debugConsole.errorForeground#E53935
debugConsole.infoForeground#39ADB5
debugConsole.warningForeground#E2931D
debugToolBar.background#FAFAFA
diffEditor.insertedTextBackground#39ADB520
diffEditor.removedTextBackground#FF537020
dropdown.background#FAFAFA
dropdown.border#00000010
editor.background#FAFAFA
editor.findMatchBackground#00000020
editor.findMatchBorder#80CBC4
editor.findMatchHighlight#90A4AE
editor.findMatchHighlightBackground#00000010
editor.findMatchHighlightBorder#00000030
editor.findRangeHighlightBackground#E2931D30
editor.foreground#90A4AE
editor.lineHighlightBackground#CCD7DA50
editor.lineHighlightBorder#CCD7DA00
editor.rangeHighlightBackground#FFFFFF0d
editor.selectionBackground#80CBC440
editor.selectionHighlightBackground#27272720
editor.wordHighlightBackground#FF537030
editor.wordHighlightStrongBackground#91B85930
editorBracketMatch.background#FAFAFA
editorBracketMatch.border#27272750
editorCursor.foreground#272727
editorError.foreground#E5393570
editorGroup.border#00000020
editorGroup.dropBackground#E5393580
editorGroup.focusedEmptyBorder#E53935
editorGroupHeader.tabsBackground#FAFAFA
editorGutter.addedBackground#91B85960
editorGutter.deletedBackground#E5393560
editorGutter.modifiedBackground#6182B860
editorHoverWidget.background#FAFAFA
editorHoverWidget.border#00000010
editorIndentGuide.activeBackground#B0BEC5
editorIndentGuide.background#B0BEC570
editorInfo.foreground#6182B870
editorLineNumber.activeForeground#758a95
editorLineNumber.foreground#CFD8DC
editorLink.activeForeground#90A4AE
editorMarkerNavigation.background#90A4AE05
editorOverviewRuler.border#FAFAFA
editorOverviewRuler.errorForeground#E5393540
editorOverviewRuler.findMatchForeground#80CBC4
editorOverviewRuler.infoForeground#6182B840
editorOverviewRuler.warningForeground#E2931D40
editorRuler.foreground#B0BEC5
editorSuggestWidget.background#FAFAFA
editorSuggestWidget.border#00000010
editorSuggestWidget.foreground#90A4AE
editorSuggestWidget.highlightForeground#80CBC4
editorSuggestWidget.selectedBackground#CCD7DA50
editorWarning.foreground#E2931D70
editorWhitespace.foreground#90A4AE40
editorWidget.background#FAFAFA
editorWidget.border#80CBC4
editorWidget.resizeBorder#80CBC4
extensionBadge.remoteForeground#90A4AE
extensionButton.prominentBackground#91B85990
extensionButton.prominentForeground#90A4AE
extensionButton.prominentHoverBackground#91B859
focusBorder#FFFFFF00
foreground#90A4AE
gitDecoration.conflictingResourceForeground#E2931D90
gitDecoration.deletedResourceForeground#E5393590
gitDecoration.ignoredResourceForeground#758a9590
gitDecoration.modifiedResourceForeground#6182B890
gitDecoration.untrackedResourceForeground#91B85990
input.background#EEEEEE
input.border#00000010
input.foreground#90A4AE
input.placeholderForeground#90A4AE60
inputOption.activeBackground#90A4AE30
inputOption.activeBorder#90A4AE30
inputValidation.errorBorder#E53935
inputValidation.infoBorder#6182B8
inputValidation.warningBorder#E2931D
list.activeSelectionBackground#FAFAFA
list.activeSelectionForeground#80CBC4
list.dropBackground#E5393580
list.focusBackground#90A4AE20
list.focusForeground#90A4AE
list.highlightForeground#80CBC4
list.hoverBackground#FAFAFA
list.hoverForeground#B1C7D3
list.inactiveSelectionBackground#CCD7DA50
list.inactiveSelectionForeground#80CBC4
listFilterWidget.background#CCD7DA50
listFilterWidget.noMatchesOutline#CCD7DA50
listFilterWidget.outline#CCD7DA50
menu.background#FAFAFA
menu.foreground#90A4AE
menu.selectionBackground#CCD7DA50
menu.selectionBorder#CCD7DA50
menu.selectionForeground#80CBC4
menu.separatorBackground#90A4AE
menubar.selectionBackground#CCD7DA50
menubar.selectionBorder#CCD7DA50
menubar.selectionForeground#80CBC4
notebook.focusedCellBorder#80CBC4
notebook.inactiveFocusedCellBorder#80CBC450
notificationLink.foreground#80CBC4
notifications.background#FAFAFA
notifications.foreground#90A4AE
panel.background#FAFAFA
panel.border#FAFAFA60
panel.dropBackground#90A4AE
panelTitle.activeBorder#80CBC4
panelTitle.activeForeground#000000
panelTitle.inactiveForeground#90A4AE
peekView.border#00000020
peekViewEditor.background#EEEEEE
peekViewEditor.matchHighlightBackground#80CBC440
peekViewEditorGutter.background#EEEEEE
peekViewResult.background#EEEEEE
peekViewResult.matchHighlightBackground#80CBC440
peekViewResult.selectionBackground#758a9570
peekViewTitle.background#EEEEEE
peekViewTitleDescription.foreground#90A4AE60
pickerGroup.border#FFFFFF1a
pickerGroup.foreground#80CBC4
progressBar.background#80CBC4
quickInput.background#FAFAFA
quickInput.foreground#758a95
quickInput.list.focusBackground#90A4AE20
sash.hoverBorder#80CBC450
scrollbar.shadow#00000020
scrollbarSlider.activeBackground#80CBC4
scrollbarSlider.background#90A4AE20
scrollbarSlider.hoverBackground#90A4AE10
selection.background#CCD7DA80
settings.checkboxBackground#FAFAFA
settings.checkboxForeground#90A4AE
settings.dropdownBackground#FAFAFA
settings.dropdownForeground#90A4AE
settings.headerForeground#80CBC4
settings.modifiedItemIndicator#80CBC4
settings.numberInputBackground#FAFAFA
settings.numberInputForeground#90A4AE
settings.textInputBackground#FAFAFA
settings.textInputForeground#90A4AE
sideBar.background#FAFAFA
sideBar.border#FAFAFA60
sideBar.foreground#758a95
sideBarSectionHeader.background#FAFAFA
sideBarSectionHeader.border#FAFAFA60
sideBarTitle.foreground#90A4AE
statusBar.background#FAFAFA
statusBar.border#FAFAFA60
statusBar.debuggingBackground#9C3EDA
statusBar.debuggingForeground#FFFFFF
statusBar.foreground#7E939E
statusBar.noFolderBackground#FAFAFA
statusBarItem.activeBackground#E5393580
statusBarItem.hoverBackground#90A4AE20
statusBarItem.remoteBackground#80CBC4
statusBarItem.remoteForeground#000000
tab.activeBackground#FAFAFA
tab.activeBorder#80CBC4
tab.activeForeground#000000
tab.activeModifiedBorder#758a95
tab.border#FAFAFA
tab.inactiveBackground#FAFAFA
tab.inactiveForeground#758a95
tab.inactiveModifiedBorder#89221f
tab.unfocusedActiveBorder#90A4AE
tab.unfocusedActiveForeground#90A4AE
tab.unfocusedActiveModifiedBorder#b72d2a
tab.unfocusedInactiveModifiedBorder#89221f
terminal.ansiBlack#000000
terminal.ansiBlue#6182B8
terminal.ansiBrightBlack#90A4AE
terminal.ansiBrightBlue#6182B8
terminal.ansiBrightCyan#39ADB5
terminal.ansiBrightGreen#91B859
terminal.ansiBrightMagenta#9C3EDA
terminal.ansiBrightRed#E53935
terminal.ansiBrightWhite#FFFFFF
terminal.ansiBrightYellow#E2931D
terminal.ansiCyan#39ADB5
terminal.ansiGreen#91B859
terminal.ansiMagenta#9C3EDA
terminal.ansiRed#E53935
terminal.ansiWhite#FFFFFF
terminal.ansiYellow#E2931D
terminalCursor.background#000000
terminalCursor.foreground#E2931D
textLink.activeForeground#90A4AE
textLink.foreground#80CBC4
titleBar.activeBackground#FAFAFA
titleBar.activeForeground#90A4AE
titleBar.border#FAFAFA60
titleBar.inactiveBackground#FAFAFA
titleBar.inactiveForeground#758a95
tree.indentGuidesStroke#B0BEC5
widget.shadow#00000020

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
—	#90A4AE	—
string	#91B859	—
punctuation, constant.other.symbol	#39ADB5	—
constant.character.escape, text.html constant.character.entity.named	#90A4AE	—
constant.language.boolean	#FF5370	—
constant.numeric	#F76D47	—
variable, variable.parameter, support.variable, variable.language, support.constant, meta.definition.variable entity.name.function, meta.function-call.arguments	#90A4AE	—
keyword.other	#F76D47	—
keyword, modifier, variable.language.this, support.type.object, constant.language	#39ADB5	—
entity.name.function, support.function	#6182B8	—
storage.type, storage.modifier, storage.control	#9C3EDA	—
support.module, support.node	#E53935	italic
support.type, constant.other.key	#E2931D	—
entity.name.type, entity.other.inherited-class, entity.other	#E2931D	—
comment	#90A4AE	italic
comment punctuation.definition.comment, string.quoted.docstring	#90A4AE	italic
punctuation	#39ADB5	—
entity.name, entity.name.type.class, support.type, support.class, meta.use	#E2931D	—
variable.object.property, meta.field.declaration entity.name.function	#E53935	—
meta.definition.method entity.name.function	#E53935	—
meta.function entity.name.function	#6182B8	—
template.expression.begin, template.expression.end, punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end	#39ADB5	—
meta.embedded, source.groovy.embedded, meta.template.expression	#90A4AE	—
entity.name.tag.yaml	#E53935	—
meta.object-literal.key, meta.object-literal.key string, support.type.property-name.json	#E53935	—
constant.language.json	#39ADB5	—
entity.other.attribute-name.class	#E2931D	—
entity.other.attribute-name.id	#F76D47	—
source.css entity.name.tag	#E2931D	—
support.type.property-name.css	#8796B0	—
meta.tag, punctuation.definition.tag	#39ADB5	—
entity.name.tag	#E53935	—
entity.other.attribute-name	#9C3EDA	—
punctuation.definition.entity.html	#90A4AE	—
markup.heading	#39ADB5	—
text.html.markdown meta.link.inline, meta.link.reference	#E53935	—
text.html.markdown beginning.punctuation.definition.list	#39ADB5	—
markup.italic	#E53935	italic
markup.bold	#E53935	bold
markup.bold markup.italic, markup.italic markup.bold	#E53935	italic bold
markup.fenced_code.block.markdown punctuation.definition.markdown	#91B859	—
markup.inline.raw.string.markdown	#91B859	—
keyword.other.definition.ini	#E53935	—
entity.name.section.group-title.ini	#39ADB5	—
source.cs meta.class.identifier storage.type	#E2931D	—
source.cs meta.method.identifier entity.name.function	#E53935	—
source.cs meta.method-call meta.method, source.cs entity.name.function	#6182B8	—
source.cs storage.type	#E2931D	—
source.cs meta.method.return-type	#E2931D	—
source.cs meta.preprocessor	#90A4AE	—
source.cs entity.name.type.namespace	#90A4AE	—
meta.jsx.children, SXNested	#90A4AE	—
support.class.component	#E2931D	—
source.cpp meta.block variable.other	#90A4AE	—
source.python meta.member.access.python	#E53935	—
source.python meta.function-call.python, meta.function-call.arguments	#6182B8	—
meta.block	#E53935	—
entity.name.function.call	#6182B8	—
source.php support.other.namespace, source.php meta.use support.class	#90A4AE	—
constant.keyword	#39ADB5	italic
entity.name.function	#6182B8	—
—	#90A4AE	—
constant.other.placeholder	#E53935	—
markup.deleted	#E53935	—
markup.inserted	#91B859	—
markup.underline	—	underline
keyword.control	#39ADB5	italic
variable.parameter	—	italic
variable.parameter.function.language.special.self.python	#E53935	italic
constant.character.format.placeholder.other.python	#F76D47	—
markup.quote	#39ADB5	italic
markup.fenced_code.block	#90A4AE90	—
punctuation.definition.quote	#FF5370	—
meta.structure.dictionary.json support.type.property-name.json	#9C3EDA	—
meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#E2931D	—
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	#F76D47	—
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	#E53935	—
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	#6182B8	—
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	#FF5370	—
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	#9C3EDA	—
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	#91B859	—

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}!`;
}