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 — Synthwave '84

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#171520
activityBar.dropBackground#34294f66
activityBar.foreground#ffffffCC
activityBarBadge.background#f97e72
activityBarBadge.foreground#2a2139
badge.background#2a2139
badge.foreground#ffffff
breadcrumbPicker.background#232530
button.background#614D85
debugToolBar.background#463465
diffEditor.insertedTextBackground#0beb9935
diffEditor.removedTextBackground#fe445035
dropdown.background#232530
dropdown.listBackground#2a2139
editor.background#262335
editor.findMatchBackground#D18616bb
editor.findMatchHighlightBackground#D1861655
editor.findRangeHighlightBackground#34294f1a
editor.hoverHighlightBackground#463564
editor.lineHighlightBorder#7059AB66
editor.rangeHighlightBackground#49549539
editor.selectionBackground#ffffff20
editor.selectionHighlightBackground#ffffff20
editor.wordHighlightBackground#34294f88
editor.wordHighlightStrongBackground#34294f88
editorBracketMatch.background#34294f66
editorBracketMatch.border#495495
editorCodeLens.foreground#ffffff7c
editorCursor.background#241b2f
editorCursor.foreground#f97e72
editorError.foreground#fe4450
editorGroup.border#495495
editorGroup.dropBackground#4954954a
editorGroupHeader.tabsBackground#241b2f
editorGutter.addedBackground#206d4bd6
editorGutter.deletedBackground#fa2e46a4
editorGutter.modifiedBackground#b893ce8f
editorIndentGuide.activeBackground#A148AB80
editorIndentGuide.background#444251
editorLineNumber.activeForeground#ffffffcc
editorLineNumber.foreground#ffffff73
editorOverviewRuler.addedForeground#09f7a099
editorOverviewRuler.border#34294fb3
editorOverviewRuler.deletedForeground#fe445099
editorOverviewRuler.errorForeground#fe4450dd
editorOverviewRuler.findMatchForeground#D1861699
editorOverviewRuler.modifiedForeground#b893ce99
editorOverviewRuler.warningForeground#72f1b8cc
editorRuler.foreground#A148AB80
editorSuggestWidget.highlightForeground#f97e72
editorSuggestWidget.selectedBackground#ffffff36
editorWarning.foreground#72f1b8cc
editorWidget.background#171520DC
editorWidget.border#ffffff22
editorWidget.resizeBorder#ffffff44
errorForeground#fe4450
extensionButton.prominentBackground#f97e72
extensionButton.prominentHoverBackground#ff7edb
focusBorder#1f212b
foreground#ffffff
gitDecoration.addedResourceForeground#72f1b8cc
gitDecoration.deletedResourceForeground#fe4450
gitDecoration.ignoredResourceForeground#ffffff59
gitDecoration.modifiedResourceForeground#b893ceee
gitDecoration.untrackedResourceForeground#72f1b8
input.background#2a2139
inputOption.activeBorder#ff7edb99
inputValidation.errorBackground#fe445080
inputValidation.errorBorder#fe445000
list.activeSelectionBackground#ffffff20
list.activeSelectionForeground#ffffff
list.dropBackground#34294f66
list.errorForeground#fe4450E6
list.focusBackground#ffffff20
list.focusForeground#ffffff
list.highlightForeground#f97e72
list.hoverBackground#37294d99
list.hoverForeground#ffffff
list.inactiveFocusBackground#2a213999
list.inactiveSelectionBackground#ffffff20
list.inactiveSelectionForeground#ffffff
list.warningForeground#72f1b8bb
menu.background#463465
minimapGutter.addedBackground#09f7a099
minimapGutter.deletedBackground#fe4450
minimapGutter.modifiedBackground#b893ce
panelTitle.activeBorder#f97e72
peekView.border#495495
peekViewEditor.background#232530
peekViewEditor.matchHighlightBackground#D18616bb
peekViewResult.background#232530
peekViewResult.matchHighlightBackground#D1861655
peekViewResult.selectionBackground#2a213980
peekViewTitle.background#232530
pickerGroup.foreground#f97e72ea
progressBar.background#f97e72
scrollbar.shadow#2a2139
scrollbarSlider.activeBackground#9d8bca20
scrollbarSlider.background#9d8bca30
scrollbarSlider.hoverBackground#9d8bca50
selection.background#ffffff20
sideBar.background#241b2f
sideBar.dropBackground#34294f4c
sideBar.foreground#ffffff99
sideBarSectionHeader.background#241b2f
sideBarSectionHeader.foreground#ffffffca
statusBar.background#241b2f
statusBar.debuggingBackground#f97e72
statusBar.debuggingForeground#08080f
statusBar.foreground#ffffff80
statusBar.noFolderBackground#241b2f
statusBarItem.prominentBackground#2a2139
statusBarItem.prominentHoverBackground#34294f
tab.activeBorder#880088
tab.border#241b2f00
tab.inactiveBackground#262335
terminal.ansiBlue#03edf9
terminal.ansiBrightBlue#03edf9
terminal.ansiBrightCyan#03edf9
terminal.ansiBrightGreen#72f1b8
terminal.ansiBrightMagenta#ff7edb
terminal.ansiBrightRed#fe4450
terminal.ansiBrightYellow#fede5d
terminal.ansiCyan#03edf9
terminal.ansiGreen#72f1b8
terminal.ansiMagenta#ff7edb
terminal.ansiRed#fe4450
terminal.ansiYellow#f3e70f
terminal.foreground#ffffff
terminal.selectionBackground#ffffff20
terminalCursor.background#ffffff
terminalCursor.foreground#03edf9
textLink.activeForeground#ff7edb
textLink.foreground#f97e72
titleBar.activeBackground#241b2f
titleBar.inactiveBackground#241b2f
walkThrough.embeddedEditorBackground#232530
widget.shadow#2a2139

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, string.quoted.docstring.multi.python, string.quoted.docstring.multi.python punctuation.definition.string.begin.python, string.quoted.docstring.multi.python punctuation.definition.string.end.python	#848bbd	italic
string.quoted, string.template, punctuation.definition.string	#ff8b39	—
string.template meta.embedded.line	#b6b1b1	—
variable, entity.name.variable	#ff7edb	—
variable.language	#fe4450	bold
variable.parameter	—	italic
storage.type, storage.modifier	#fede5d	—
constant	#f97e72	—
string.regexp	#f97e72	—
constant.numeric	#f97e72	—
constant.language	#f97e72	—
constant.character.escape	#36f9f6	—
entity.name	#fe4450	—
entity.name.tag	#72f1b8	—
punctuation.definition.tag	#36f9f6	—
entity.other.attribute-name	#fede5d	—
entity.other.attribute-name.html	#fede5d	italic
entity.name.type, meta.attribute.class.html	#fe4450	—
entity.other.inherited-class	#D50	—
entity.name.function, variable.function	#36f9f6	—
keyword.control.export.js, keyword.control.import.js	#72f1b8	—
constant.numeric.decimal.js	#2EE2FA	—
keyword	#fede5d	—
keyword.control	#fede5d	—
keyword.operator	#fede5d	—
keyword.operator.new, keyword.operator.expression, keyword.operator.logical	#fede5d	—
keyword.other.unit	#f97e72	—
support	#fe4450	—
support.function	#36f9f6	—
support.variable	#ff7edb	—
meta.object-literal.key, support.type.property-name	#ff7edb	—
punctuation.separator.key-value	#b6b1b1	—
punctuation.section.embedded	#fede5d	—
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end	#72f1b8	—
support.type.property-name.css, support.type.property-name.json	#72f1b8	—
switch-block.expr.js	#72f1b8	—
variable.other.constant.property.js, variable.other.property.js	#2ee2fa	—
constant.other.color	#f97e72	—
support.constant.font-name	#f97e72	—
entity.other.attribute-name.id	#36f9f6	—
entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class	#D50	—
support.function.misc.css	#fe4450	—
markup.heading, entity.name.section	#ff7edb	—
text.html, keyword.operator.assignment	#ffffffee	—
markup.quote	#b6b1b1cc	italic
beginning.punctuation.definition.list	#ff7edb	—
markup.underline.link	#D50	—
string.other.link.description	#f97e72	—
meta.function-call.generic.python	#36f9f6	—
variable.parameter.function-call.python	#72f1b8	—
storage.type.cs	#fe4450	—
entity.name.variable.local.cs	#ff7edb	—
entity.name.variable.field.cs, entity.name.variable.property.cs	#ff7edb	—
constant.other.placeholder.c	#72f1b8	italic
keyword.control.directive.include.c, keyword.control.directive.define.c	#72f1b8	—
storage.modifier.c	#fe4450	—
source.cpp keyword.operator	#fede5d	—
constant.other.placeholder.cpp	#72f1b8	italic
keyword.control.directive.include.cpp, keyword.control.directive.define.cpp	#72f1b8	—
storage.modifier.specifier.const.cpp	#fe4450	—
source.elixir support.type.elixir, source.elixir meta.module.elixir entity.name.class.elixir	#36f9f6	—
source.elixir entity.name.function	#72f1b8	—
source.elixir constant.other.symbol.elixir, source.elixir constant.other.keywords.elixir	#36f9f6	—
source.elixir punctuation.definition.string	#72f1b8	—
source.elixir variable.other.readwrite.module.elixir, source.elixir variable.other.readwrite.module.elixir punctuation.definition.variable.elixir	#72f1b8	—
source.elixir .punctuation.binary.elixir	#ff7edb	italic
entity.global.clojure	#36f9f6	bold
storage.control.clojure	#36f9f6	italic
meta.metadata.simple.clojure, meta.metadata.map.clojure	#fe4450	italic
meta.quoted-expression.clojure	—	italic
meta.symbol.clojure	#ff7edbff	—
source.go	#ff7edbff	—
source.go meta.function-call.go	#36f9f6	—
source.go keyword.package.go, source.go keyword.import.go, source.go keyword.function.go, source.go keyword.type.go, source.go keyword.const.go, source.go keyword.var.go, source.go keyword.map.go, source.go keyword.channel.go, source.go keyword.control.go	#fede5d	—
source.go storage.type, source.go keyword.struct.go, source.go keyword.interface.go	#72f1b8	—
source.go constant.language.go, source.go constant.other.placeholder.go, source.go variable	#2EE2FA	—
markup.underline.link.markdown, markup.inline.raw.string.markdown	#72f1b8	italic
string.other.link.title.markdown	#fede5d	—
markup.heading.markdown, entity.name.section.markdown	#ff7edb	bold
markup.italic.markdown	#2EE2FA	italic
markup.bold.markdown	#2EE2FA	bold
punctuation.definition.quote.begin.markdown, markup.quote.markdown	#72f1b8	—
source.dart, source.python, source.scala	#ff7edbff	—
string.interpolated.single.dart	#f97e72	—
variable.parameter.dart	#72f1b8	—
constant.numeric.dart	#2EE2FA	—
variable.parameter.scala	#2EE2FA	—
meta.template.expression.scala	#72f1b8	—

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