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 — GitHub 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#f9826c
activityBar.background#24292e
activityBar.border#1b1f23
activityBar.foreground#e1e4e8
activityBar.inactiveForeground#6a737d
activityBarBadge.background#0366d6
activityBarBadge.foreground#fff
badge.background#044289
badge.foreground#c8e1ff
breadcrumb.activeSelectionForeground#d1d5da
breadcrumb.focusForeground#e1e4e8
breadcrumb.foreground#959da5
breadcrumbPicker.background#2b3036
button.background#176f2c
button.foreground#dcffe4
button.hoverBackground#22863a
button.secondaryBackground#444d56
button.secondaryForeground#fff
button.secondaryHoverBackground#586069
checkbox.background#444d56
checkbox.border#1b1f23
debugToolBar.background#2b3036
descriptionForeground#959da5
diffEditor.insertedTextBackground#28a74530
diffEditor.removedTextBackground#d73a4930
dropdown.background#2f363d
dropdown.border#1b1f23
dropdown.foreground#e1e4e8
dropdown.listBackground#24292e
editor.background#24292e
editor.findMatchBackground#ffd33d44
editor.findMatchHighlightBackground#ffd33d22
editor.focusedStackFrameHighlightBackground#2b6a3033
editor.foldBackground#58606915
editor.foreground#e1e4e8
editor.inactiveSelectionBackground#3392FF22
editor.lineHighlightBackground#2b3036
editor.linkedEditingBackground#3392FF22
editor.selectionBackground#3392FF44
editor.selectionHighlightBackground#17E5E633
editor.selectionHighlightBorder#17E5E600
editor.stackFrameHighlightBackground#C6902625
editor.wordHighlightBackground#17E5E600
editor.wordHighlightBorder#17E5E699
editor.wordHighlightStrongBackground#17E5E600
editor.wordHighlightStrongBorder#17E5E666
editorBracketHighlight.foreground1#79b8ff
editorBracketHighlight.foreground2#ffab70
editorBracketHighlight.foreground3#b392f0
editorBracketHighlight.foreground4#79b8ff
editorBracketHighlight.foreground5#ffab70
editorBracketHighlight.foreground6#b392f0
editorBracketMatch.background#17E5E650
editorBracketMatch.border#17E5E600
editorCursor.foreground#c8e1ff
editorError.foreground#f97583
editorGroup.border#1b1f23
editorGroupHeader.tabsBackground#1f2428
editorGroupHeader.tabsBorder#1b1f23
editorGutter.addedBackground#28a745
editorGutter.deletedBackground#ea4a5a
editorGutter.modifiedBackground#2188ff
editorIndentGuide.activeBackground#444d56
editorIndentGuide.background#2f363d
editorLineNumber.activeForeground#e1e4e8
editorLineNumber.foreground#444d56
editorOverviewRuler.border#1b1f23
editorWarning.foreground#ffea7f
editorWhitespace.foreground#444d56
editorWidget.background#1f2428
errorForeground#f97583
focusBorder#005cc5
foreground#d1d5da
gitDecoration.addedResourceForeground#34d058
gitDecoration.conflictingResourceForeground#ffab70
gitDecoration.deletedResourceForeground#ea4a5a
gitDecoration.ignoredResourceForeground#6a737d
gitDecoration.modifiedResourceForeground#79b8ff
gitDecoration.submoduleResourceForeground#6a737d
gitDecoration.untrackedResourceForeground#34d058
input.background#2f363d
input.border#1b1f23
input.foreground#e1e4e8
input.placeholderForeground#959da5
list.activeSelectionBackground#39414a
list.activeSelectionForeground#e1e4e8
list.focusBackground#044289
list.hoverBackground#282e34
list.hoverForeground#e1e4e8
list.inactiveFocusBackground#1d2d3e
list.inactiveSelectionBackground#282e34
list.inactiveSelectionForeground#e1e4e8
notificationCenterHeader.background#24292e
notificationCenterHeader.foreground#959da5
notifications.background#2f363d
notifications.border#1b1f23
notifications.foreground#e1e4e8
notificationsErrorIcon.foreground#ea4a5a
notificationsInfoIcon.foreground#79b8ff
notificationsWarningIcon.foreground#ffab70
panel.background#1f2428
panel.border#1b1f23
panelInput.border#2f363d
panelTitle.activeBorder#f9826c
panelTitle.activeForeground#e1e4e8
panelTitle.inactiveForeground#959da5
peekViewEditor.background#1f242888
peekViewEditor.matchHighlightBackground#ffd33d33
peekViewResult.background#1f2428
peekViewResult.matchHighlightBackground#ffd33d33
pickerGroup.border#444d56
pickerGroup.foreground#e1e4e8
progressBar.background#0366d6
quickInput.background#24292e
quickInput.foreground#e1e4e8
scrollbar.shadow#0008
scrollbarSlider.activeBackground#6a737d88
scrollbarSlider.background#6a737d33
scrollbarSlider.hoverBackground#6a737d44
settings.headerForeground#e1e4e8
settings.modifiedItemIndicator#0366d6
sideBar.background#1f2428
sideBar.border#1b1f23
sideBar.foreground#d1d5da
sideBarSectionHeader.background#1f2428
sideBarSectionHeader.border#1b1f23
sideBarSectionHeader.foreground#e1e4e8
sideBarTitle.foreground#e1e4e8
statusBar.background#24292e
statusBar.border#1b1f23
statusBar.debuggingBackground#931c06
statusBar.debuggingForeground#fff
statusBar.foreground#d1d5da
statusBar.noFolderBackground#24292e
statusBarItem.prominentBackground#282e34
statusBarItem.remoteBackground#24292e
statusBarItem.remoteForeground#d1d5da
tab.activeBackground#24292e
tab.activeBorder#24292e
tab.activeBorderTop#f9826c
tab.activeForeground#e1e4e8
tab.border#1b1f23
tab.hoverBackground#24292e
tab.inactiveBackground#1f2428
tab.inactiveForeground#959da5
tab.unfocusedActiveBorder#24292e
tab.unfocusedActiveBorderTop#1b1f23
tab.unfocusedHoverBackground#24292e
terminal.ansiBlack#586069
terminal.ansiBlue#2188ff
terminal.ansiBrightBlack#959da5
terminal.ansiBrightBlue#79b8ff
terminal.ansiBrightCyan#56d4dd
terminal.ansiBrightGreen#85e89d
terminal.ansiBrightMagenta#b392f0
terminal.ansiBrightRed#f97583
terminal.ansiBrightWhite#fafbfc
terminal.ansiBrightYellow#ffea7f
terminal.ansiCyan#39c5cf
terminal.ansiGreen#34d058
terminal.ansiMagenta#b392f0
terminal.ansiRed#ea4a5a
terminal.ansiWhite#d1d5da
terminal.ansiYellow#ffea7f
terminal.foreground#d1d5da
terminal.tab.activeBorder#f9826c
terminalCursor.background#586069
terminalCursor.foreground#79b8ff
textBlockQuote.background#24292e
textBlockQuote.border#444d56
textCodeBlock.background#2f363d
textLink.activeForeground#c8e1ff
textLink.foreground#79b8ff
textPreformat.foreground#d1d5da
textSeparator.foreground#586069
titleBar.activeBackground#24292e
titleBar.activeForeground#e1e4e8
titleBar.border#1b1f23
titleBar.inactiveBackground#1f2428
titleBar.inactiveForeground#959da5
tree.indentGuidesStroke#2f363d
welcomePage.buttonBackground#2f363d
welcomePage.buttonHoverBackground#444d56

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment, string.comment	#6a737d	—
constant, entity.name.constant, variable.other.constant, variable.other.enummember, variable.language	#79b8ff	—
entity, entity.name	#b392f0	—
variable.parameter.function	#e1e4e8	—
entity.name.tag	#85e89d	—
keyword	#f97583	—
storage, storage.type	#f97583	—
storage.modifier.package, storage.modifier.import, storage.type.java	#e1e4e8	—
string, punctuation.definition.string, string punctuation.section.embedded source	#9ecbff	—
support	#79b8ff	—
meta.property-name	#79b8ff	—
variable	#ffab70	—
variable.other	#e1e4e8	—
invalid.broken	#fdaeb7	italic
invalid.deprecated	#fdaeb7	italic
invalid.illegal	#fdaeb7	italic
invalid.unimplemented	#fdaeb7	italic
carriage-return	#24292e	italic underline
message.error	#fdaeb7	—
string variable	#79b8ff	—
source.regexp, string.regexp	#dbedff	—
string.regexp.character-class, string.regexp constant.character.escape, string.regexp source.ruby.embedded, string.regexp string.regexp.arbitrary-repitition	#dbedff	—
string.regexp constant.character.escape	#85e89d	bold
support.constant	#79b8ff	—
support.variable	#79b8ff	—
meta.module-reference	#79b8ff	—
punctuation.definition.list.begin.markdown	#ffab70	—
markup.heading, markup.heading entity.name	#79b8ff	bold
markup.quote	#85e89d	—
markup.italic	#e1e4e8	italic
markup.bold	#e1e4e8	bold
markup.underline	—	underline
markup.strikethrough	—	strikethrough
markup.inline.raw	#79b8ff	—
markup.deleted, meta.diff.header.from-file, punctuation.definition.deleted	#fdaeb7	—
markup.inserted, meta.diff.header.to-file, punctuation.definition.inserted	#85e89d	—
markup.changed, punctuation.definition.changed	#ffab70	—
markup.ignored, markup.untracked	#2f363d	—
meta.diff.range	#b392f0	bold
meta.diff.header	#79b8ff	—
meta.separator	#79b8ff	bold
meta.output	#79b8ff	—
brackethighlighter.tag, brackethighlighter.curly, brackethighlighter.round, brackethighlighter.square, brackethighlighter.angle, brackethighlighter.quote	#d1d5da	—
brackethighlighter.unmatched	#fdaeb7	—
constant.other.reference.link, string.other.link	#dbedff	underline

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