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 — Slack Ochin

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.background#161F26
activityBar.dropBackground#FFF
activityBar.foreground#FFF
activityBarBadge.background#8AE773
activityBarBadge.foreground#FFF
badge.background#8AE773
breadcrumb.focusForeground#475663
breadcrumb.foreground#161F26
button.background#475663
button.foreground#FFF
button.hoverBackground#161F26
debugExceptionWidget.background#AED4FB
debugExceptionWidget.border#161F26
debugToolBar.background#161F26
dropdown.background#FFF
dropdown.border#DCDEDF
dropdown.foreground#DCDEDF
dropdown.listBackground#FFF
editor.background#FFF
editor.findMatchBackground#AED4FB
editor.foreground#000
editor.lineHighlightBackground#EEEEEE
editor.selectionBackground#AED4FB
editor.wordHighlightBackground#AED4FB
editor.wordHighlightStrongBackground#EEEEEE
editorActiveLineNumber.foreground#475663
editorGroup.emptyBackground#2D3E4C
editorGroup.focusedEmptyBorder#2D3E4C
editorGroupHeader.tabsBackground#2D3E4C
editorHint.border#F9F9F9
editorHint.foreground#F9F9F9
editorIndentGuide.activeBackground#dbdbdb
editorIndentGuide.background#F3F3F3
editorLineNumber.foreground#b9b9b9
editorMarkerNavigation.background#F9F9F9
editorMarkerNavigationError.background#F44C5E
editorMarkerNavigationInfo.background#6182b8
editorMarkerNavigationWarning.background#F6B555
editorPane.background#2D3E4C
editorSuggestWidget.foreground#2D3E4C
editorSuggestWidget.highlightForeground#2D3E4C
editorSuggestWidget.selectedBackground#b9b9b9
editorWidget.background#F9F9F9
editorWidget.border#dbdbdb
extensionButton.prominentBackground#475663
extensionButton.prominentForeground#F6F6F6
extensionButton.prominentHoverBackground#161F26
focusBorder#161F26
foreground#616161
gitDecoration.addedResourceForeground#ECB22E
gitDecoration.conflictingResourceForeground#FFF
gitDecoration.deletedResourceForeground#FFF
gitDecoration.ignoredResourceForeground#877583
gitDecoration.modifiedResourceForeground#ECB22E
gitDecoration.untrackedResourceForeground#ECB22E
input.background#FFF
input.border#161F26
input.foreground#000
input.placeholderForeground#a0a0a0
inputOption.activeBorder#3E313C
inputValidation.errorBackground#F44C5E
inputValidation.errorForeground#FFF
inputValidation.infoBackground#6182b8
inputValidation.infoForeground#FFF
inputValidation.warningBackground#F6B555
inputValidation.warningForeground#000
list.activeSelectionBackground#5899C5
list.activeSelectionForeground#fff
list.focusBackground#d5e1ea
list.focusForeground#fff
list.highlightForeground#2D3E4C
list.hoverBackground#d5e1ea
list.hoverForeground#fff
list.inactiveFocusBackground#161F26
list.inactiveSelectionBackground#5899C5
list.inactiveSelectionForeground#fff
list.invalidItemForeground#fff
menu.background#161F26
menu.foreground#F9FAFA
menu.separatorBackground#F9FAFA
notificationCenter.border#161F26
notificationCenterHeader.foreground#FFF
notificationLink.foreground#FFF
notifications.background#161F26
notifications.border#161F26
notifications.foreground#FFF
notificationToast.border#161F26
panel.border#2D3E4C
panelTitle.activeForeground#161F26
progressBar.background#8AE773
scrollbar.shadow#ffffff00
scrollbarSlider.activeBackground#161F267e
scrollbarSlider.background#161F267e
scrollbarSlider.hoverBackground#161F267e
settings.dropdownBorder#161F26
settings.dropdownForeground#161F26
settings.headerForeground#161F26
sideBar.background#2D3E4C
sideBar.foreground#DCDEDF
sideBarSectionHeader.background#161F26
sideBarSectionHeader.foreground#FFF
sideBarTitle.foreground#FFF
statusBar.background#5899C5
statusBar.debuggingBackground#8AE773
statusBar.foreground#FFF
statusBar.noFolderBackground#161F26
tab.activeBackground#FFF
tab.activeForeground#000
tab.border#F3F3F3
tab.inactiveBackground#F3F3F3
tab.inactiveForeground#686868
terminal.ansiBlack#000000
terminal.ansiBlue#6182b8
terminal.ansiBrightBlack#90a4ae
terminal.ansiBrightBlue#6182b8
terminal.ansiBrightCyan#39adb5
terminal.ansiBrightGreen#91b859
terminal.ansiBrightMagenta#7c4dff
terminal.ansiBrightRed#e53935
terminal.ansiBrightWhite#ffffff
terminal.ansiBrightYellow#ffb62c
terminal.ansiCyan#39adb5
terminal.ansiGreen#91b859
terminal.ansiMagenta#7c4dff
terminal.ansiRed#e53935
terminal.ansiWhite#ffffff
terminal.ansiYellow#ffb62c
terminal.border#2D3E4C
terminal.foreground#161F26
terminal.selectionBackground#0006
textPreformat.foreground#161F26
titleBar.activeBackground#2D3E4C
titleBar.activeForeground#FFF
titleBar.border#2D3E4C
titleBar.inactiveBackground#161F26
titleBar.inactiveForeground#685C66
welcomePage.buttonBackground#F3F3F3
welcomePage.buttonHoverBackground#ECECEC
widget.shadow#161F2694

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
—	#002339	—
meta.paragraph.markdown, string.other.link.description.title.markdown	#110000	—
entity.name.section.markdown, punctuation.definition.heading.markdown	#034c7c	—
punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, markup.quote.markdown	#00AC8F	—
markup.quote.markdown	#003494	italic
markup.bold.markdown, punctuation.definition.bold.markdown	#4e76b5	bold
markup.italic.markdown, punctuation.definition.italic.markdown	#C792EA	italic
markup.inline.raw.string.markdown, markup.fenced_code.block.markdown	#0460b1	italic
punctuation.definition.metadata.markdown	#00AC8F	—
markup.underline.link.image.markdown, markup.underline.link.markdown	#924205	—
comment	#357b42	italic
string	#a44185	—
constant.numeric	#174781	—
constant	#174781	—
language.method	#174781	—
constant.character, constant.other	#174781	—
variable	#2f86d2
variable.language.this	#000000
keyword	#7b30d0
storage	#da5221
storage.type	#0991b6
entity.name.class	#1172c7	—
entity.other.inherited-class	#b02767
entity.name.function	#7eb233
variable.parameter	#b1108e
entity.name.tag	#0444ac
text.html.basic	#0071ce
entity.name.type	#0444ac	—
entity.other.attribute-name	#df8618	italic
support.function	#1ab394
support.constant	#174781
support.type, support.class	#dc3eb7	—
support.other.variable	#224555	—
invalid	#207bb8	italic bold underline
invalid.deprecated	#207bb8	bold italic underline
source.json support	#6dbdfa	—
source.json string, source.json punctuation.definition.string	#00820f	—
markup.list	#207bb8	—
markup.heading punctuation.definition.heading, entity.name.section	#4FB4D8
text.html.markdown meta.paragraph meta.link.inline, text.html.markdown meta.paragraph meta.link.inline punctuation.definition.string.begin.markdown, text.html.markdown meta.paragraph meta.link.inline punctuation.definition.string.end.markdown	#87429A	—
markup.quote	#87429A	—
markup.bold	#08134A	bold
markup.italic, punctuation.definition.italic	#174781	italic
meta.link	#87429A	—

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