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 Wave

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#2A2A37
activityBar.foreground#DCD7BA
activityBarBadge.background#658594
activityBarBadge.foreground#DCD7BA
badge.background#2A2A37
button.background#2A2A37
button.foreground#C8C093
button.secondaryBackground#223249
button.secondaryForeground#DCD7BA
checkbox.border#223249
debugToolBar.background#16161D
descriptionForeground#DCD7BA
diffEditor.insertedTextBackground#2B332880
dropdown.background#16161D
dropdown.border#16161D
editor.background#1F1F28
editor.findMatchBackground#2D4F67
editor.findMatchBorder#FF9E3B
editor.findMatchHighlightBackground#2D4F6780
editor.foreground#DCD7BA
editor.lineHighlightBackground#363646
editor.selectionBackground#223249
editor.selectionHighlightBackground#36364680
editor.selectionHighlightBorder#54546D
editor.wordHighlightBackground#3636464D
editor.wordHighlightBorder#54546D
editor.wordHighlightStrongBackground#3636464D
editor.wordHighlightStrongBorder#54546D
editorBracketHighlight.foreground1#957FB8
editorBracketHighlight.foreground2#FFA066
editorBracketHighlight.foreground3#7E9CD8
editorBracketHighlight.foreground4#D27E99
editorBracketHighlight.foreground5#E6C384
editorBracketHighlight.foreground6#7AA89F
editorBracketHighlight.unexpectedBracket.foreground#FF5D62
editorBracketMatch.background#16161D
editorBracketMatch.border#54546D
editorBracketPairGuide.activeBackground1#957FB8
editorBracketPairGuide.activeBackground2#FFA066
editorBracketPairGuide.activeBackground3#7E9CD8
editorBracketPairGuide.activeBackground4#D27E99
editorBracketPairGuide.activeBackground5#E6C384
editorBracketPairGuide.activeBackground6#7AA89F
editorCursor.background#1F1F28
editorCursor.foreground#DCD7BA
editorError.foreground#E82424
editorGroup.border#16161D
editorGroupHeader.tabsBackground#16161D
editorGutter.addedBackground#76946A
editorGutter.deletedBackground#C34043
editorGutter.modifiedBackground#DCA561
editorHoverWidget.background#1F1F28
editorHoverWidget.border#2A2A37
editorHoverWidget.highlightForeground#658594
editorIndentGuide.activeBackground1#363646
editorIndentGuide.background1#2A2A37
editorInlayHint.background#1F1F28
editorInlayHint.foreground#727169
editorLineNumber.activeForeground#FFA066
editorLineNumber.foreground#54546D
editorMarkerNavigation.background#363646
editorRuler.foreground#363646
editorSuggestWidget.background#223249
editorSuggestWidget.border#223249
editorSuggestWidget.selectedBackground#2D4F67
editorWarning.foreground#FF9E3B
editorWhitespace.foreground#1F1F28
editorWidget.background#1F1F28
focusBorder#223249
foreground#DCD7BA
gitDecoration.ignoredResourceForeground#727169
input.background#16161D
list.activeSelectionBackground#363646
list.activeSelectionForeground#DCD7BA
list.focusBackground#2A2A37
list.focusForeground#DCD7BA
list.highlightForeground#7E9CD8
list.hoverBackground#363646
list.hoverForeground#DCD7BA
list.inactiveSelectionBackground#2A2A37
list.inactiveSelectionForeground#DCD7BA
list.warningForeground#FF9E3B
menu.background#363646
menu.border#16161D
menu.foreground#DCD7BA
menu.selectionBackground#16161D
menu.selectionForeground#DCD7BA
menu.separatorBackground#54546D
menubar.selectionBackground#16161D
menubar.selectionForeground#DCD7BA
minimapGutter.addedBackground#76946A
minimapGutter.deletedBackground#C34043
minimapGutter.modifiedBackground#DCA561
panel.border#16161D
panelSectionHeader.background#1F1F28
peekView.border#54546D
peekViewEditor.background#2A2A37
peekViewEditor.matchHighlightBackground#2D4F67
peekViewResult.background#363646
scrollbar.shadow#363646
scrollbarSlider.activeBackground#2A2A3780
scrollbarSlider.background#54546D66
scrollbarSlider.hoverBackground#54546D80
settings.focusedRowBackground#363646
settings.headerForeground#DCD7BA
sideBar.background#1F1F28
sideBar.border#16161D
sideBar.foreground#DCD7BA
sideBarSectionHeader.background#363646
sideBarSectionHeader.foreground#DCD7BA
statusBar.background#16161D
statusBar.debuggingBackground#E82424
statusBar.debuggingBorder#957FB8
statusBar.debuggingForeground#DCD7BA
statusBar.foreground#C8C093
statusBar.noFolderBackground#1F1F28
statusBarItem.hoverBackground#363646
statusBarItem.remoteBackground#2D4F67
statusBarItem.remoteForeground#DCD7BA
tab.activeBackground#2A2A37
tab.activeForeground#7E9CD8
tab.border#2A2A37
tab.hoverBackground#363646
tab.inactiveBackground#1A1A22
tab.unfocusedHoverBackground#1F1F28
terminal.ansiBlack#16161D
terminal.ansiBlue#7E9CD8
terminal.ansiBrightBlack#727169
terminal.ansiBrightBlue#7FB4CA
terminal.ansiBrightCyan#7AA89F
terminal.ansiBrightGreen#98BB6C
terminal.ansiBrightMagenta#938AA9
terminal.ansiBrightRed#E82424
terminal.ansiBrightWhite#DCD7BA
terminal.ansiBrightYellow#E6C384
terminal.ansiCyan#6A9589
terminal.ansiGreen#76946A
terminal.ansiMagenta#957FB8
terminal.ansiRed#C34043
terminal.ansiWhite#C8C093
terminal.ansiYellow#C0A36E
terminal.background#1F1F28
terminal.border#16161D
terminal.foreground#DCD7BA
terminal.selectionBackground#223249
textBlockQuote.background#1F1F28
textBlockQuote.border#16161D
textLink.foreground#6A9589
textPreformat.foreground#FF9E3B
titleBar.activeBackground#363646
titleBar.activeForeground#DCD7BA
titleBar.inactiveBackground#1F1F28
titleBar.inactiveForeground#DCD7BA
walkThrough.embeddedEditorBackground#1F1F28

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#727169	—
variable, string constant.other.placeholder	#DCD7BA	—
constant.other.color	#FFA066	—
invalid, invalid.illegal	#E82424	—
storage.type	#957FB8	—
storage.modifier	#957FB8	—
keyword.control.flow, keyword.control.conditional, keyword.control.loop	#957FB8	bold
keyword.control, constant.other.color, meta.tag, keyword.other.template, keyword.other.substitution, keyword.other	#957FB8	—
keyword.other.definition.ini	#FFA066	—
keyword.control.trycatch	#FF5D62	bold
keyword.other.unit, keyword.operator	#E6C384	—
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	#9CABCA	—
entity.name.tag, meta.tag.sgml	#E6C384	—
entity.name.function, meta.function-call, variable.function, support.function	#7E9CD8	—
keyword.other.special-method	#7FB4CA	—
entity.name.function.macro	#E46876	—
meta.block variable.other	#DCD7BA	—
variable.other.enummember	#FFA066	—
support.other.variable	#DCD7BA	—
string.other.link	#7FB4CA	—
constant.numeric, constant.language, support.constant, constant.character, constant.escape	#FFA066	—
constant.language.boolean	#FFA066	—
constant.numeric	#D27E99	—
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	#98BB6C	—
entity.name, support.type, support.class, support.other.namespace.use.php, meta.use.php, support.other.namespace.php, support.type.sys-types	#7AA89F	—
entity.name.type.module, entity.name.namespace	#E6C384	—
entity.name.import.go	#98BB6C	—
keyword.blade	#957FB8	—
variable.other.property	#E6C384	—
keyword.control.import, keyword.import, meta.import	#FFA066	—
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	#7AA89F	—
entity.name.module.js, variable.import.parameter.js, variable.other.class.js	#FF5D62	—
variable.language	#FF5D62	—
entity.name.method.js	#7FB4CA	—
meta.class-method.js entity.name.function.js, variable.function.constructor	#7FB4CA	—
entity.other.attribute-name	#957FB8	—
entity.other.attribute-name.class	#E6C384	—
source.sass keyword.control	#7FB4CA	—
markup.inserted	#76946A	—
markup.deleted	#C34043	—
markup.changed	#DCA561	—
string.regexp	#C0A36E	—
constant.character.escape	#7FB4CA	—
url, link, uri	—	underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js	#957FB8	—
source.js constant.other.object.key.js string.unquoted.label.js	#FF5D62	—
source.json meta.structure.dictionary.json support.type.property-name.json	#D27E99	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#E6C384	—
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	#FFA066	—
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	#FF5D62	—
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	#FFA066	—
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	#7E9CD8	—
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	#D27E99	—
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	#957FB8	—
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	#98BB6C	—
meta.tag JSXNested, meta.jsx.children, text.html, text.log	#DCD7BA	—
text.html.markdown, punctuation.definition.list_item.markdown	#DCD7BA	—
text.html.markdown markup.inline.raw.markdown	#957FB8	—
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown	#957FB8	—
markdown.heading, entity.name.section.markdown, markup.heading.markdown	#7E9CD8	—
markup.italic	#E46876	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	#E46876	bold
markup.underline	#7FB4CA	underline
markup.quote punctuation.definition.blockquote.markdown	#727169	—
markup.quote	—	italic
string.other.link.title.markdown	#FFA066	—
string.other.link.description.title.markdown	#957FB8	—
constant.other.reference.link.markdown	#E6C384	—
markup.raw.block	#957FB8	—
markup.raw.block.fenced.markdown	#727169	—
punctuation.definition.fenced.markdown	#727169	—
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end	#DCD7BA	—
variable.language.fenced.markdown	#727169	—
meta.separator	#9CABCA	bold
markup.table	#DCD7BA	—

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