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

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#ff967d
activityBar.background#0a0c10
activityBar.border#7a828e
activityBar.foreground#f0f3f6
activityBar.inactiveForeground#f0f3f6
activityBarBadge.background#409eff
activityBarBadge.foreground#0a0c10
badge.background#409eff
badge.foreground#0a0c10
breadcrumb.activeSelectionForeground#f0f3f6
breadcrumb.focusForeground#f0f3f6
breadcrumb.foreground#f0f3f6
breadcrumbPicker.background#272b33
button.background#09b43a
button.foreground#0a0c10
button.hoverBackground#26cd4d
button.secondaryBackground#4c525d
button.secondaryForeground#f0f3f6
button.secondaryHoverBackground#525964
checkbox.background#272b33
checkbox.border#7a828e
debugConsole.errorForeground#ffb1af
debugConsole.infoForeground#bdc4cc
debugConsole.sourceForeground#f7c843
debugConsole.warningForeground#f0b72f
debugConsoleInputIcon.foreground#cb9eff
debugIcon.breakpointForeground#ff6a69
debugTokenExpression.boolean#4ae168
debugTokenExpression.error#ffb1af
debugTokenExpression.name#91cbff
debugTokenExpression.number#4ae168
debugTokenExpression.string#addcff
debugTokenExpression.value#addcff
debugToolBar.background#272b33
descriptionForeground#f0f3f6
diffEditor.insertedLineBackground#09b43a26
diffEditor.insertedTextBackground#26cd4d4d
diffEditor.removedLineBackground#ff6a6926
diffEditor.removedTextBackground#ff94924d
dropdown.background#272b33
dropdown.border#7a828e
dropdown.foreground#f0f3f6
dropdown.listBackground#272b33
editor.background#0a0c10
editor.findMatchBackground#e09b13
editor.findMatchHighlightBackground#fbd66980
editor.focusedStackFrameHighlightBackground#09b43a
editor.foldBackground#9ea7b31a
editor.foreground#f0f3f6
editor.inactiveSelectionBackground#9ea7b3
editor.lineHighlightBackground#9ea7b31a
editor.lineHighlightBorder#71b7ff
editor.linkedEditingBackground#71b7ff12
editor.selectionBackground#ffffff
editor.selectionForeground#0a0c10
editor.selectionHighlightBackground#26cd4d40
editor.stackFrameHighlightBackground#e09b13
editor.wordHighlightBackground#9ea7b380
editor.wordHighlightBorder#9ea7b399
editor.wordHighlightStrongBackground#9ea7b34d
editor.wordHighlightStrongBorder#9ea7b399
editorBracketHighlight.foreground1#91cbff
editorBracketHighlight.foreground2#4ae168
editorBracketHighlight.foreground3#f7c843
editorBracketHighlight.foreground4#ffb1af
editorBracketHighlight.foreground5#ffadd4
editorBracketHighlight.foreground6#dbb7ff
editorBracketHighlight.unexpectedBracket.foreground#f0f3f6
editorBracketMatch.background#26cd4d40
editorBracketMatch.border#26cd4d99
editorCursor.foreground#71b7ff
editorGroup.border#7a828e
editorGroupHeader.tabsBackground#010409
editorGroupHeader.tabsBorder#7a828e
editorGutter.addedBackground#09b43a
editorGutter.deletedBackground#ff6a69
editorGutter.modifiedBackground#e09b13
editorIndentGuide.activeBackground#f0f3f63d
editorIndentGuide.background#f0f3f61f
editorInlayHint.background#bdc4cc33
editorInlayHint.foreground#f0f3f6
editorInlayHint.paramBackground#bdc4cc33
editorInlayHint.paramForeground#f0f3f6
editorInlayHint.typeBackground#bdc4cc33
editorInlayHint.typeForeground#f0f3f6
editorLineNumber.activeForeground#f0f3f6
editorLineNumber.foreground#9ea7b3
editorOverviewRuler.border#010409
editorWhitespace.foreground#7a828e
editorWidget.background#272b33
errorForeground#ff6a69
focusBorder#409eff
foreground#f0f3f6
gitDecoration.addedResourceForeground#26cd4d
gitDecoration.conflictingResourceForeground#e7811d
gitDecoration.deletedResourceForeground#ff6a69
gitDecoration.ignoredResourceForeground#9ea7b3
gitDecoration.modifiedResourceForeground#f0b72f
gitDecoration.submoduleResourceForeground#f0f3f6
gitDecoration.untrackedResourceForeground#26cd4d
icon.foreground#f0f3f6
input.background#0a0c10
input.border#7a828e
input.foreground#f0f3f6
input.placeholderForeground#9ea7b3
keybindingLabel.foreground#f0f3f6
list.activeSelectionBackground#9ea7b366
list.activeSelectionForeground#f0f3f6
list.focusBackground#409eff26
list.focusForeground#f0f3f6
list.highlightForeground#71b7ff
list.hoverBackground#9ea7b31a
list.hoverForeground#f0f3f6
list.inactiveFocusBackground#409eff26
list.inactiveSelectionBackground#9ea7b366
list.inactiveSelectionForeground#f0f3f6
minimapSlider.activeBackground#bdc4cc47
minimapSlider.background#bdc4cc33
minimapSlider.hoverBackground#bdc4cc3d
notificationCenterHeader.background#272b33
notificationCenterHeader.foreground#f0f3f6
notifications.background#272b33
notifications.border#7a828e
notifications.foreground#f0f3f6
notificationsErrorIcon.foreground#ff6a69
notificationsInfoIcon.foreground#71b7ff
notificationsWarningIcon.foreground#f0b72f
panel.background#010409
panel.border#7a828e
panelInput.border#7a828e
panelTitle.activeBorder#ff967d
panelTitle.activeForeground#f0f3f6
panelTitle.inactiveForeground#f0f3f6
peekViewEditor.background#9ea7b31a
peekViewEditor.matchHighlightBackground#e09b13
peekViewResult.background#0a0c10
peekViewResult.matchHighlightBackground#e09b13
pickerGroup.border#7a828e
pickerGroup.foreground#f0f3f6
progressBar.background#409eff
quickInput.background#272b33
quickInput.foreground#f0f3f6
scrollbar.shadow#7a828e33
scrollbarSlider.activeBackground#bdc4cc47
scrollbarSlider.background#bdc4cc33
scrollbarSlider.hoverBackground#bdc4cc3d
settings.headerForeground#f0f3f6
settings.modifiedItemIndicator#e09b13
sideBar.background#010409
sideBar.border#7a828e
sideBar.foreground#f0f3f6
sideBarSectionHeader.background#010409
sideBarSectionHeader.border#7a828e
sideBarSectionHeader.foreground#f0f3f6
sideBarTitle.foreground#f0f3f6
statusBar.background#0a0c10
statusBar.border#7a828e
statusBar.debuggingBackground#ff6a69
statusBar.debuggingForeground#0a0c10
statusBar.focusBorder#409eff80
statusBar.foreground#f0f3f6
statusBar.noFolderBackground#0a0c10
statusBarItem.activeBackground#f0f3f61f
statusBarItem.focusBorder#409eff
statusBarItem.hoverBackground#f0f3f614
statusBarItem.prominentBackground#9ea7b366
statusBarItem.remoteBackground#525964
statusBarItem.remoteForeground#f0f3f6
symbolIcon.arrayForeground#fe9a2d
symbolIcon.booleanForeground#71b7ff
symbolIcon.classForeground#fe9a2d
symbolIcon.colorForeground#91cbff
symbolIcon.constantForeground#acf7b6#72f088#4ae168#26cd4d#09b43a#09b43a#02a232#008c2c#007728#006222
symbolIcon.constructorForeground#dbb7ff
symbolIcon.enumeratorForeground#fe9a2d
symbolIcon.enumeratorMemberForeground#71b7ff
symbolIcon.eventForeground#9ea7b3
symbolIcon.fieldForeground#fe9a2d
symbolIcon.fileForeground#f0b72f
symbolIcon.folderForeground#f0b72f
symbolIcon.functionForeground#cb9eff
symbolIcon.interfaceForeground#fe9a2d
symbolIcon.keyForeground#71b7ff
symbolIcon.keywordForeground#ff9492
symbolIcon.methodForeground#cb9eff
symbolIcon.moduleForeground#ff9492
symbolIcon.namespaceForeground#ff9492
symbolIcon.nullForeground#71b7ff
symbolIcon.numberForeground#26cd4d
symbolIcon.objectForeground#fe9a2d
symbolIcon.operatorForeground#91cbff
symbolIcon.packageForeground#fe9a2d
symbolIcon.propertyForeground#fe9a2d
symbolIcon.referenceForeground#71b7ff
symbolIcon.snippetForeground#71b7ff
symbolIcon.stringForeground#91cbff
symbolIcon.structForeground#fe9a2d
symbolIcon.textForeground#91cbff
symbolIcon.typeParameterForeground#91cbff
symbolIcon.unitForeground#71b7ff
symbolIcon.variableForeground#fe9a2d
tab.activeBackground#0a0c10
tab.activeBorder#0a0c10
tab.activeBorderTop#ff967d
tab.activeForeground#f0f3f6
tab.border#7a828e
tab.hoverBackground#0a0c10
tab.inactiveBackground#010409
tab.inactiveForeground#f0f3f6
tab.unfocusedActiveBorder#0a0c10
tab.unfocusedActiveBorderTop#7a828e
tab.unfocusedHoverBackground#9ea7b31a
terminal.ansiBlack#7a828e
terminal.ansiBlue#71b7ff
terminal.ansiBrightBlack#9ea7b3
terminal.ansiBrightBlue#91cbff
terminal.ansiBrightCyan#56d4dd
terminal.ansiBrightGreen#4ae168
terminal.ansiBrightMagenta#dbb7ff
terminal.ansiBrightRed#ffb1af
terminal.ansiBrightWhite#ffffff
terminal.ansiBrightYellow#f7c843
terminal.ansiCyan#39c5cf
terminal.ansiGreen#26cd4d
terminal.ansiMagenta#cb9eff
terminal.ansiRed#ff9492
terminal.ansiWhite#d9dee3
terminal.ansiYellow#f0b72f
terminal.foreground#f0f3f6
textBlockQuote.background#010409
textBlockQuote.border#7a828e
textCodeBlock.background#9ea7b366
textLink.activeForeground#71b7ff
textLink.foreground#71b7ff
textPreformat.background#9ea7b366
textPreformat.foreground#f0f3f6
textSeparator.foreground#7a828e
titleBar.activeBackground#0a0c10
titleBar.activeForeground#f0f3f6
titleBar.border#7a828e
titleBar.inactiveBackground#010409
titleBar.inactiveForeground#f0f3f6
tree.indentGuidesStroke#7a828e
welcomePage.buttonBackground#272b33
welcomePage.buttonHoverBackground#525964

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment, string.comment	#bdc4cc	—
constant.other.placeholder, constant.character	#ff9492	—
constant, entity.name.constant, variable.other.constant, variable.other.enummember, variable.language, entity	#91cbff	—
entity.name, meta.export.default, meta.definition.variable	#ffb757	—
variable.parameter.function, meta.jsx.children, meta.block, meta.tag.attributes, entity.name.constant, meta.object.member, meta.embedded.expression	#f0f3f6	—
entity.name.function	#dbb7ff	—
entity.name.tag, support.class.component	#72f088	—
keyword	#ff9492	—
storage, storage.type	#ff9492	—
storage.modifier.package, storage.modifier.import, storage.type.java	#f0f3f6	—
string, string punctuation.section.embedded source	#addcff	—
support	#91cbff	—
meta.property-name	#91cbff	—
variable	#ffb757	—
variable.other	#f0f3f6	—
invalid.broken	#ffb1af	italic
invalid.deprecated	#ffb1af	italic
invalid.illegal	#ffb1af	italic
invalid.unimplemented	#ffb1af	italic
carriage-return	#ffffff	italic underline
message.error	#ffb1af	—
string variable	#91cbff	—
source.regexp, string.regexp	#addcff	—
string.regexp.character-class, string.regexp constant.character.escape, string.regexp source.ruby.embedded, string.regexp string.regexp.arbitrary-repitition	#addcff	—
string.regexp constant.character.escape	#72f088	bold
support.constant	#91cbff	—
support.variable	#91cbff	—
support.type.property-name.json	#72f088	—
meta.module-reference	#91cbff	—
punctuation.definition.list.begin.markdown	#ffb757	—
markup.heading, markup.heading entity.name	#91cbff	bold
markup.quote	#72f088	—
markup.italic	#f0f3f6	italic
markup.bold	#f0f3f6	bold
markup.underline	—	underline
markup.strikethrough	—	strikethrough
markup.inline.raw	#91cbff	—
markup.deleted, meta.diff.header.from-file, punctuation.definition.deleted	#ffb1af	—
punctuation.section.embedded	#ff9492	—
markup.inserted, meta.diff.header.to-file, punctuation.definition.inserted	#72f088	—
markup.changed, punctuation.definition.changed	#ffb757	—
markup.ignored, markup.untracked	#272b33	—
meta.diff.range	#dbb7ff	bold
meta.diff.header	#91cbff	—
meta.separator	#91cbff	bold
meta.output	#91cbff	—
brackethighlighter.tag, brackethighlighter.curly, brackethighlighter.round, brackethighlighter.square, brackethighlighter.angle, brackethighlighter.quote	#bdc4cc	—
brackethighlighter.unmatched	#ffb1af	—
constant.other.reference.link, string.other.link	#addcff	—

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