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 — Kanagawa Dragon

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.background#282727
activityBar.foreground#C5C9C5
activityBarBadge.background#658594
activityBarBadge.foreground#C5C9C5
badge.background#282727
button.background#282727
button.foreground#C8C093
button.secondaryBackground#223249
button.secondaryForeground#C5C9C5
checkbox.border#223249
debugToolBar.background#0D0C0C
descriptionForeground#C5C9C5
diffEditor.insertedTextBackground#2B332880
dropdown.background#0D0C0C
dropdown.border#0D0C0C
editor.background#181616
editor.findMatchBackground#2D4F67
editor.findMatchBorder#FF9E3B
editor.findMatchHighlightBackground#2D4F6780
editor.foreground#C5C9C5
editor.lineHighlightBackground#393836
editor.selectionBackground#223249
editor.selectionHighlightBackground#39383680
editor.selectionHighlightBorder#625E5A
editor.wordHighlightBackground#3938364D
editor.wordHighlightBorder#625E5A
editor.wordHighlightStrongBackground#3938364D
editor.wordHighlightStrongBorder#625E5A
editorBracketHighlight.foreground1#8992A7
editorBracketHighlight.foreground2#B6927B
editorBracketHighlight.foreground3#8BA4B0
editorBracketHighlight.foreground4#A292A3
editorBracketHighlight.foreground5#C4B28A
editorBracketHighlight.foreground6#8EA4A2
editorBracketHighlight.unexpectedBracket.foreground#C4746E
editorBracketMatch.background#0D0C0C
editorBracketMatch.border#625E5A
editorBracketPairGuide.activeBackground1#8992A7
editorBracketPairGuide.activeBackground2#B6927B
editorBracketPairGuide.activeBackground3#8BA4B0
editorBracketPairGuide.activeBackground4#A292A3
editorBracketPairGuide.activeBackground5#C4B28A
editorBracketPairGuide.activeBackground6#8EA4A2
editorCursor.background#181616
editorCursor.foreground#C5C9C5
editorError.foreground#E82424
editorGroup.border#0D0C0C
editorGroupHeader.tabsBackground#0D0C0C
editorGutter.addedBackground#76946A
editorGutter.deletedBackground#C34043
editorGutter.modifiedBackground#DCA561
editorHoverWidget.background#181616
editorHoverWidget.border#282727
editorHoverWidget.highlightForeground#658594
editorIndentGuide.activeBackground1#393836
editorIndentGuide.background1#282727
editorInlayHint.background#181616
editorInlayHint.foreground#737C73
editorLineNumber.activeForeground#FFA066
editorLineNumber.foreground#625E5A
editorMarkerNavigation.background#393836
editorRuler.foreground#393836
editorSuggestWidget.background#223249
editorSuggestWidget.border#223249
editorSuggestWidget.selectedBackground#2D4F67
editorWarning.foreground#FF9E3B
editorWhitespace.foreground#181616
editorWidget.background#181616
focusBorder#223249
foreground#C5C9C5
gitDecoration.ignoredResourceForeground#737C73
input.background#0D0C0C
list.activeSelectionBackground#393836
list.activeSelectionForeground#C5C9C5
list.focusBackground#282727
list.focusForeground#C5C9C5
list.highlightForeground#8BA4B0
list.hoverBackground#393836
list.hoverForeground#C5C9C5
list.inactiveSelectionBackground#282727
list.inactiveSelectionForeground#C5C9C5
list.warningForeground#FF9E3B
menu.background#393836
menu.border#0D0C0C
menu.foreground#C5C9C5
menu.selectionBackground#0D0C0C
menu.selectionForeground#C5C9C5
menu.separatorBackground#625E5A
menubar.selectionBackground#0D0C0C
menubar.selectionForeground#C5C9C5
minimapGutter.addedBackground#76946A
minimapGutter.deletedBackground#C34043
minimapGutter.modifiedBackground#DCA561
panel.border#0D0C0C
panelSectionHeader.background#181616
peekView.border#625E5A
peekViewEditor.background#282727
peekViewEditor.matchHighlightBackground#2D4F67
peekViewResult.background#393836
scrollbar.shadow#393836
scrollbarSlider.activeBackground#28272780
scrollbarSlider.background#625E5A66
scrollbarSlider.hoverBackground#625E5A80
settings.focusedRowBackground#393836
settings.headerForeground#C5C9C5
sideBar.background#181616
sideBar.border#0D0C0C
sideBar.foreground#C5C9C5
sideBarSectionHeader.background#393836
sideBarSectionHeader.foreground#C5C9C5
statusBar.background#0D0C0C
statusBar.debuggingBackground#E82424
statusBar.debuggingBorder#8992A7
statusBar.debuggingForeground#C5C9C5
statusBar.foreground#C8C093
statusBar.noFolderBackground#181616
statusBarItem.hoverBackground#393836
statusBarItem.remoteBackground#2D4F67
statusBarItem.remoteForeground#C5C9C5
tab.activeBackground#282727
tab.activeForeground#8BA4B0
tab.border#282727
tab.hoverBackground#393836
tab.inactiveBackground#1D1C19
tab.unfocusedHoverBackground#181616
terminal.ansiBlack#0D0C0C
terminal.ansiBlue#8BA4B0
terminal.ansiBrightBlack#A6A69C
terminal.ansiBrightBlue#7FB4CA
terminal.ansiBrightCyan#7AA89F
terminal.ansiBrightGreen#87A987
terminal.ansiBrightMagenta#938AA9
terminal.ansiBrightRed#E46876
terminal.ansiBrightWhite#C5C9C5
terminal.ansiBrightYellow#E6C384
terminal.ansiCyan#8EA4A2
terminal.ansiGreen#8A9A7B
terminal.ansiMagenta#A292A3
terminal.ansiRed#C4746E
terminal.ansiWhite#C8C093
terminal.ansiYellow#C4B28A
terminal.background#181616
terminal.border#0D0C0C
terminal.foreground#C5C9C5
terminal.selectionBackground#223249
textBlockQuote.background#181616
textBlockQuote.border#0D0C0C
textLink.foreground#6A9589
textPreformat.foreground#FF9E3B
titleBar.activeBackground#393836
titleBar.activeForeground#C5C9C5
titleBar.inactiveBackground#181616
titleBar.inactiveForeground#C5C9C5
walkThrough.embeddedEditorBackground#181616

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#737C73	—
variable, string constant.other.placeholder	#C5C9C5	—
constant.other.color	#B6927B	—
invalid, invalid.illegal	#E82424	—
storage.type	#8992A7	—
storage.modifier	#8992A7	—
keyword.control.flow, keyword.control.conditional, keyword.control.loop	#8992A7	bold
keyword.control, constant.other.color, meta.tag, keyword.other.template, keyword.other.substitution, keyword.other	#8992A7	—
keyword.other.definition.ini	#B6927B	—
keyword.control.trycatch	#C4746E	bold
keyword.other.unit, keyword.operator	#C4B28A	—
punctuation, punctuation.definition.tag, punctuation.separator.inheritance.php, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.section.embedded, meta.brace, keyword.operator.type.annotation, keyword.operator.namespace	#9E9B93	—
entity.name.tag, meta.tag.sgml	#C4B28A	—
entity.name.function, meta.function-call, variable.function, support.function	#8BA4B0	—
keyword.other.special-method	#949FB5	—
entity.name.function.macro	#C4746E	—
meta.block variable.other	#C5C9C5	—
variable.other.enummember	#B6927B	—
support.other.variable	#C5C9C5	—
string.other.link	#949FB5	—
constant.numeric, constant.language, support.constant, constant.character, constant.escape	#B6927B	—
constant.language.boolean	#B6927B	—
constant.numeric	#A292A3	—
string, punctuation.definition.string, constant.other.symbol, constant.other.key, entity.other.inherited-class, markup.heading, markup.inserted.git_gutter, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js, markup.inline.raw.string	#8A9A7B	—
entity.name, support.type, support.class, support.other.namespace.use.php, meta.use.php, support.other.namespace.php, support.type.sys-types	#8EA4A2	—
entity.name.type.module, entity.name.namespace	#C4B28A	—
entity.name.import.go	#8A9A7B	—
keyword.blade	#8992A7	—
variable.other.property	#C4B28A	—
keyword.control.import, keyword.import, meta.import	#B6927B	—
source.css support.type.property-name, source.sass support.type.property-name, source.scss support.type.property-name, source.less support.type.property-name, source.stylus support.type.property-name, source.postcss support.type.property-name	#8EA4A2	—
entity.name.module.js, variable.import.parameter.js, variable.other.class.js	#C4746E	—
variable.language	#C4746E	—
entity.name.method.js	#949FB5	—
meta.class-method.js entity.name.function.js, variable.function.constructor	#949FB5	—
entity.other.attribute-name	#8992A7	—
entity.other.attribute-name.class	#C4B28A	—
source.sass keyword.control	#949FB5	—
markup.inserted	#76946A	—
markup.deleted	#C34043	—
markup.changed	#DCA561	—
string.regexp	#B98D7B	—
constant.character.escape	#949FB5	—
url, link, uri	—	underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js	#8992A7	—
source.js constant.other.object.key.js string.unquoted.label.js	#C4746E	—
source.json meta.structure.dictionary.json support.type.property-name.json	#A292A3	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#C4B28A	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#B6927B	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#C4746E	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#B6927B	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#8BA4B0	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#A292A3	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#8992A7	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#8A9A7B	—
meta.tag JSXNested, meta.jsx.children, text.html, text.log	#C5C9C5	—
text.html.markdown, punctuation.definition.list_item.markdown	#C5C9C5	—
text.html.markdown markup.inline.raw.markdown	#8992A7	—
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown	#8992A7	—
markdown.heading, entity.name.section.markdown, markup.heading.markdown	#8BA4B0	—
markup.italic	#C4746E	italic
markup.bold, markup.bold string	—	bold
markup.bold markup.italic, markup.italic markup.bold, markup.quote markup.bold, markup.bold markup.italic string, markup.italic markup.bold string, markup.quote markup.bold string	#C4746E	bold
markup.underline	#949FB5	underline
markup.quote punctuation.definition.blockquote.markdown	#737C73	—
markup.quote	—	italic
string.other.link.title.markdown	#B6927B	—
string.other.link.description.title.markdown	#8992A7	—
constant.other.reference.link.markdown	#C4B28A	—
markup.raw.block	#8992A7	—
markup.raw.block.fenced.markdown	#737C73	—
punctuation.definition.fenced.markdown	#737C73	—
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end	#C5C9C5	—
variable.language.fenced.markdown	#737C73	—
meta.separator	#9E9B93	bold
markup.table	#C5C9C5	—

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