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 Light High Contrast

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.activeBorder#ef5b48
activityBar.background#ffffff
activityBar.border#20252c
activityBar.foreground#0e1116
activityBar.inactiveForeground#0e1116
activityBarBadge.background#0349b4
activityBarBadge.foreground#ffffff
badge.background#0349b4
badge.foreground#ffffff
breadcrumb.activeSelectionForeground#0e1116
breadcrumb.focusForeground#0e1116
breadcrumb.foreground#0e1116
breadcrumbPicker.background#ffffff
button.background#055d20
button.foreground#ffffff
button.hoverBackground#024c1a
button.secondaryBackground#acb6c0
button.secondaryForeground#0e1116
button.secondaryHoverBackground#ced5dc
checkbox.background#e7ecf0
checkbox.border#20252c
debugConsole.errorForeground#a0111f
debugConsole.infoForeground#4b535d
debugConsole.sourceForeground#744500
debugConsole.warningForeground#603700
debugConsoleInputIcon.foreground#512598
debugIcon.breakpointForeground#a0111f
debugTokenExpression.boolean#024c1a
debugTokenExpression.error#86061d
debugTokenExpression.name#023b95
debugTokenExpression.number#024c1a
debugTokenExpression.string#032563
debugTokenExpression.value#032563
debugToolBar.background#ffffff
descriptionForeground#0e1116
diffEditor.insertedLineBackground#82e5964d
diffEditor.insertedTextBackground#43c66380
diffEditor.removedLineBackground#ffc1bc4d
diffEditor.removedTextBackground#ee5a5d66
dropdown.background#ffffff
dropdown.border#20252c
dropdown.foreground#0e1116
dropdown.listBackground#ffffff
editor.background#ffffff
editor.findMatchBackground#744500
editor.findMatchHighlightBackground#f0ce5380
editor.focusedStackFrameHighlightBackground#26a148
editor.foldBackground#66707b1a
editor.foreground#0e1116
editor.inactiveSelectionBackground#66707b
editor.lineHighlightBackground#e7ecf0
editor.linkedEditingBackground#0349b412
editor.selectionBackground#0e1116
editor.selectionForeground#ffffff
editor.selectionHighlightBackground#26a14840
editor.stackFrameHighlightBackground#b58407
editor.wordHighlightBackground#e7ecf080
editor.wordHighlightBorder#acb6c099
editor.wordHighlightStrongBackground#acb6c04d
editor.wordHighlightStrongBorder#acb6c099
editorBracketHighlight.foreground1#0349b4
editorBracketHighlight.foreground2#055d20
editorBracketHighlight.foreground3#744500
editorBracketHighlight.foreground4#a0111f
editorBracketHighlight.foreground5#971368
editorBracketHighlight.foreground6#622cbc
editorBracketHighlight.unexpectedBracket.foreground#0e1116
editorBracketMatch.background#26a14840
editorBracketMatch.border#26a14899
editorCursor.foreground#0349b4
editorGroup.border#20252c
editorGroupHeader.tabsBackground#ffffff
editorGroupHeader.tabsBorder#20252c
editorGutter.addedBackground#26a148
editorGutter.deletedBackground#ee5a5d
editorGutter.modifiedBackground#b58407
editorIndentGuide.activeBackground#0e11163d
editorIndentGuide.background#0e11161f
editorInlayHint.background#acb6c033
editorInlayHint.foreground#0e1116
editorInlayHint.paramBackground#acb6c033
editorInlayHint.paramForeground#0e1116
editorInlayHint.typeBackground#acb6c033
editorInlayHint.typeForeground#0e1116
editorLineNumber.activeForeground#0e1116
editorLineNumber.foreground#88929d
editorOverviewRuler.border#ffffff
editorWhitespace.foreground#acb6c0
editorWidget.background#ffffff
errorForeground#a0111f
focusBorder#0349b4
foreground#0e1116
gitDecoration.addedResourceForeground#055d20
gitDecoration.conflictingResourceForeground#873800
gitDecoration.deletedResourceForeground#a0111f
gitDecoration.ignoredResourceForeground#66707b
gitDecoration.modifiedResourceForeground#744500
gitDecoration.submoduleResourceForeground#0e1116
gitDecoration.untrackedResourceForeground#055d20
icon.foreground#0e1116
input.background#ffffff
input.border#20252c
input.foreground#0e1116
input.placeholderForeground#66707b
keybindingLabel.foreground#0e1116
list.activeSelectionBackground#acb6c033
list.activeSelectionForeground#0e1116
list.focusBackground#dff7ff
list.focusForeground#0e1116
list.highlightForeground#0349b4
list.hoverBackground#e7ecf0
list.hoverForeground#0e1116
list.inactiveFocusBackground#dff7ff
list.inactiveSelectionBackground#acb6c033
list.inactiveSelectionForeground#0e1116
minimapSlider.activeBackground#88929d47
minimapSlider.background#88929d33
minimapSlider.hoverBackground#88929d3d
notificationCenterHeader.background#e7ecf0
notificationCenterHeader.foreground#0e1116
notifications.background#ffffff
notifications.border#20252c
notifications.foreground#0e1116
notificationsErrorIcon.foreground#a0111f
notificationsInfoIcon.foreground#0349b4
notificationsWarningIcon.foreground#744500
panel.background#ffffff
panel.border#20252c
panelInput.border#20252c
panelTitle.activeBorder#ef5b48
panelTitle.activeForeground#0e1116
panelTitle.inactiveForeground#0e1116
pickerGroup.border#20252c
pickerGroup.foreground#0e1116
progressBar.background#0349b4
quickInput.background#ffffff
quickInput.foreground#0e1116
scrollbar.shadow#66707b33
scrollbarSlider.activeBackground#88929d47
scrollbarSlider.background#88929d33
scrollbarSlider.hoverBackground#88929d3d
settings.headerForeground#0e1116
settings.modifiedItemIndicator#b58407
sideBar.background#ffffff
sideBar.border#20252c
sideBar.foreground#0e1116
sideBarSectionHeader.background#ffffff
sideBarSectionHeader.border#20252c
sideBarSectionHeader.foreground#0e1116
sideBarTitle.foreground#0e1116
statusBar.background#ffffff
statusBar.border#20252c
statusBar.debuggingBackground#a0111f
statusBar.debuggingForeground#ffffff
statusBar.focusBorder#0349b480
statusBar.foreground#0e1116
statusBar.noFolderBackground#ffffff
statusBarItem.activeBackground#0e11161f
statusBarItem.focusBorder#0349b4
statusBarItem.hoverBackground#0e111614
statusBarItem.prominentBackground#acb6c033
statusBarItem.remoteBackground#e7ecf0
statusBarItem.remoteForeground#0e1116
symbolIcon.arrayForeground#702c00
symbolIcon.booleanForeground#023b95
symbolIcon.classForeground#702c00
symbolIcon.colorForeground#032563
symbolIcon.constantForeground#024c1a
symbolIcon.constructorForeground#341763
symbolIcon.enumeratorForeground#702c00
symbolIcon.enumeratorMemberForeground#023b95
symbolIcon.eventForeground#4b535d
symbolIcon.fieldForeground#702c00
symbolIcon.fileForeground#603700
symbolIcon.folderForeground#603700
symbolIcon.functionForeground#512598
symbolIcon.interfaceForeground#702c00
symbolIcon.keyForeground#023b95
symbolIcon.keywordForeground#86061d
symbolIcon.methodForeground#512598
symbolIcon.moduleForeground#86061d
symbolIcon.namespaceForeground#86061d
symbolIcon.nullForeground#023b95
symbolIcon.numberForeground#024c1a
symbolIcon.objectForeground#702c00
symbolIcon.operatorForeground#032563
symbolIcon.packageForeground#702c00
symbolIcon.propertyForeground#702c00
symbolIcon.referenceForeground#023b95
symbolIcon.snippetForeground#023b95
symbolIcon.stringForeground#032563
symbolIcon.structForeground#702c00
symbolIcon.textForeground#032563
symbolIcon.typeParameterForeground#032563
symbolIcon.unitForeground#023b95
symbolIcon.variableForeground#702c00
tab.activeBackground#ffffff
tab.activeBorder#ffffff
tab.activeBorderTop#ef5b48
tab.activeForeground#0e1116
tab.border#20252c
tab.hoverBackground#ffffff
tab.inactiveBackground#ffffff
tab.inactiveForeground#0e1116
tab.unfocusedActiveBorder#ffffff
tab.unfocusedActiveBorderTop#20252c
tab.unfocusedHoverBackground#e7ecf0
terminal.ansiBlack#0e1116
terminal.ansiBlue#0349b4
terminal.ansiBrightBlack#4b535d
terminal.ansiBrightBlue#1168e3
terminal.ansiBrightCyan#3192aa
terminal.ansiBrightGreen#055d20
terminal.ansiBrightMagenta#844ae7
terminal.ansiBrightRed#86061d
terminal.ansiBrightWhite#88929d
terminal.ansiBrightYellow#4e2c00
terminal.ansiCyan#1b7c83
terminal.ansiGreen#024c1a
terminal.ansiMagenta#622cbc
terminal.ansiRed#a0111f
terminal.ansiWhite#66707b
terminal.ansiYellow#3f2200
terminal.foreground#0e1116
textBlockQuote.background#ffffff
textBlockQuote.border#20252c
textCodeBlock.background#acb6c033
textLink.activeForeground#0349b4
textLink.foreground#0349b4
textPreformat.background#acb6c033
textPreformat.foreground#0e1116
textSeparator.foreground#88929d
titleBar.activeBackground#ffffff
titleBar.activeForeground#0e1116
titleBar.border#20252c
titleBar.inactiveBackground#ffffff
titleBar.inactiveForeground#0e1116
tree.indentGuidesStroke#88929d
welcomePage.buttonBackground#e7ecf0
welcomePage.buttonHoverBackground#ced5dc

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment, string.comment	#66707b	—
constant.other.placeholder, constant.character	#a0111f	—
constant, entity.name.constant, variable.other.constant, variable.other.enummember, variable.language, entity	#023b95	—
entity.name, meta.export.default, meta.definition.variable	#702c00	—
variable.parameter.function, meta.jsx.children, meta.block, meta.tag.attributes, entity.name.constant, meta.object.member, meta.embedded.expression	#0e1116	—
entity.name.function	#622cbc	—
entity.name.tag, support.class.component	#024c1a	—
keyword	#a0111f	—
storage, storage.type	#a0111f	—
storage.modifier.package, storage.modifier.import, storage.type.java	#0e1116	—
string, string punctuation.section.embedded source	#032563	—
support	#023b95	—
meta.property-name	#023b95	—
variable	#702c00	—
variable.other	#0e1116	—
invalid.broken	#6e011a	italic
invalid.deprecated	#6e011a	italic
invalid.illegal	#6e011a	italic
invalid.unimplemented	#6e011a	italic
carriage-return	#ffffff	italic underline
message.error	#6e011a	—
string variable	#023b95	—
source.regexp, string.regexp	#032563	—
string.regexp.character-class, string.regexp constant.character.escape, string.regexp source.ruby.embedded, string.regexp string.regexp.arbitrary-repitition	#032563	—
string.regexp constant.character.escape	#024c1a	bold
support.constant	#023b95	—
support.variable	#023b95	—
support.type.property-name.json	#024c1a	—
meta.module-reference	#023b95	—
punctuation.definition.list.begin.markdown	#702c00	—
markup.heading, markup.heading entity.name	#023b95	bold
markup.quote	#024c1a	—
markup.italic	#0e1116	italic
markup.bold	#0e1116	bold
markup.underline	—	underline
markup.strikethrough	—	strikethrough
markup.inline.raw	#023b95	—
markup.deleted, meta.diff.header.from-file, punctuation.definition.deleted	#6e011a	—
punctuation.section.embedded	#a0111f	—
markup.inserted, meta.diff.header.to-file, punctuation.definition.inserted	#024c1a	—
markup.changed, punctuation.definition.changed	#702c00	—
markup.ignored, markup.untracked	#e7ecf0	—
meta.diff.range	#622cbc	bold
meta.diff.header	#023b95	—
meta.separator	#023b95	bold
meta.output	#023b95	—
brackethighlighter.tag, brackethighlighter.curly, brackethighlighter.round, brackethighlighter.square, brackethighlighter.angle, brackethighlighter.quote	#4b535d	—
brackethighlighter.unmatched	#6e011a	—
constant.other.reference.link, string.other.link	#032563	—

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