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 — Min Light

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#f6f6f6
activityBar.foreground#9E9E9E
activityBarBadge.background#616161
badge.background#E0E0E0
badge.foreground#616161
button.background#757575
button.hoverBackground#616161
debugIcon.breakpointCurrentStackframeForeground#1976D2
debugIcon.breakpointDisabledForeground#848484
debugIcon.breakpointForeground#D32F2F
debugIcon.breakpointStackframeForeground#1976D2
debugIcon.continueForeground#6f42c1
debugIcon.disconnectForeground#6f42c1
debugIcon.pauseForeground#6f42c1
debugIcon.restartForeground#1976D2
debugIcon.startForeground#1976D2
debugIcon.stepBackForeground#6f42c1
debugIcon.stepIntoForeground#6f42c1
debugIcon.stepOutForeground#6f42c1
debugIcon.stepOverForeground#6f42c1
debugIcon.stopForeground#1976D2
diffEditor.insertedTextBackground#b7e7a44b
diffEditor.removedTextBackground#e597af52
editor.background#ffffff
editor.foreground#212121
editor.lineHighlightBorder#f2f2f2
editorBracketMatch.background#E7F3FF
editorBracketMatch.border#c8e1ff
editorGroupHeader.tabsBackground#f6f6f6
editorGroupHeader.tabsBorder#fff
editorIndentGuide.background#EEE
editorLineNumber.activeForeground#757575
editorLineNumber.foreground#CCC
editorSuggestWidget.background#F3F3F3
extensionButton.prominentBackground#000000AA
extensionButton.prominentHoverBackground#000000BB
focusBorder#D0D0D0
foreground#757575
gitDecoration.ignoredResourceForeground#AAAAAA
input.border#E9E9E9
inputOption.activeBackground#EDEDED
list.activeSelectionBackground#EEE
list.activeSelectionForeground#212121
list.focusBackground#ddd
list.focusForeground#212121
list.highlightForeground#212121
list.inactiveSelectionBackground#E0E0E0
list.inactiveSelectionForeground#212121
panel.background#fff
panel.border#f4f4f4
panelTitle.activeBorder#fff
panelTitle.inactiveForeground#BDBDBD
peekView.border#E0E0E0
peekViewEditor.background#f8f8f8
pickerGroup.foreground#000
progressBar.background#000
scrollbar.shadow#FFF
sideBar.background#f6f6f6
sideBar.border#f6f6f6
sideBarSectionHeader.background#EEE
sideBarTitle.foreground#999
statusBar.background#f6f6f6
statusBar.border#f6f6f6
statusBar.debuggingBackground#f6f6f6
statusBar.foreground#7E7E7E
statusBar.noFolderBackground#f6f6f6
statusBarItem.prominentBackground#0000001a
statusBarItem.remoteBackground#f6f6f600
statusBarItem.remoteForeground#7E7E7E
symbolIcon.classForeground#dd8500
symbolIcon.constructorForeground#6f42c1
symbolIcon.enumeratorForeground#dd8500
symbolIcon.enumeratorMemberForeground#1976D2
symbolIcon.eventForeground#dd8500
symbolIcon.fieldForeground#1976D2
symbolIcon.functionForeground#6f42c1
symbolIcon.interfaceForeground#1976D2
symbolIcon.methodForeground#6f42c1
symbolIcon.variableForeground#1976D2
tab.activeBorder#FFF
tab.activeForeground#424242
tab.border#f6f6f6
tab.inactiveBackground#f6f6f6
tab.inactiveForeground#BDBDBD
tab.unfocusedActiveBorder#fff
terminal.ansiBlack#333
terminal.ansiBlue#e0e0e0
terminal.ansiBrightBlack#a1a1a1
terminal.ansiBrightBlue#6871ff
terminal.ansiBrightCyan#57d9ad
terminal.ansiBrightGreen#a3d900
terminal.ansiBrightMagenta#a37acc
terminal.ansiBrightRed#d6656a
terminal.ansiBrightWhite#7E7E7E
terminal.ansiBrightYellow#e7c547
terminal.ansiCyan#4dbf99
terminal.ansiGreen#77cc00
terminal.ansiMagenta#9966cc
terminal.ansiRed#D32F2F
terminal.ansiWhite#c7c7c7
terminal.ansiYellow#f29718
terminal.background#fff
textLink.activeForeground#000
textLink.foreground#000
titleBar.activeBackground#f6f6f6
titleBar.border#FFFFFF00
titleBar.inactiveBackground#f6f6f6

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
—	#24292eff	—
keyword.operator.accessor, meta.group.braces.round.function.arguments, meta.template.expression, markup.fenced_code meta.embedded.block	#24292eff	—
emphasis	—	italic
strong, markup.heading.markdown, markup.bold.markdown	—	bold
markup.italic.markdown	—	italic
meta.link.inline.markdown	#1976D2	underline
string, markup.fenced_code, markup.inline	#2b5581	—
comment, string.quoted.docstring.multi	#c2c3c5	—
constant.numeric, constant.language, constant.other.placeholder, constant.character.format.placeholder, variable.language.this, variable.other.object, variable.other.class, variable.other.constant, meta.property-name, meta.property-value, support	#1976D2	—
keyword, storage.modifier, storage.type, storage.control.clojure, entity.name.function.clojure, entity.name.tag.yaml, support.function.node, support.type.property-name.json, punctuation.separator.key-value, punctuation.definition.template-expression	#D32F2F	—
variable.parameter.function	#FF9800	—
support.function, entity.name.type, entity.other.inherited-class, meta.function-call, meta.instance.constructor, entity.other.attribute-name, entity.name.function, constant.keyword.clojure	#6f42c1	—
entity.name.tag, string.quoted, string.regexp, string.interpolated, string.template, string.unquoted.plain.out.yaml, keyword.other.template	#22863a	—
token.info-token	#316bcd	—
token.warn-token	#cd9731	—
token.error-token	#cd3131	—
token.debug-token	#800080	—
strong, markup.heading.markdown, markup.bold.markdown	#6f42c1	—
punctuation.definition.arguments, punctuation.definition.dict, punctuation.separator, meta.function-call.arguments	#212121	—
markup.underline.link, punctuation.definition.metadata.markdown	#22863a	—
beginning.punctuation.definition.list.markdown	#6f42c1	—
punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, string.other.link.title.markdown, string.other.link.description.markdown	#d32f2f	—

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