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 Lotus

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#E7DBA0
activityBar.foreground#545464
activityBarBadge.background#5A7785
activityBarBadge.foreground#545464
badge.background#E7DBA0
button.background#E7DBA0
button.foreground#43436C
button.secondaryBackground#C7D7E0
button.secondaryForeground#545464
checkbox.border#C7D7E0
debugToolBar.background#D5CEA3
descriptionForeground#545464
diffEditor.insertedTextBackground#B7D0AE80
dropdown.background#D5CEA3
dropdown.border#D5CEA3
editor.background#F2ECBC
editor.findMatchBackground#B5CBD2
editor.findMatchBorder#E98A00
editor.findMatchHighlightBackground#B5CBD280
editor.foreground#545464
editor.lineHighlightBackground#E4D794
editor.selectionBackground#C7D7E0
editor.selectionHighlightBackground#E4D79480
editor.selectionHighlightBorder#766B90
editor.wordHighlightBackground#E4D7944D
editor.wordHighlightBorder#766B90
editor.wordHighlightStrongBackground#E4D7944D
editor.wordHighlightStrongBorder#766B90
editorBracketHighlight.foreground1#624C83
editorBracketHighlight.foreground2#CC6D00
editorBracketHighlight.foreground3#4D699B
editorBracketHighlight.foreground4#B35B79
editorBracketHighlight.foreground5#77713F
editorBracketHighlight.foreground6#597B75
editorBracketHighlight.unexpectedBracket.foreground#D9A594
editorBracketMatch.background#D5CEA3
editorBracketMatch.border#766B90
editorBracketPairGuide.activeBackground1#624C83
editorBracketPairGuide.activeBackground2#CC6D00
editorBracketPairGuide.activeBackground3#4D699B
editorBracketPairGuide.activeBackground4#B35B79
editorBracketPairGuide.activeBackground5#77713F
editorBracketPairGuide.activeBackground6#597B75
editorCursor.background#F2ECBC
editorCursor.foreground#545464
editorError.foreground#E82424
editorGroup.border#D5CEA3
editorGroupHeader.tabsBackground#D5CEA3
editorGutter.addedBackground#6E915F
editorGutter.deletedBackground#D7474B
editorGutter.modifiedBackground#DE9800
editorHoverWidget.background#F2ECBC
editorHoverWidget.border#E7DBA0
editorHoverWidget.highlightForeground#5A7785
editorIndentGuide.activeBackground1#E4D794
editorIndentGuide.background1#E7DBA0
editorInlayHint.background#F2ECBC
editorInlayHint.foreground#716E61
editorLineNumber.activeForeground#CC6D00
editorLineNumber.foreground#766B90
editorMarkerNavigation.background#E4D794
editorRuler.foreground#ff0000
editorSuggestWidget.background#C7D7E0
editorSuggestWidget.border#C7D7E0
editorSuggestWidget.selectedBackground#B5CBD2
editorWarning.foreground#E98A00
editorWhitespace.foreground#F2ECBC
editorWidget.background#F2ECBC
focusBorder#C7D7E0
foreground#545464
gitDecoration.ignoredResourceForeground#716E61
input.background#D5CEA3
list.activeSelectionBackground#E4D794
list.activeSelectionForeground#545464
list.focusBackground#E7DBA0
list.focusForeground#545464
list.highlightForeground#4D699B
list.hoverBackground#E4D794
list.hoverForeground#545464
list.inactiveSelectionBackground#E7DBA0
list.inactiveSelectionForeground#545464
list.warningForeground#E98A00
menu.background#E4D794
menu.border#D5CEA3
menu.foreground#545464
menu.selectionBackground#D5CEA3
menu.selectionForeground#545464
menu.separatorBackground#766B90
menubar.selectionBackground#D5CEA3
menubar.selectionForeground#545464
minimapGutter.addedBackground#6E915F
minimapGutter.deletedBackground#D7474B
minimapGutter.modifiedBackground#DE9800
panel.border#D5CEA3
panelSectionHeader.background#F2ECBC
peekView.border#766B90
peekViewEditor.background#E7DBA0
peekViewEditor.matchHighlightBackground#B5CBD2
peekViewResult.background#E4D794
scrollbar.shadow#E4D794
scrollbarSlider.activeBackground#E7DBA080
scrollbarSlider.background#766B9066
scrollbarSlider.hoverBackground#766B9080
settings.focusedRowBackground#E4D794
settings.headerForeground#545464
sideBar.background#F2ECBC
sideBar.border#D5CEA3
sideBar.foreground#545464
sideBarSectionHeader.background#E4D794
sideBarSectionHeader.foreground#545464
statusBar.background#D5CEA3
statusBar.debuggingBackground#E82424
statusBar.debuggingBorder#624C83
statusBar.debuggingForeground#545464
statusBar.foreground#43436C
statusBar.noFolderBackground#F2ECBC
statusBarItem.hoverBackground#E4D794
statusBarItem.remoteBackground#B5CBD2
statusBarItem.remoteForeground#545464
tab.activeBackground#E7DBA0
tab.activeForeground#4D699B
tab.border#E7DBA0
tab.hoverBackground#E4D794
tab.inactiveBackground#E5DDB0
tab.unfocusedHoverBackground#F2ECBC
terminal.ansiBlack#1F1F28
terminal.ansiBlue#4D699B
terminal.ansiBrightBlack#8A8980
terminal.ansiBrightBlue#6693BF
terminal.ansiBrightCyan#5E857A
terminal.ansiBrightGreen#6E915F
terminal.ansiBrightMagenta#624C83
terminal.ansiBrightRed#D7474B
terminal.ansiBrightWhite#43436C
terminal.ansiBrightYellow#836F4A
terminal.ansiCyan#597B75
terminal.ansiGreen#6F894E
terminal.ansiMagenta#B35B79
terminal.ansiRed#C84053
terminal.ansiWhite#545464
terminal.ansiYellow#77713F
terminal.background#F2ECBC
terminal.border#D5CEA3
terminal.foreground#545464
terminal.selectionBackground#C7D7E0
textBlockQuote.background#F2ECBC
textBlockQuote.border#D5CEA3
textLink.foreground#5E857A
textPreformat.foreground#E98A00
titleBar.activeBackground#E4D794
titleBar.activeForeground#545464
titleBar.inactiveBackground#F2ECBC
titleBar.inactiveForeground#545464
walkThrough.embeddedEditorBackground#F2ECBC

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#716E61	—
variable, string constant.other.placeholder	#545464	—
constant.other.color	#CC6D00	—
invalid, invalid.illegal	#E82424	—
storage.type	#624C83	—
storage.modifier	#624C83	—
keyword.control.flow, keyword.control.conditional, keyword.control.loop	#624C83	bold
keyword.control, constant.other.color, meta.tag, keyword.other.template, keyword.other.substitution, keyword.other	#624C83	—
keyword.other.definition.ini	#CC6D00	—
keyword.control.trycatch	#D9A594	bold
keyword.other.unit, keyword.operator	#77713F	—
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	#4E8CA2	—
entity.name.tag, meta.tag.sgml	#77713F	—
entity.name.function, meta.function-call, variable.function, support.function	#4D699B	—
keyword.other.special-method	#6693BF	—
entity.name.function.macro	#C84053	—
meta.block variable.other	#545464	—
variable.other.enummember	#CC6D00	—
support.other.variable	#545464	—
string.other.link	#6693BF	—
constant.numeric, constant.language, support.constant, constant.character, constant.escape	#CC6D00	—
constant.language.boolean	#CC6D00	—
constant.numeric	#B35B79	—
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	#6F894E	—
entity.name, support.type, support.class, support.other.namespace.use.php, meta.use.php, support.other.namespace.php, support.type.sys-types	#597B75	—
entity.name.type.module, entity.name.namespace	#77713F	—
entity.name.import.go	#6F894E	—
keyword.blade	#624C83	—
variable.other.property	#77713F	—
keyword.control.import, keyword.import, meta.import	#CC6D00	—
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	#597B75	—
entity.name.module.js, variable.import.parameter.js, variable.other.class.js	#D9A594	—
variable.language	#D9A594	—
entity.name.method.js	#6693BF	—
meta.class-method.js entity.name.function.js, variable.function.constructor	#6693BF	—
entity.other.attribute-name	#624C83	—
entity.other.attribute-name.class	#77713F	—
source.sass keyword.control	#6693BF	—
markup.inserted	#6E915F	—
markup.deleted	#D7474B	—
markup.changed	#DE9800	—
string.regexp	#836F4A	—
constant.character.escape	#6693BF	—
url, link, uri	—	underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js	#624C83	—
source.js constant.other.object.key.js string.unquoted.label.js	#D9A594	—
source.json meta.structure.dictionary.json support.type.property-name.json	#B35B79	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#77713F	—
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	#CC6D00	—
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	#D9A594	—
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	#CC6D00	—
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	#4D699B	—
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	#B35B79	—
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	#624C83	—
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	#6F894E	—
meta.tag JSXNested, meta.jsx.children, text.html, text.log	#545464	—
text.html.markdown, punctuation.definition.list_item.markdown	#545464	—
text.html.markdown markup.inline.raw.markdown	#624C83	—
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown	#624C83	—
markdown.heading, entity.name.section.markdown, markup.heading.markdown	#4D699B	—
markup.italic	#C84053	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	#C84053	bold
markup.underline	#6693BF	underline
markup.quote punctuation.definition.blockquote.markdown	#716E61	—
markup.quote	—	italic
string.other.link.title.markdown	#CC6D00	—
string.other.link.description.title.markdown	#624C83	—
constant.other.reference.link.markdown	#77713F	—
markup.raw.block	#624C83	—
markup.raw.block.fenced.markdown	#716E61	—
punctuation.definition.fenced.markdown	#716E61	—
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end	#545464	—
variable.language.fenced.markdown	#716E61	—
meta.separator	#4E8CA2	bold
markup.table	#545464	—

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