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 — Vesper

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#101010
activityBar.foreground#A0A0A0
activityBarBadge.background#FFC799
activityBarBadge.foreground#000
badge.background#FFC799
badge.foreground#000
button.background#FFC799
button.foreground#000
button.hoverBackground#FFCFA8
diffEditor.insertedLineBackground#99FFE415
diffEditor.insertedTextBackground#99FFE415
diffEditor.removedLineBackground#FF808015
diffEditor.removedTextBackground#FF808015
editor.background#101010
editor.foreground#FFF
editor.selectionBackground#FFFFFF25
editor.selectionHighlightBackground#FFFFFF25
editorBracketHighlight.foreground1#A0A0A0
editorBracketHighlight.foreground2#A0A0A0
editorBracketHighlight.foreground3#A0A0A0
editorBracketHighlight.foreground4#A0A0A0
editorBracketHighlight.foreground5#A0A0A0
editorBracketHighlight.foreground6#A0A0A0
editorBracketHighlight.unexpectedBracket.foreground#FF8080
editorError.foreground#FF8080
editorGroupHeader.tabsBackground#101010
editorGutter.addedBackground#99FFE4
editorGutter.deletedBackground#FF8080
editorGutter.modifiedBackground#FFC799
editorHoverWidget.background#161616
editorHoverWidget.border#282828
editorInlayHint.background#1C1C1C
editorInlayHint.foreground#A0A0A0
editorLineNumber.foreground#505050
editorOverviewRuler.border#101010
editorWarning.foreground#FFC799
editorWidget.background#101010
focusBorder#FFC799
icon.foreground#A0A0A0
input.background#1C1C1C
list.activeSelectionBackground#232323
list.activeSelectionForeground#FFC799
list.errorForeground#FF8080
list.highlightForeground#FFC799
list.hoverBackground#282828
list.inactiveSelectionBackground#232323
scrollbarSlider.background#34343480
scrollbarSlider.hoverBackground#343434
selection.background#666
settings.modifiedItemIndicator#FFC799
sideBar.background#101010
sideBarSectionHeader.background#101010
sideBarSectionHeader.foreground#A0A0A0
sideBarTitle.foreground#A0A0A0
statusBar.background#101010
statusBar.debuggingBackground#FF7300
statusBar.debuggingForeground#FFF
statusBar.foreground#A0A0A0
statusBarItem.remoteBackground#FFC799
statusBarItem.remoteForeground#000
tab.activeBackground#161616
tab.activeBorder#FFC799
tab.border#101010
tab.inactiveBackground#101010
textLink.activeForeground#FFCFA8
textLink.foreground#FFC799
titleBar.activeBackground#101010
titleBar.activeForeground#7E7E7E
titleBar.inactiveBackground#101010
titleBar.inactiveForeground#707070

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#8b8b8b94	—
variable, string constant.other.placeholder, entity.name.tag	#FFF	—
constant.other.color	#FFF	—
invalid, invalid.illegal	#FF8080	—
keyword, storage.type, storage.modifier	#A0A0A0	—
keyword.control, constant.other.color, punctuation.definition.tag, punctuation.separator.inheritance.php, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.section.embedded, keyword.other.template, keyword.other.substitution	#A0A0A0	—
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter	#FFC799	—
entity.name.function, variable.function, support.function, keyword.other.special-method	#FFC799	—
meta.block variable.other	#FFF	—
support.other.variable, string.other.link	#FFF	—
constant.numeric, support.constant, constant.character, constant.escape, keyword.other.unit, keyword.other, constant.language.boolean	#FFC799	—
string, constant.other.symbol, constant.other.key, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js	#99FFE4	—
entity.name, support.type, support.class, support.other.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types	#FFC799	—
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, source.postcss support.type.property-name, support.type.vendored.property-name.css, source.css.scss entity.name.tag, variable.parameter.keyframe-list.css, meta.property-name.css, variable.parameter.url.scss, meta.property-value.scss, meta.property-value.css	#FFF	—
entity.name.module.js, variable.import.parameter.js, variable.other.class.js	#FF8080	—
variable.language	#A0A0A0	—
entity.name.method.js	#FFFF	—
meta.class-method.js entity.name.function.js, variable.function.constructor	#FFFF	—
entity.other.attribute-name, meta.property-list.scss, meta.attribute-selector.scss, meta.property-value.css, entity.other.keyframe-offset.css, meta.selector.css, entity.name.tag.reference.scss, entity.name.tag.nesting.css, punctuation.separator.key-value.css	#A0A0A0	—
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name	#FFC799	—
entity.other.attribute-name.class, entity.other.attribute-name.id, meta.attribute-selector.scss, variable.parameter.misc.css	#FFC799	—
source.sass keyword.control, meta.attribute-selector.scss	#99FFE4	—
markup.inserted	#99FFE4	—
markup.deleted	#FF8080	—
markup.changed	#A0A0A0	—
string.regexp	#A0A0A0	—
constant.character.escape	#A0A0A0	—
url, link, uri	—	underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js	#FFFF	—
source.js constant.other.object.key.js string.unquoted.label.js	#FF8080	italic
source.json meta.structure.dictionary.json support.type.property-name.json	#FFC799	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#FFC799	—
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	#FFC799	—
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	#FFC799	—
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	#FFC799	—
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	#FFC799	—
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	#FFC799	—
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	#FFC799	—
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	#FFC799	—
text.html.markdown, punctuation.definition.list_item.markdown	#FFF	—
text.html.markdown markup.inline.raw.markdown	#A0A0A0	—
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown	#FFF	—
markdown.heading, markup.heading \| markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown, markup.heading, markup.inserted.git_gutter	#FFC799	—
markup.italic	#FFF	italic
markup.bold, markup.bold string	#FFF	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	#FFF	bold
markup.underline	#FFC799	underline
markup.quote punctuation.definition.blockquote.markdown	#FFF	—
markup.quote	—	—
string.other.link.title.markdown	#FFFF	—
string.other.link.description.title.markdown	#A0A0A0	—
constant.other.reference.link.markdown	#FFC799	—
markup.raw.block	#A0A0A0	—
markup.raw.block.fenced.markdown	#00000050	—
punctuation.definition.fenced.markdown	#00000050	—
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end	#FFF	—
variable.language.fenced.markdown	#FFF	—
meta.separator	#65737E	bold
markup.table	#FFF	—

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