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 — Rosé Pine

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...
~/my-project

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#e0def4
activityBar.background#191724
activityBar.dropBorder#26233a
activityBar.foreground#e0def4
activityBar.inactiveForeground#908caa
activityBarBadge.background#ebbcba
activityBarBadge.foreground#191724
badge.background#ebbcba
badge.foreground#191724
banner.background#1f1d2e
banner.foreground#e0def4
banner.iconForeground#908caa
breadcrumb.activeSelectionForeground#ebbcba
breadcrumb.background#191724
breadcrumb.focusForeground#908caa
breadcrumb.foreground#6e6a86
breadcrumbPicker.background#1f1d2e
button.background#ebbcba
button.foreground#191724
button.hoverBackground#ebbcbae6
button.secondaryBackground#1f1d2e
button.secondaryForeground#e0def4
button.secondaryHoverBackground#26233a
charts.blue#9ccfd8
charts.foreground#e0def4
charts.green#31748f
charts.lines#908caa
charts.orange#ebbcba
charts.purple#c4a7e7
charts.red#eb6f92
charts.yellow#f6c177
checkbox.background#1f1d2e
checkbox.border#6e6a8633
checkbox.foreground#e0def4
debugExceptionWidget.background#1f1d2e
debugExceptionWidget.border#6e6a8633
debugIcon.breakpointCurrentStackframeForeground#908caa
debugIcon.breakpointDisabledForeground#908caa
debugIcon.breakpointForeground#908caa
debugIcon.breakpointStackframeForeground#908caa
debugIcon.breakpointUnverifiedForeground#908caa
debugIcon.continueForeground#908caa
debugIcon.disconnectForeground#908caa
debugIcon.pauseForeground#908caa
debugIcon.restartForeground#908caa
debugIcon.startForeground#908caa
debugIcon.stepBackForeground#908caa
debugIcon.stepIntoForeground#908caa
debugIcon.stepOutForeground#908caa
debugIcon.stepOverForeground#908caa
debugIcon.stopForeground#eb6f92
debugToolBar.background#1f1d2e
debugToolBar.border#26233a
descriptionForeground#908caa
diffEditor.border#26233a
diffEditor.diagonalFill#6e6a8666
diffEditor.insertedLineBackground#9ccfd826
diffEditor.insertedTextBackground#9ccfd826
diffEditor.removedLineBackground#eb6f9226
diffEditor.removedTextBackground#eb6f9226
diffEditorOverview.insertedForeground#9ccfd880
diffEditorOverview.removedForeground#eb6f9280
dropdown.background#1f1d2e
dropdown.border#6e6a8633
dropdown.foreground#e0def4
dropdown.listBackground#1f1d2e
editor.background#191724
editor.findMatchBackground#f6c17733
editor.findMatchBorder#f6c17780
editor.findMatchForeground#e0def4
editor.findMatchHighlightBackground#6e6a8666
editor.findMatchHighlightForeground#e0def4
editor.findRangeHighlightBackground#6e6a8666
editor.findRangeHighlightBorder#0000
editor.focusedStackFrameHighlightBackground#6e6a8633
editor.foldBackground#1f1d2e
editor.foreground#e0def4
editor.hoverHighlightBackground#0000
editor.inactiveSelectionBackground#6e6a861a
editor.inlineValuesBackground#0000
editor.inlineValuesForeground#908caa
editor.lineHighlightBackground#6e6a861a
editor.lineHighlightBorder#0000
editor.linkedEditingBackground#1f1d2e
editor.rangeHighlightBackground#6e6a861a
editor.selectionBackground#6e6a8633
editor.selectionForeground#e0def4
editor.selectionHighlightBackground#6e6a8633
editor.selectionHighlightBorder#191724
editor.snippetFinalTabstopHighlightBackground#6e6a8633
editor.snippetFinalTabstopHighlightBorder#1f1d2e
editor.snippetTabstopHighlightBackground#6e6a8633
editor.snippetTabstopHighlightBorder#1f1d2e
editor.stackFrameHighlightBackground#6e6a8633
editor.symbolHighlightBackground#6e6a8633
editor.symbolHighlightBorder#0000
editor.wordHighlightBackground#6e6a8633
editor.wordHighlightBorder#0000
editor.wordHighlightStrongBackground#6e6a8633
editor.wordHighlightStrongBorder#6e6a8633
editorBracketHighlight.foreground1#eb6f9280
editorBracketHighlight.foreground2#31748f80
editorBracketHighlight.foreground3#f6c17780
editorBracketHighlight.foreground4#9ccfd880
editorBracketHighlight.foreground5#ebbcba80
editorBracketHighlight.foreground6#c4a7e780
editorBracketMatch.background#0000
editorBracketMatch.border#908caa
editorBracketPairGuide.activeBackground1#31748f
editorBracketPairGuide.activeBackground2#ebbcba
editorBracketPairGuide.activeBackground3#c4a7e7
editorBracketPairGuide.activeBackground4#9ccfd8
editorBracketPairGuide.activeBackground5#f6c177
editorBracketPairGuide.activeBackground6#eb6f92
editorBracketPairGuide.background1#31748f80
editorBracketPairGuide.background2#ebbcba80
editorBracketPairGuide.background3#c4a7e780
editorBracketPairGuide.background4#9ccfd880
editorBracketPairGuide.background5#f6c17780
editorBracketPairGuide.background6#eb6f9280
editorCodeLens.foreground#ebbcba
editorCursor.background#e0def4
editorCursor.foreground#6e6a86
editorError.border#0000
editorError.foreground#eb6f92
editorGhostText.foreground#908caa
editorGroup.border#0000
editorGroup.dropBackground#1f1d2e
editorGroup.emptyBackground#0000
editorGroup.focusedEmptyBorder#0000
editorGroupHeader.noTabsBackground#0000
editorGroupHeader.tabsBackground#0000
editorGroupHeader.tabsBorder#0000
editorGutter.addedBackground#9ccfd8
editorGutter.background#191724
editorGutter.commentRangeForeground#26233a
editorGutter.deletedBackground#eb6f92
editorGutter.foldingControlForeground#c4a7e7
editorGutter.modifiedBackground#ebbcba
editorHint.border#0000
editorHint.foreground#908caa
editorHoverWidget.background#1f1d2e
editorHoverWidget.border#6e6a8680
editorHoverWidget.foreground#908caa
editorHoverWidget.highlightForeground#e0def4
editorHoverWidget.statusBarBackground#0000
editorIndentGuide.activeBackground#6e6a86
editorIndentGuide.background#6e6a8666
editorInfo.border#26233a
editorInfo.foreground#9ccfd8
editorInlayHint.background#26233a
editorInlayHint.foreground#908caa
editorInlayHint.parameterBackground#26233a
editorInlayHint.parameterForeground#c4a7e7
editorInlayHint.typeBackground#26233a
editorInlayHint.typeForeground#9ccfd8
editorLightBulb.foreground#31748f
editorLightBulbAutoFix.foreground#ebbcba
editorLineNumber.activeForeground#e0def4
editorLineNumber.foreground#908caa
editorLink.activeForeground#ebbcba
editorMarkerNavigation.background#1f1d2e
editorMarkerNavigationError.background#1f1d2e
editorMarkerNavigationInfo.background#1f1d2e
editorMarkerNavigationWarning.background#1f1d2e
editorOverviewRuler.addedForeground#9ccfd880
editorOverviewRuler.background#191724
editorOverviewRuler.border#6e6a8666
editorOverviewRuler.bracketMatchForeground#908caa
editorOverviewRuler.commentForeground#908caa80
editorOverviewRuler.commentUnresolvedForeground#f6c17780
editorOverviewRuler.commonContentForeground#6e6a861a
editorOverviewRuler.currentContentForeground#6e6a8633
editorOverviewRuler.deletedForeground#eb6f9280
editorOverviewRuler.errorForeground#eb6f9280
editorOverviewRuler.findMatchForeground#6e6a8666
editorOverviewRuler.incomingContentForeground#c4a7e780
editorOverviewRuler.infoForeground#9ccfd880
editorOverviewRuler.modifiedForeground#ebbcba80
editorOverviewRuler.rangeHighlightForeground#6e6a8666
editorOverviewRuler.selectionHighlightForeground#6e6a8666
editorOverviewRuler.warningForeground#f6c17780
editorOverviewRuler.wordHighlightForeground#6e6a8633
editorOverviewRuler.wordHighlightStrongForeground#6e6a8666
editorPane.background#0000
editorRuler.foreground#6e6a8666
editorSuggestWidget.background#1f1d2e
editorSuggestWidget.border#0000
editorSuggestWidget.focusHighlightForeground#ebbcba
editorSuggestWidget.foreground#908caa
editorSuggestWidget.highlightForeground#ebbcba
editorSuggestWidget.selectedBackground#6e6a8633
editorSuggestWidget.selectedForeground#e0def4
editorSuggestWidget.selectedIconForeground#e0def4
editorUnnecessaryCode.border#0000
editorUnnecessaryCode.opacity#e0def480
editorWarning.border#0000
editorWarning.foreground#f6c177
editorWhitespace.foreground#6e6a86
editorWidget.background#1f1d2e
editorWidget.border#26233a
editorWidget.foreground#908caa
editorWidget.resizeBorder#6e6a86
errorForeground#eb6f92
extensionBadge.remoteBackground#c4a7e7
extensionBadge.remoteForeground#191724
extensionButton.prominentBackground#ebbcba
extensionButton.prominentForeground#191724
extensionButton.prominentHoverBackground#ebbcbae6
extensionIcon.preReleaseForeground#31748f
extensionIcon.starForeground#ebbcba
extensionIcon.verifiedForeground#c4a7e7
focusBorder#6e6a8633
foreground#e0def4
git.blame.editorDecorationForeground#6e6a86
gitDecoration.addedResourceForeground#9ccfd8
gitDecoration.conflictingResourceForeground#eb6f92
gitDecoration.deletedResourceForeground#908caa
gitDecoration.ignoredResourceForeground#6e6a86
gitDecoration.modifiedResourceForeground#ebbcba
gitDecoration.renamedResourceForeground#31748f
gitDecoration.stageDeletedResourceForeground#eb6f92
gitDecoration.stageModifiedResourceForeground#c4a7e7
gitDecoration.submoduleResourceForeground#f6c177
gitDecoration.untrackedResourceForeground#f6c177
icon.foreground#908caa
input.background#26233a80
input.border#6e6a8633
input.foreground#e0def4
input.placeholderForeground#908caa
inputOption.activeBackground#ebbcba26
inputOption.activeBorder#0000
inputOption.activeForeground#ebbcba
inputValidation.errorBackground#1f1d2e
inputValidation.errorBorder#6e6a8666
inputValidation.errorForeground#eb6f92
inputValidation.infoBackground#1f1d2e
inputValidation.infoBorder#6e6a8666
inputValidation.infoForeground#9ccfd8
inputValidation.warningBackground#1f1d2e
inputValidation.warningBorder#6e6a8666
inputValidation.warningForeground#9ccfd880
keybindingLabel.background#26233a
keybindingLabel.border#6e6a8666
keybindingLabel.bottomBorder#6e6a8666
keybindingLabel.foreground#c4a7e7
keybindingTable.headerBackground#26233a
keybindingTable.rowsBackground#1f1d2e
list.activeSelectionBackground#6e6a8633
list.activeSelectionForeground#e0def4
list.deemphasizedForeground#908caa
list.dropBackground#1f1d2e
list.errorForeground#eb6f92
list.filterMatchBackground#1f1d2e
list.filterMatchBorder#ebbcba
list.focusBackground#6e6a8666
list.focusForeground#e0def4
list.focusOutline#6e6a8633
list.highlightForeground#ebbcba
list.hoverBackground#6e6a861a
list.hoverForeground#e0def4
list.inactiveFocusBackground#6e6a861a
list.inactiveSelectionBackground#1f1d2e
list.inactiveSelectionForeground#e0def4
list.invalidItemForeground#eb6f92
list.warningForeground#f6c177
listFilterWidget.background#1f1d2e
listFilterWidget.noMatchesOutline#eb6f92
listFilterWidget.outline#26233a
menu.background#1f1d2e
menu.border#6e6a861a
menu.foreground#e0def4
menu.selectionBackground#6e6a8633
menu.selectionBorder#26233a
menu.selectionForeground#e0def4
menu.separatorBackground#6e6a8666
menubar.selectionBackground#6e6a8633
menubar.selectionBorder#6e6a861a
menubar.selectionForeground#e0def4
merge.border#26233a
merge.commonContentBackground#6e6a8633
merge.commonHeaderBackground#6e6a8633
merge.currentContentBackground#f6c17780
merge.currentHeaderBackground#f6c17780
merge.incomingContentBackground#9ccfd880
merge.incomingHeaderBackground#9ccfd880
minimap.background#1f1d2e
minimap.errorHighlight#eb6f9280
minimap.findMatchHighlight#6e6a8633
minimap.selectionHighlight#6e6a8633
minimap.warningHighlight#f6c17780
minimapGutter.addedBackground#9ccfd8
minimapGutter.deletedBackground#eb6f92
minimapGutter.modifiedBackground#ebbcba
minimapSlider.activeBackground#6e6a8666
minimapSlider.background#6e6a8633
minimapSlider.hoverBackground#6e6a8633
notebook.cellBorderColor#9ccfd880
notebook.cellEditorBackground#1f1d2e
notebook.cellHoverBackground#26233a80
notebook.focusedCellBackground#6e6a861a
notebook.focusedCellBorder#9ccfd8
notebook.outputContainerBackgroundColor#6e6a861a
notificationCenter.border#6e6a8633
notificationCenterHeader.background#1f1d2e
notificationCenterHeader.foreground#908caa
notificationLink.foreground#c4a7e7
notifications.background#1f1d2e
notifications.border#6e6a8633
notifications.foreground#e0def4
notificationsErrorIcon.foreground#eb6f92
notificationsInfoIcon.foreground#9ccfd8
notificationsWarningIcon.foreground#f6c177
notificationToast.border#6e6a8633
panel.background#1f1d2e
panel.border#0000
panel.dropBorder#26233a
panelInput.border#1f1d2e
panelSection.dropBackground#6e6a8633
panelSectionHeader.background#1f1d2e
panelSectionHeader.foreground#e0def4
panelTitle.activeBorder#6e6a8666
panelTitle.activeForeground#e0def4
panelTitle.inactiveForeground#908caa
peekView.border#26233a
peekViewEditor.background#1f1d2e
peekViewEditor.matchHighlightBackground#6e6a8666
peekViewResult.background#1f1d2e
peekViewResult.fileForeground#908caa
peekViewResult.lineForeground#908caa
peekViewResult.matchHighlightBackground#6e6a8666
peekViewResult.selectionBackground#6e6a8633
peekViewResult.selectionForeground#e0def4
peekViewTitle.background#26233a
peekViewTitleDescription.foreground#908caa
pickerGroup.border#6e6a8666
pickerGroup.foreground#c4a7e7
ports.iconRunningProcessForeground#ebbcba
problemsErrorIcon.foreground#eb6f92
problemsInfoIcon.foreground#9ccfd8
problemsWarningIcon.foreground#f6c177
progressBar.background#ebbcba
quickInput.background#1f1d2e
quickInput.foreground#908caa
quickInputList.focusBackground#6e6a8633
quickInputList.focusForeground#e0def4
quickInputList.focusIconForeground#e0def4
scrollbar.shadow#1f1d2e4d
scrollbarSlider.activeBackground#31748f80
scrollbarSlider.background#6e6a8633
scrollbarSlider.hoverBackground#6e6a8666
searchEditor.findMatchBackground#6e6a8633
selection.background#6e6a8666
settings.focusedRowBackground#1f1d2e
settings.focusedRowBorder#6e6a8633
settings.headerForeground#e0def4
settings.modifiedItemIndicator#ebbcba
settings.rowHoverBackground#1f1d2e
sideBar.background#191724
sideBar.dropBackground#1f1d2e
sideBar.foreground#908caa
sideBarSectionHeader.background#0000
sideBarSectionHeader.border#6e6a8633
statusBar.background#191724
statusBar.debuggingBackground#c4a7e7
statusBar.debuggingForeground#191724
statusBar.foreground#908caa
statusBar.noFolderBackground#191724
statusBar.noFolderForeground#908caa
statusBarItem.activeBackground#6e6a8666
statusBarItem.errorBackground#191724
statusBarItem.errorForeground#eb6f92
statusBarItem.hoverBackground#6e6a8633
statusBarItem.prominentBackground#26233a
statusBarItem.prominentForeground#e0def4
statusBarItem.prominentHoverBackground#6e6a8633
statusBarItem.remoteBackground#191724
statusBarItem.remoteForeground#f6c177
symbolIcon.arrayForeground#908caa
symbolIcon.classForeground#908caa
symbolIcon.colorForeground#908caa
symbolIcon.constantForeground#908caa
symbolIcon.constructorForeground#908caa
symbolIcon.enumeratorForeground#908caa
symbolIcon.enumeratorMemberForeground#908caa
symbolIcon.eventForeground#908caa
symbolIcon.fieldForeground#908caa
symbolIcon.fileForeground#908caa
symbolIcon.folderForeground#908caa
symbolIcon.functionForeground#908caa
symbolIcon.interfaceForeground#908caa
symbolIcon.keyForeground#908caa
symbolIcon.keywordForeground#908caa
symbolIcon.methodForeground#908caa
symbolIcon.moduleForeground#908caa
symbolIcon.namespaceForeground#908caa
symbolIcon.nullForeground#908caa
symbolIcon.numberForeground#908caa
symbolIcon.objectForeground#908caa
symbolIcon.operatorForeground#908caa
symbolIcon.packageForeground#908caa
symbolIcon.propertyForeground#908caa
symbolIcon.referenceForeground#908caa
symbolIcon.snippetForeground#908caa
symbolIcon.stringForeground#908caa
symbolIcon.structForeground#908caa
symbolIcon.textForeground#908caa
symbolIcon.typeParameterForeground#908caa
symbolIcon.unitForeground#908caa
symbolIcon.variableForeground#908caa
tab.activeBackground#6e6a861a
tab.activeForeground#e0def4
tab.activeModifiedBorder#9ccfd8
tab.border#0000
tab.hoverBackground#6e6a8633
tab.inactiveBackground#0000
tab.inactiveForeground#908caa
tab.inactiveModifiedBorder#9ccfd880
tab.lastPinnedBorder#6e6a86
tab.unfocusedActiveBackground#0000
tab.unfocusedHoverBackground#0000
tab.unfocusedInactiveBackground#0000
tab.unfocusedInactiveModifiedBorder#9ccfd880
terminal.ansiBlack#26233a
terminal.ansiBlue#9ccfd8
terminal.ansiBrightBlack#908caa
terminal.ansiBrightBlue#9ccfd8
terminal.ansiBrightCyan#ebbcba
terminal.ansiBrightGreen#31748f
terminal.ansiBrightMagenta#c4a7e7
terminal.ansiBrightRed#eb6f92
terminal.ansiBrightWhite#e0def4
terminal.ansiBrightYellow#f6c177
terminal.ansiCyan#ebbcba
terminal.ansiGreen#31748f
terminal.ansiMagenta#c4a7e7
terminal.ansiRed#eb6f92
terminal.ansiWhite#e0def4
terminal.ansiYellow#f6c177
terminal.dropBackground#6e6a8633
terminal.foreground#e0def4
terminal.selectionBackground#6e6a8633
terminal.tab.activeBorder#e0def4
terminalCursor.background#e0def4
terminalCursor.foreground#6e6a86
textBlockQuote.background#1f1d2e
textBlockQuote.border#6e6a8633
textCodeBlock.background#1f1d2e
textLink.activeForeground#c4a7e7e6
textLink.foreground#c4a7e7
textPreformat.foreground#f6c177
textSeparator.foreground#908caa
titleBar.activeBackground#191724
titleBar.activeForeground#908caa
titleBar.inactiveBackground#1f1d2e
titleBar.inactiveForeground#908caa
toolbar.activeBackground#6e6a8666
toolbar.hoverBackground#6e6a8633
tree.indentGuidesStroke#908caa
walkThrough.embeddedEditorBackground#191724
welcomePage.background#191724
welcomePage.buttonBackground#1f1d2e
welcomePage.buttonHoverBackground#26233a
widget.shadow#1f1d2e4d
window.activeBorder#1f1d2e
window.inactiveBorder#1f1d2e

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment	#6e6a86	italic
constant	#31748f	—
constant.numeric, constant.language	#ebbcba	—
entity.name	#ebbcba	—
entity.name.section, entity.name.tag, entity.name.namespace, entity.name.type	#9ccfd8	—
entity.other.attribute-name, entity.other.inherited-class	#c4a7e7	italic
invalid	#eb6f92	—
invalid.deprecated	#908caa	—
keyword, variable.language.this	#31748f	—
markup.inserted.diff	#9ccfd8	—
markup.deleted.diff	#eb6f92	—
markup.heading	—	bold
markup.bold.markdown	—	bold
markup.italic.markdown	—	italic
meta.diff.range	#c4a7e7	—
meta.tag, meta.brace	#e0def4	—
meta.import, meta.export	#31748f	—
meta.directive.vue	#c4a7e7	italic
meta.property-name.css	#9ccfd8	—
meta.property-value.css	#f6c177	—
meta.tag.other.html	#908caa	—
punctuation	#908caa	—
punctuation.accessor	#31748f	—
punctuation.definition.string	#f6c177	—
punctuation.definition.tag	#6e6a86	—
storage.type, storage.modifier	#31748f	—
string	#f6c177	—
support	#9ccfd8	—
support.constant	#f6c177	—
support.function	#eb6f92	italic
variable	#ebbcba	italic
variable.other, variable.language, variable.function, variable.argument	#e0def4	—
variable.parameter	#c4a7e7	—

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