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 — Ayu Dark

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#e6b450b3
activityBar.background#0b0e14
activityBar.border#0b0e14
activityBar.foreground#565b66cc
activityBar.inactiveForeground#565b6699
activityBarBadge.background#e6b450
activityBarBadge.foreground#0b0e14
badge.background#e6b45033
badge.foreground#e6b450
button.background#e6b450
button.foreground#0b0e14
button.hoverBackground#e1af4b
button.secondaryBackground#565b6633
button.secondaryForeground#bfbdb6
button.secondaryHoverBackground#565b6680
debugConsoleInputIcon.foreground#e6b450
debugExceptionWidget.background#0f131a
debugExceptionWidget.border#11151c
debugIcon.breakpointDisabledForeground#f2966880
debugIcon.breakpointForeground#f29668
debugToolBar.background#0f131a
descriptionForeground#565b66
diffEditor.diagonalFill#11151c
diffEditor.insertedTextBackground#7fd9621f
diffEditor.removedTextBackground#f26d781f
dropdown.background#0d1017
dropdown.border#565b6645
dropdown.foreground#565b66
editor.background#0b0e14
editor.findMatchBackground#6c5980
editor.findMatchBorder#6c5980
editor.findMatchHighlightBackground#6c598066
editor.findMatchHighlightBorder#5f4c7266
editor.findRangeHighlightBackground#6c598040
editor.foreground#bfbdb6
editor.inactiveSelectionBackground#409fff21
editor.lineHighlightBackground#131721
editor.rangeHighlightBackground#6c598033
editor.selectionBackground#409fff4d
editor.selectionHighlightBackground#7fd96226
editor.selectionHighlightBorder#7fd96200
editor.snippetTabstopHighlightBackground#7fd96233
editor.wordHighlightBackground#73b8ff14
editor.wordHighlightBorder#73b8ff80
editor.wordHighlightStrongBackground#7fd96214
editor.wordHighlightStrongBorder#7fd96280
editorBracketMatch.background#6c73804d
editorBracketMatch.border#6c73804d
editorCodeLens.foreground#acb6bf8c
editorCursor.foreground#e6b450
editorError.foreground#d95757
editorGroup.background#0f131a
editorGroup.border#11151c
editorGroupHeader.noTabsBackground#0b0e14
editorGroupHeader.tabsBackground#0b0e14
editorGroupHeader.tabsBorder#0b0e14
editorGutter.addedBackground#7fd962cc
editorGutter.deletedBackground#f26d78cc
editorGutter.modifiedBackground#73b8ffcc
editorHoverWidget.background#0f131a
editorHoverWidget.border#11151c
editorIndentGuide.activeBackground#6c738080
editorIndentGuide.background#6c738033
editorLineNumber.activeForeground#6c7380e6
editorLineNumber.foreground#6c738099
editorLink.activeForeground#e6b450
editorMarkerNavigation.background#0f131a
editorOverviewRuler.addedForeground#7fd962
editorOverviewRuler.border#11151c
editorOverviewRuler.bracketMatchForeground#6c7380b3
editorOverviewRuler.deletedForeground#f26d78
editorOverviewRuler.errorForeground#d95757
editorOverviewRuler.findMatchForeground#6c5980
editorOverviewRuler.modifiedForeground#73b8ff
editorOverviewRuler.warningForeground#e6b450
editorOverviewRuler.wordHighlightForeground#73b8ff66
editorOverviewRuler.wordHighlightStrongForeground#7fd96266
editorRuler.foreground#6c738033
editorSuggestWidget.background#0f131a
editorSuggestWidget.border#11151c
editorSuggestWidget.highlightForeground#e6b450
editorSuggestWidget.selectedBackground#47526640
editorWarning.foreground#e6b450
editorWhitespace.foreground#6c738099
editorWidget.background#0f131a
editorWidget.border#11151c
errorForeground#d95757
extensionButton.prominentBackground#e6b450
extensionButton.prominentForeground#0d1017
extensionButton.prominentHoverBackground#e1af4b
focusBorder#e6b450b3
foreground#565b66
gitDecoration.conflictingResourceForeground
gitDecoration.deletedResourceForeground#f26d78b3
gitDecoration.ignoredResourceForeground#565b6680
gitDecoration.modifiedResourceForeground#73b8ffb3
gitDecoration.submoduleResourceForeground#d2a6ffb3
gitDecoration.untrackedResourceForeground#7fd962b3
icon.foreground#565b66
input.background#0d1017
input.border#565b6645
input.foreground#bfbdb6
input.placeholderForeground#565b6680
inputOption.activeBackground#e6b45033
inputOption.activeBorder#e6b4504d
inputOption.activeForeground#e6b450
inputValidation.errorBackground#0d1017
inputValidation.errorBorder#d95757
inputValidation.infoBackground#0b0e14
inputValidation.infoBorder#39bae6
inputValidation.warningBackground#0b0e14
inputValidation.warningBorder#ffb454
keybindingLabel.background#565b661a
keybindingLabel.border#bfbdb61a
keybindingLabel.bottomBorder#bfbdb61a
keybindingLabel.foreground#bfbdb6
list.activeSelectionBackground#47526640
list.activeSelectionForeground#bfbdb6
list.deemphasizedForeground#d95757
list.errorForeground#d95757
list.filterMatchBackground#5f4c7266
list.filterMatchBorder#6c598066
list.focusBackground#47526640
list.focusForeground#bfbdb6
list.focusOutline#47526640
list.highlightForeground#e6b450
list.hoverBackground#47526640
list.inactiveSelectionBackground#47526633
list.inactiveSelectionForeground#565b66
list.invalidItemForeground#565b664d
listFilterWidget.background#0f131a
listFilterWidget.noMatchesOutline#d95757
listFilterWidget.outline#e6b450
minimap.background#0b0e14
minimap.errorHighlight#d95757
minimap.findMatchHighlight#6c5980
minimap.selectionHighlight#409fff4d
minimapGutter.addedBackground#7fd962
minimapGutter.deletedBackground#f26d78
minimapGutter.modifiedBackground#73b8ff
panel.background#0b0e14
panel.border#11151c
panelTitle.activeBorder#e6b450
panelTitle.activeForeground#bfbdb6
panelTitle.inactiveForeground#565b66
peekView.border#47526640
peekViewEditor.background#0f131a
peekViewEditor.matchHighlightBackground#6c598066
peekViewEditor.matchHighlightBorder#5f4c7266
peekViewResult.background#0f131a
peekViewResult.fileForeground#bfbdb6
peekViewResult.lineForeground#565b66
peekViewResult.matchHighlightBackground#6c598066
peekViewResult.selectionBackground#47526640
peekViewTitle.background#47526640
peekViewTitleDescription.foreground#565b66
peekViewTitleLabel.foreground#bfbdb6
pickerGroup.border#11151c
pickerGroup.foreground#565b6680
progressBar.background#e6b450
scrollbar.shadow#11151c00
scrollbarSlider.activeBackground#565b66b3
scrollbarSlider.background#565b6666
scrollbarSlider.hoverBackground#565b6699
selection.background#409fff4d
settings.headerForeground#bfbdb6
settings.modifiedItemIndicator#73b8ff
sideBar.background#0b0e14
sideBar.border#0b0e14
sideBarSectionHeader.background#0b0e14
sideBarSectionHeader.border#0b0e14
sideBarSectionHeader.foreground#565b66
sideBarTitle.foreground#565b66
statusBar.background#0b0e14
statusBar.border#0b0e14
statusBar.debuggingBackground#f29668
statusBar.debuggingForeground#0d1017
statusBar.foreground#565b66
statusBar.noFolderBackground#0f131a
statusBarItem.activeBackground#565b6633
statusBarItem.hoverBackground#565b6633
statusBarItem.prominentBackground#11151c
statusBarItem.prominentHoverBackground#00000030
statusBarItem.remoteBackground#e6b450
statusBarItem.remoteForeground#0d1017
tab.activeBackground#0b0e14
tab.activeBorder#e6b450
tab.activeForeground#bfbdb6
tab.border#0b0e14
tab.inactiveBackground#0b0e14
tab.inactiveForeground#565b66
tab.unfocusedActiveBorder#565b66
tab.unfocusedActiveForeground#565b66
tab.unfocusedInactiveForeground#565b66
terminal.ansiBlack#11151c
terminal.ansiBlue#53bdfa
terminal.ansiBrightBlack#686868
terminal.ansiBrightBlue#59c2ff
terminal.ansiBrightCyan#95e6cb
terminal.ansiBrightGreen#aad94c
terminal.ansiBrightMagenta#d2a6ff
terminal.ansiBrightRed#f07178
terminal.ansiBrightWhite#ffffff
terminal.ansiBrightYellow#ffb454
terminal.ansiCyan#90e1c6
terminal.ansiGreen#7fd962
terminal.ansiMagenta#cda1fa
terminal.ansiRed#ea6c73
terminal.ansiWhite#c7c7c7
terminal.ansiYellow#f9af4f
terminal.background#0b0e14
terminal.foreground#bfbdb6
textBlockQuote.background#0f131a
textLink.activeForeground#e6b450
textLink.foreground#e6b450
textPreformat.foreground#bfbdb6
titleBar.activeBackground#0b0e14
titleBar.activeForeground#bfbdb6
titleBar.border#0b0e14
titleBar.inactiveBackground#0b0e14
titleBar.inactiveForeground#565b66
tree.indentGuidesStroke#6c738080
walkThrough.embeddedEditorBackground#0f131a
welcomePage.buttonBackground#e6b45066
welcomePage.progress.background#131721
welcomePage.tileBackground#0b0e14
welcomePage.tileShadow#00000080
widget.shadow#00000080

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
—	#bfbdb6	—
comment	#acb6bf8c	italic
string, constant.other.symbol	#aad94c	—
string.regexp, constant.character, constant.other	#95e6cb	—
constant.numeric	#d2a6ff	—
constant.language	#d2a6ff	—
variable, variable.parameter.function-call	#bfbdb6	—
variable.member	#f07178	—
variable.language	#39bae6	italic
storage	#ff8f40	—
keyword	#ff8f40	—
keyword.operator	#f29668	—
punctuation.separator, punctuation.terminator	#bfbdb6b3	—
punctuation.section	#bfbdb6	—
punctuation.accessor	#f29668	—
punctuation.definition.template-expression	#ff8f40	—
punctuation.section.embedded	#ff8f40	—
meta.embedded	#bfbdb6	—
source.java storage.type, source.haskell storage.type, source.c storage.type	#59c2ff	—
entity.other.inherited-class	#39bae6	—
storage.type.function	#ff8f40	—
source.java storage.type.primitive	#39bae6	—
entity.name.function	#ffb454	—
variable.parameter, meta.parameter	#d2a6ff	—
variable.function, variable.annotation, meta.function-call.generic, support.function.go	#ffb454	—
support.function, support.macro	#f07178	—
entity.name.import, entity.name.package	#aad94c	—
entity.name	#59c2ff	—
entity.name.tag, meta.tag.sgml	#39bae6	—
support.class.component	#59c2ff	—
punctuation.definition.tag.end, punctuation.definition.tag.begin, punctuation.definition.tag	#39bae680	—
entity.other.attribute-name	#ffb454	—
support.constant	#f29668	italic
support.type, support.class, source.go storage.type	#39bae6	—
meta.decorator variable.other, meta.decorator punctuation.decorator, storage.type.annotation	#e6b673	—
invalid	#d95757	—
meta.diff, meta.diff.header	#c594c5	—
source.ruby variable.other.readwrite	#ffb454	—
source.css entity.name.tag, source.sass entity.name.tag, source.scss entity.name.tag, source.less entity.name.tag, source.stylus entity.name.tag	#59c2ff	—
source.css support.type, source.sass support.type, source.scss support.type, source.less support.type, source.stylus support.type	#acb6bf8c	—
support.type.property-name	#39bae6	normal
constant.numeric.line-number.find-in-files - match	#acb6bf8c	—
constant.numeric.line-number.match	#ff8f40	—
entity.name.filename.find-in-files	#aad94c	—
message.error	#d95757	—
markup.heading, markup.heading entity.name	#aad94c	bold
markup.underline.link, string.other.link	#39bae6	—
markup.italic	#f07178	italic
markup.bold	#f07178	bold
markup.italic markup.bold, markup.bold markup.italic	—	bold italic
markup.raw	—	—
markup.raw.inline	—	—
meta.separator	#acb6bf8c	bold
markup.quote	#95e6cb	italic
markup.list punctuation.definition.list.begin	#ffb454	—
markup.inserted	#7fd962	—
markup.changed	#73b8ff	—
markup.deleted	#f26d78	—
markup.strike	#e6b673	—
markup.table	#39bae6	—
text.html.markdown markup.inline.raw	#f29668	—
text.html.markdown meta.dummy.line-break	#acb6bf8c	—
punctuation.definition.markdown	#acb6bf8c	—

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