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 — Catppuccin Frappé

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.activeBackground#00000000
activityBar.activeBorder#00000000
activityBar.activeFocusBorder#00000000
activityBar.background#232634
activityBar.border#00000000
activityBar.dropBorder#ca9ee633
activityBar.foreground#ca9ee6
activityBar.inactiveForeground#737994
activityBarBadge.background#ca9ee6
activityBarBadge.foreground#232634
activityBarTop.activeBorder#00000000
activityBarTop.dropBorder#ca9ee633
activityBarTop.foreground#ca9ee6
activityBarTop.inactiveForeground#737994
badge.background#51576d
badge.foreground#c6d0f5
banner.background#51576d
banner.foreground#c6d0f5
banner.iconForeground#c6d0f5
breadcrumb.activeSelectionForeground#ca9ee6
breadcrumb.background#303446
breadcrumb.focusForeground#ca9ee6
breadcrumb.foreground#c6d0f5cc
breadcrumbPicker.background#292c3c
button.background#ca9ee6
button.border#00000000
button.foreground#232634
button.hoverBackground#d9baed
button.secondaryBackground#626880
button.secondaryBorder#ca9ee6
button.secondaryForeground#c6d0f5
button.secondaryHoverBackground#727993
button.separator#00000000
charts.blue#8caaee
charts.foreground#c6d0f5
charts.green#a6d189
charts.lines#b5bfe2
charts.orange#ef9f76
charts.purple#ca9ee6
charts.red#e78284
charts.yellow#e5c890
checkbox.background#51576d
checkbox.border#00000000
checkbox.foreground#ca9ee6
commandCenter.activeBackground#62688033
commandCenter.activeBorder#ca9ee6
commandCenter.activeForeground#ca9ee6
commandCenter.background#292c3c
commandCenter.border#00000000
commandCenter.foreground#b5bfe2
commandCenter.inactiveBorder#00000000
commandCenter.inactiveForeground#b5bfe2
debugConsole.errorForeground#e78284
debugConsole.infoForeground#8caaee
debugConsole.sourceForeground#f2d5cf
debugConsole.warningForeground#ef9f76
debugConsoleInputIcon.foreground#c6d0f5
debugExceptionWidget.background#232634
debugExceptionWidget.border#ca9ee6
debugIcon.breakpointCurrentStackframeForeground#626880
debugIcon.breakpointDisabledForeground#e7828499
debugIcon.breakpointForeground#e78284
debugIcon.breakpointStackframeForeground#626880
debugIcon.breakpointUnverifiedForeground#a57582
debugIcon.continueForeground#a6d189
debugIcon.disconnectForeground#626880
debugIcon.pauseForeground#8caaee
debugIcon.restartForeground#81c8be
debugIcon.startForeground#a6d189
debugIcon.stepBackForeground#626880
debugIcon.stepIntoForeground#c6d0f5
debugIcon.stepOutForeground#c6d0f5
debugIcon.stepOverForeground#ca9ee6
debugIcon.stopForeground#e78284
debugTokenExpression.boolean#ca9ee6
debugTokenExpression.error#e78284
debugTokenExpression.number#ef9f76
debugTokenExpression.string#a6d189
debugToolBar.background#232634
debugToolBar.border#00000000
descriptionForeground#c6d0f5
diffEditor.border#626880
diffEditor.diagonalFill#62688099
diffEditor.insertedLineBackground#a6d18926
diffEditor.insertedTextBackground#a6d1891a
diffEditor.removedLineBackground#e7828426
diffEditor.removedTextBackground#e782841a
diffEditorOverview.insertedForeground#a6d189cc
diffEditorOverview.removedForeground#e78284cc
disabledForeground#a5adce
dropdown.background#292c3c
dropdown.border#ca9ee6
dropdown.foreground#c6d0f5
dropdown.listBackground#626880
editor.background#303446
editor.findMatchBackground#674b59
editor.findMatchBorder#e7828433
editor.findMatchHighlightBackground#506373
editor.findMatchHighlightBorder#99d1db33
editor.findRangeHighlightBackground#506373
editor.findRangeHighlightBorder#99d1db33
editor.focusedStackFrameHighlightBackground#a6d18926
editor.foldBackground#99d1db40
editor.foreground#c6d0f5
editor.hoverHighlightBackground#99d1db40
editor.lineHighlightBackground#c6d0f512
editor.lineHighlightBorder#00000000
editor.rangeHighlightBackground#99d1db40
editor.rangeHighlightBorder#00000000
editor.selectionBackground#949cbb40
editor.selectionHighlightBackground#949cbb33
editor.selectionHighlightBorder#949cbb33
editor.stackFrameHighlightBackground#e5c89026
editor.wordHighlightBackground#949cbb33
editor.wordHighlightStrongBackground#8caaee33
editorBracketHighlight.foreground1#e78284
editorBracketHighlight.foreground2#ef9f76
editorBracketHighlight.foreground3#e5c890
editorBracketHighlight.foreground4#a6d189
editorBracketHighlight.foreground5#85c1dc
editorBracketHighlight.foreground6#ca9ee6
editorBracketHighlight.unexpectedBracket.foreground#ea999c
editorBracketMatch.background#949cbb1a
editorBracketMatch.border#949cbb
editorCodeLens.foreground#838ba7
editorCursor.background#303446
editorCursor.foreground#f2d5cf
editorError.background#00000000
editorError.border#00000000
editorError.foreground#e78284
editorGroup.border#626880
editorGroup.dropBackground#ca9ee633
editorGroup.emptyBackground#303446
editorGroupHeader.tabsBackground#232634
editorGutter.addedBackground#a6d189
editorGutter.background#303446
editorGutter.commentGlyphForeground#ca9ee6
editorGutter.commentRangeForeground#414559
editorGutter.deletedBackground#e78284
editorGutter.foldingControlForeground#949cbb
editorGutter.modifiedBackground#e5c890
editorHoverWidget.background#292c3c
editorHoverWidget.border#626880
editorHoverWidget.foreground#c6d0f5
editorIndentGuide.activeBackground#626880
editorIndentGuide.background#51576d
editorInfo.background#00000000
editorInfo.border#00000000
editorInfo.foreground#8caaee
editorInlayHint.background#292c3cbf
editorInlayHint.foreground#626880
editorInlayHint.parameterBackground#292c3cbf
editorInlayHint.parameterForeground#a5adce
editorInlayHint.typeBackground#292c3cbf
editorInlayHint.typeForeground#b5bfe2
editorLightBulb.foreground#e5c890
editorLineNumber.activeForeground#ca9ee6
editorLineNumber.foreground#838ba7
editorLink.activeForeground#ca9ee6
editorMarkerNavigation.background#292c3c
editorMarkerNavigationError.background#e78284
editorMarkerNavigationInfo.background#8caaee
editorMarkerNavigationWarning.background#ef9f76
editorOverviewRuler.background#292c3c
editorOverviewRuler.border#c6d0f512
editorOverviewRuler.modifiedForeground#e5c890
editorRuler.foreground#626880
editorStickyScrollHover.background#414559
editorSuggestWidget.background#292c3c
editorSuggestWidget.border#626880
editorSuggestWidget.foreground#c6d0f5
editorSuggestWidget.highlightForeground#ca9ee6
editorSuggestWidget.selectedBackground#414559
editorWarning.background#00000000
editorWarning.border#00000000
editorWarning.foreground#ef9f76
editorWhitespace.foreground#949cbb66
editorWidget.background#292c3c
editorWidget.foreground#c6d0f5
editorWidget.resizeBorder#626880
errorForeground#e78284
errorLens.errorBackground#e7828426
errorLens.errorBackgroundLight#e7828426
errorLens.errorForeground#e78284
errorLens.errorForegroundLight#e78284
errorLens.errorMessageBackground#e7828426
errorLens.hintBackground#a6d18926
errorLens.hintBackgroundLight#a6d18926
errorLens.hintForeground#a6d189
errorLens.hintForegroundLight#a6d189
errorLens.hintMessageBackground#a6d18926
errorLens.infoBackground#8caaee26
errorLens.infoBackgroundLight#8caaee26
errorLens.infoForeground#8caaee
errorLens.infoForegroundLight#8caaee
errorLens.infoMessageBackground#8caaee26
errorLens.statusBarErrorForeground#e78284
errorLens.statusBarHintForeground#a6d189
errorLens.statusBarIconErrorForeground#e78284
errorLens.statusBarIconWarningForeground#ef9f76
errorLens.statusBarInfoForeground#8caaee
errorLens.statusBarWarningForeground#ef9f76
errorLens.warningBackground#ef9f7626
errorLens.warningBackgroundLight#ef9f7626
errorLens.warningForeground#ef9f76
errorLens.warningForegroundLight#ef9f76
errorLens.warningMessageBackground#ef9f7626
extensionBadge.remoteBackground#8caaee
extensionBadge.remoteForeground#232634
extensionButton.prominentBackground#ca9ee6
extensionButton.prominentForeground#232634
extensionButton.prominentHoverBackground#d9baed
extensionButton.separator#303446
extensionIcon.preReleaseForeground#626880
extensionIcon.sponsorForeground#f4b8e4
extensionIcon.starForeground#e5c890
extensionIcon.verifiedForeground#a6d189
focusBorder#ca9ee6
foreground#c6d0f5
gitDecoration.addedResourceForeground#a6d189
gitDecoration.conflictingResourceForeground#ca9ee6
gitDecoration.deletedResourceForeground#e78284
gitDecoration.ignoredResourceForeground#737994
gitDecoration.modifiedResourceForeground#e5c890
gitDecoration.stageDeletedResourceForeground#e78284
gitDecoration.stageModifiedResourceForeground#e5c890
gitDecoration.submoduleResourceForeground#8caaee
gitDecoration.untrackedResourceForeground#a6d189
gitlens.closedAutolinkedIssueIconColor#ca9ee6
gitlens.closedPullRequestIconColor#e78284
gitlens.decorations.branchAheadForegroundColor#a6d189
gitlens.decorations.branchBehindForegroundColor#ef9f76
gitlens.decorations.branchDivergedForegroundColor#e5c890
gitlens.decorations.branchMissingUpstreamForegroundColor#ef9f76
gitlens.decorations.branchUnpublishedForegroundColor#a6d189
gitlens.decorations.statusMergingOrRebasingConflictForegroundColor#ea999c
gitlens.decorations.statusMergingOrRebasingForegroundColor#e5c890
gitlens.decorations.workspaceCurrentForegroundColor#ca9ee6
gitlens.decorations.workspaceRepoMissingForegroundColor#a5adce
gitlens.decorations.workspaceRepoOpenForegroundColor#ca9ee6
gitlens.decorations.worktreeHasUncommittedChangesForegroundColor#ef9f76
gitlens.decorations.worktreeMissingForegroundColor#ea999c
gitlens.graphChangesColumnAddedColor#a6d189
gitlens.graphChangesColumnDeletedColor#e78284
gitlens.graphLane10Color#f4b8e4
gitlens.graphLane1Color#ca9ee6
gitlens.graphLane2Color#e5c890
gitlens.graphLane3Color#8caaee
gitlens.graphLane4Color#eebebe
gitlens.graphLane5Color#a6d189
gitlens.graphLane6Color#babbf1
gitlens.graphLane7Color#f2d5cf
gitlens.graphLane8Color#e78284
gitlens.graphLane9Color#81c8be
gitlens.graphMinimapMarkerHeadColor#a6d189
gitlens.graphMinimapMarkerHighlightsColor#e5c890
gitlens.graphMinimapMarkerLocalBranchesColor#8caaee
gitlens.graphMinimapMarkerRemoteBranchesColor#769aeb
gitlens.graphMinimapMarkerStashesColor#ca9ee6
gitlens.graphMinimapMarkerTagsColor#eebebe
gitlens.graphMinimapMarkerUpstreamColor#98ca77
gitlens.graphScrollMarkerHeadColor#a6d189
gitlens.graphScrollMarkerHighlightsColor#e5c890
gitlens.graphScrollMarkerLocalBranchesColor#8caaee
gitlens.graphScrollMarkerRemoteBranchesColor#769aeb
gitlens.graphScrollMarkerStashesColor#ca9ee6
gitlens.graphScrollMarkerTagsColor#eebebe
gitlens.graphScrollMarkerUpstreamColor#98ca77
gitlens.gutterBackgroundColor#4145594d
gitlens.gutterForegroundColor#c6d0f5
gitlens.gutterUncommittedForegroundColor#ca9ee6
gitlens.lineHighlightBackgroundColor#ca9ee626
gitlens.lineHighlightOverviewRulerColor#ca9ee6cc
gitlens.mergedPullRequestIconColor#ca9ee6
gitlens.openAutolinkedIssueIconColor#a6d189
gitlens.openPullRequestIconColor#a6d189
gitlens.trailingLineBackgroundColor#00000000
gitlens.trailingLineForegroundColor#c6d0f54d
gitlens.unpublishedChangesIconColor#a6d189
gitlens.unpublishedCommitIconColor#a6d189
gitlens.unpulledChangesIconColor#ef9f76
icon.foreground#ca9ee6
input.background#414559
input.border#00000000
input.foreground#c6d0f5
input.placeholderForeground#c6d0f573
inputOption.activeBackground#626880
inputOption.activeBorder#ca9ee6
inputOption.activeForeground#c6d0f5
inputValidation.errorBackground#e78284
inputValidation.errorBorder#23263433
inputValidation.errorForeground#232634
inputValidation.infoBackground#8caaee
inputValidation.infoBorder#23263433
inputValidation.infoForeground#232634
inputValidation.warningBackground#ef9f76
inputValidation.warningBorder#23263433
inputValidation.warningForeground#232634
issues.closed#ca9ee6
issues.newIssueDecoration#f2d5cf
issues.open#a6d189
list.activeSelectionBackground#414559
list.activeSelectionForeground#c6d0f5
list.dropBackground#ca9ee633
list.focusAndSelectionBackground#51576d
list.focusBackground#414559
list.focusForeground#c6d0f5
list.focusOutline#00000000
list.highlightForeground#ca9ee6
list.hoverBackground#41455980
list.hoverForeground#c6d0f5
list.inactiveSelectionBackground#414559
list.inactiveSelectionForeground#c6d0f5
list.warningForeground#ef9f76
listFilterWidget.background#51576d
listFilterWidget.noMatchesOutline#e78284
listFilterWidget.outline#00000000
menu.background#303446
menu.border#30344680
menu.foreground#c6d0f5
menu.selectionBackground#626880
menu.selectionBorder#00000000
menu.selectionForeground#c6d0f5
menu.separatorBackground#626880
menubar.selectionBackground#51576d
menubar.selectionForeground#c6d0f5
merge.commonContentBackground#51576d
merge.commonHeaderBackground#626880
merge.currentContentBackground#a6d18933
merge.currentHeaderBackground#a6d18966
merge.incomingContentBackground#8caaee33
merge.incomingHeaderBackground#8caaee66
minimap.background#292c3c80
minimap.errorHighlight#e78284bf
minimap.findMatchHighlight#99d1db4d
minimap.selectionHighlight#626880bf
minimap.selectionOccurrenceHighlight#626880bf
minimap.warningHighlight#ef9f76bf
minimapGutter.addedBackground#a6d189bf
minimapGutter.deletedBackground#e78284bf
minimapGutter.modifiedBackground#e5c890bf
minimapSlider.activeBackground#ca9ee699
minimapSlider.background#ca9ee633
minimapSlider.hoverBackground#ca9ee666
notificationCenter.border#ca9ee6
notificationCenterHeader.background#292c3c
notificationCenterHeader.foreground#c6d0f5
notificationLink.foreground#8caaee
notifications.background#292c3c
notifications.border#ca9ee6
notifications.foreground#c6d0f5
notificationsErrorIcon.foreground#e78284
notificationsInfoIcon.foreground#8caaee
notificationsWarningIcon.foreground#ef9f76
notificationToast.border#ca9ee6
panel.background#303446
panel.border#626880
panelSection.border#626880
panelSection.dropBackground#ca9ee633
panelTitle.activeBorder#ca9ee6
panelTitle.activeForeground#c6d0f5
panelTitle.inactiveForeground#a5adce
peekView.border#ca9ee6
peekViewEditor.background#292c3c
peekViewEditor.matchHighlightBackground#99d1db4d
peekViewEditor.matchHighlightBorder#00000000
peekViewEditorGutter.background#292c3c
peekViewResult.background#292c3c
peekViewResult.fileForeground#c6d0f5
peekViewResult.lineForeground#c6d0f5
peekViewResult.matchHighlightBackground#99d1db4d
peekViewResult.selectionBackground#414559
peekViewResult.selectionForeground#c6d0f5
peekViewTitle.background#303446
peekViewTitleDescription.foreground#b5bfe2b3
peekViewTitleLabel.foreground#c6d0f5
pickerGroup.border#ca9ee6
pickerGroup.foreground#ca9ee6
problemsErrorIcon.foreground#e78284
problemsInfoIcon.foreground#8caaee
problemsWarningIcon.foreground#ef9f76
progressBar.background#ca9ee6
pullRequests.closed#e78284
pullRequests.draft#949cbb
pullRequests.merged#ca9ee6
pullRequests.notification#c6d0f5
pullRequests.open#a6d189
sash.hoverBorder#ca9ee6
scrollbar.shadow#232634
scrollbarSlider.activeBackground#41455966
scrollbarSlider.background#62688080
scrollbarSlider.hoverBackground#737994
selection.background#ca9ee666
settings.dropdownBackground#51576d
settings.dropdownListBorder#00000000
settings.focusedRowBackground#62688033
settings.headerForeground#c6d0f5
settings.modifiedItemIndicator#ca9ee6
settings.numberInputBackground#51576d
settings.numberInputBorder#00000000
settings.textInputBackground#51576d
settings.textInputBorder#00000000
sideBar.background#292c3c
sideBar.border#00000000
sideBar.dropBackground#ca9ee633
sideBar.foreground#c6d0f5
sideBarSectionHeader.background#292c3c
sideBarSectionHeader.foreground#c6d0f5
sideBarTitle.foreground#ca9ee6
statusBar.background#232634
statusBar.border#00000000
statusBar.debuggingBackground#ef9f76
statusBar.debuggingBorder#00000000
statusBar.debuggingForeground#232634
statusBar.foreground#c6d0f5
statusBar.noFolderBackground#232634
statusBar.noFolderBorder#00000000
statusBar.noFolderForeground#c6d0f5
statusBarItem.activeBackground#62688066
statusBarItem.errorBackground#00000000
statusBarItem.errorForeground#e78284
statusBarItem.hoverBackground#62688033
statusBarItem.prominentBackground#00000000
statusBarItem.prominentForeground#ca9ee6
statusBarItem.prominentHoverBackground#62688033
statusBarItem.remoteBackground#8caaee
statusBarItem.remoteForeground#232634
statusBarItem.warningBackground#00000000
statusBarItem.warningForeground#ef9f76
symbolIcon.arrayForeground#ef9f76
symbolIcon.booleanForeground#ca9ee6
symbolIcon.classForeground#e5c890
symbolIcon.colorForeground#f4b8e4
symbolIcon.constantForeground#ef9f76
symbolIcon.constructorForeground#babbf1
symbolIcon.enumeratorForeground#e5c890
symbolIcon.enumeratorMemberForeground#e5c890
symbolIcon.eventForeground#f4b8e4
symbolIcon.fieldForeground#c6d0f5
symbolIcon.fileForeground#ca9ee6
symbolIcon.folderForeground#ca9ee6
symbolIcon.functionForeground#8caaee
symbolIcon.interfaceForeground#e5c890
symbolIcon.keyForeground#81c8be
symbolIcon.keywordForeground#ca9ee6
symbolIcon.methodForeground#8caaee
symbolIcon.moduleForeground#c6d0f5
symbolIcon.namespaceForeground#e5c890
symbolIcon.nullForeground#ea999c
symbolIcon.numberForeground#ef9f76
symbolIcon.objectForeground#e5c890
symbolIcon.operatorForeground#81c8be
symbolIcon.packageForeground#eebebe
symbolIcon.propertyForeground#ea999c
symbolIcon.referenceForeground#e5c890
symbolIcon.snippetForeground#eebebe
symbolIcon.stringForeground#a6d189
symbolIcon.structForeground#81c8be
symbolIcon.textForeground#c6d0f5
symbolIcon.typeParameterForeground#ea999c
symbolIcon.unitForeground#c6d0f5
symbolIcon.variableForeground#c6d0f5
tab.activeBackground#303446
tab.activeBorder#00000000
tab.activeBorderTop#ca9ee6
tab.activeForeground#ca9ee6
tab.activeModifiedBorder#e5c890
tab.border#292c3c
tab.hoverBackground#3a3f55
tab.hoverBorder#00000000
tab.hoverForeground#ca9ee6
tab.inactiveBackground#292c3c
tab.inactiveForeground#737994
tab.inactiveModifiedBorder#e5c8904d
tab.lastPinnedBorder#ca9ee6
tab.unfocusedActiveBackground#292c3c
tab.unfocusedActiveBorder#00000000
tab.unfocusedActiveBorderTop#ca9ee64d
tab.unfocusedInactiveBackground#1f212d
table.headerBackground#414559
table.headerForeground#c6d0f5
terminal.ansiBlack#51576d
terminal.ansiBlue#8caaee
terminal.ansiBrightBlack#626880
terminal.ansiBrightBlue#7b9ef0
terminal.ansiBrightCyan#5abfb5
terminal.ansiBrightGreen#8ec772
terminal.ansiBrightMagenta#f2a4db
terminal.ansiBrightRed#e67172
terminal.ansiBrightWhite#b5bfe2
terminal.ansiBrightYellow#d9ba73
terminal.ansiCyan#81c8be
terminal.ansiGreen#a6d189
terminal.ansiMagenta#f4b8e4
terminal.ansiRed#e78284
terminal.ansiWhite#a5adce
terminal.ansiYellow#e5c890
terminal.border#626880
terminal.dropBackground#ca9ee633
terminal.foreground#c6d0f5
terminal.inactiveSelectionBackground#62688080
terminal.selectionBackground#626880
terminal.tab.activeBorder#ca9ee6
terminalCommandDecoration.defaultBackground#626880
terminalCommandDecoration.errorBackground#e78284
terminalCommandDecoration.successBackground#a6d189
terminalCursor.background#303446
terminalCursor.foreground#f2d5cf
textBlockQuote.background#292c3c
textBlockQuote.border#232634
textCodeBlock.background#303446
textLink.activeForeground#99d1db
textLink.foreground#8caaee
textPreformat.foreground#c6d0f5
textSeparator.foreground#ca9ee6
titleBar.activeBackground#232634
titleBar.activeForeground#c6d0f5
titleBar.border#00000000
titleBar.inactiveBackground#232634
titleBar.inactiveForeground#c6d0f580
tree.inactiveIndentGuidesStroke#51576d
tree.indentGuidesStroke#949cbb
walkThrough.embeddedEditorBackground#3034464d
welcomePage.progress.background#232634
welcomePage.progress.foreground#ca9ee6
welcomePage.tileBackground#292c3c
widget.shadow#292c3c80
window.activeBorder#00000000
window.inactiveBorder#00000000

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
text, source, variable.other.readwrite, punctuation.definition.variable	#c6d0f5	—
punctuation	#949cbb
comment, punctuation.definition.comment	#949cbb	italic
string, punctuation.definition.string	#a6d189	—
constant.character.escape	#f4b8e4	—
constant.numeric, variable.other.constant, entity.name.constant, constant.language.boolean, constant.language.false, constant.language.true, keyword.other.unit.user-defined, keyword.other.unit.suffix.floating-point	#ef9f76	—
keyword, keyword.operator.word, keyword.operator.new, variable.language.super, support.type.primitive, storage.type, storage.modifier, punctuation.definition.keyword	#ca9ee6
entity.name.tag.documentation	#ca9ee6	—
keyword.operator, punctuation.accessor, punctuation.definition.generic, meta.function.closure punctuation.section.parameters, punctuation.definition.tag, punctuation.separator.key-value	#81c8be	—
entity.name.function, meta.function-call.method, support.function, support.function.misc, variable.function	#8caaee	italic
entity.name.class, entity.other.inherited-class, support.class, meta.function-call.constructor, entity.name.struct	#e5c890	italic
entity.name.enum	#e5c890	italic
meta.enum variable.other.readwrite, variable.other.enummember	#81c8be	—
meta.property.object	#81c8be	—
meta.type, meta.type-alias, support.type, entity.name.type	#e5c890	italic
meta.annotation variable.function, meta.annotation variable.annotation.function, meta.annotation punctuation.definition.annotation, meta.decorator, punctuation.decorator	#ef9f76	—
variable.parameter, meta.function.parameters	#ea999c	italic
constant.language, support.function.builtin	#e78284	—
entity.other.attribute-name.documentation	#e78284	—
keyword.control.directive, punctuation.definition.directive	#e5c890	—
punctuation.definition.typeparameters	#99d1db	—
entity.name.namespace	#e5c890	—
support.type.property-name.css	#8caaee
variable.language.this, variable.language.this punctuation.definition.variable	#e78284	—
variable.object.property	#c6d0f5	—
string.template variable, string variable	#c6d0f5	—
keyword.operator.new	—	bold
storage.modifier.specifier.extern.cpp	#ca9ee6	—
entity.name.scope-resolution.template.call.cpp, entity.name.scope-resolution.parameter.cpp, entity.name.scope-resolution.cpp, entity.name.scope-resolution.function.definition.cpp	#e5c890	—
storage.type.class.doxygen	—
storage.modifier.reference.cpp	#81c8be	—
meta.interpolation.cs	#c6d0f5	—
comment.block.documentation.cs	#c6d0f5	—
source.css entity.other.attribute-name.class.css, entity.other.attribute-name.parent-selector.css punctuation.definition.entity.css	#e5c890	—
punctuation.separator.operator.css	#81c8be	—
source.css entity.other.attribute-name.pseudo-class	#81c8be	—
source.css constant.other.unicode-range	#ef9f76	—
source.css variable.parameter.url	#a6d189
support.type.vendored.property-name	#99d1db	—
source.css meta.property-value variable, source.css meta.property-value variable.other.less, source.css meta.property-value variable.other.less punctuation.definition.variable.less, meta.definition.variable.scss	#ea999c	—
source.css meta.property-list variable, meta.property-list variable.other.less, meta.property-list variable.other.less punctuation.definition.variable.less	#8caaee	—
keyword.other.unit.percentage.css	#ef9f76	—
source.css meta.attribute-selector	#a6d189	—
keyword.other.definition.ini, punctuation.support.type.property-name.json, support.type.property-name.json, punctuation.support.type.property-name.toml, support.type.property-name.toml, entity.name.tag.yaml, punctuation.support.type.property-name.yaml, support.type.property-name.yaml	#8caaee
constant.language.json, constant.language.yaml	#ef9f76	—
entity.name.type.anchor.yaml, variable.other.alias.yaml	#e5c890
support.type.property-name.table, entity.name.section.group-title.ini	#e5c890	—
constant.other.time.datetime.offset.toml	#f4b8e4	—
punctuation.definition.anchor.yaml, punctuation.definition.alias.yaml	#f4b8e4	—
entity.other.document.begin.yaml	#f4b8e4	—
markup.changed.diff	#ef9f76	—
meta.diff.header.from-file, meta.diff.header.to-file, punctuation.definition.from-file.diff, punctuation.definition.to-file.diff	#8caaee	—
markup.inserted.diff	#a6d189	—
markup.deleted.diff	#e78284	—
variable.other.env	#8caaee	—
string.quoted variable.other.env	#c6d0f5	—
support.function.builtin.gdscript	#8caaee	—
constant.language.gdscript	#ef9f76	—
comment meta.annotation.go	#ea999c	—
comment meta.annotation.parameters.go	#ef9f76	—
constant.language.go	#ef9f76	—
variable.graphql	#c6d0f5	—
string.unquoted.alias.graphql	#eebebe	—
constant.character.enum.graphql	#81c8be	—
meta.objectvalues.graphql constant.object.key.graphql string.unquoted.graphql	#eebebe	—
keyword.other.doctype, meta.tag.sgml.doctype punctuation.definition.tag, meta.tag.metadata.doctype entity.name.tag, meta.tag.metadata.doctype punctuation.definition.tag	#ca9ee6	—
entity.name.tag	#8caaee
text.html constant.character.entity, text.html constant.character.entity punctuation, constant.character.entity.xml, constant.character.entity.xml punctuation, constant.character.entity.js.jsx, constant.charactger.entity.js.jsx punctuation, constant.character.entity.tsx, constant.character.entity.tsx punctuation	#e78284	—
entity.other.attribute-name	#e5c890	—
support.class.component, support.class.component.jsx, support.class.component.tsx, support.class.component.vue	#f4b8e4
punctuation.definition.annotation, storage.type.annotation	#ef9f76	—
constant.other.enum.java	#81c8be	—
storage.modifier.import.java	#c6d0f5	—
comment.block.javadoc.java keyword.other.documentation.javadoc.java	—
meta.export variable.other.readwrite.js	#ea999c	—
variable.other.constant.js, variable.other.constant.ts, variable.other.property.js, variable.other.property.ts	#c6d0f5	—
variable.other.jsdoc, comment.block.documentation variable.other	#ea999c
storage.type.class.jsdoc	—
support.type.object.console.js	#c6d0f5	—
support.constant.node, support.type.object.module.js	#ca9ee6	—
storage.modifier.implements	#ca9ee6	—
constant.language.null.js, constant.language.null.ts, constant.language.undefined.js, constant.language.undefined.ts, support.type.builtin.ts	#ca9ee6	—
variable.parameter.generic	#e5c890	—
keyword.declaration.function.arrow.js, storage.type.function.arrow.ts	#81c8be	—
punctuation.decorator.ts	#8caaee	italic
keyword.operator.expression.in.js, keyword.operator.expression.in.ts, keyword.operator.expression.infer.ts, keyword.operator.expression.instanceof.js, keyword.operator.expression.instanceof.ts, keyword.operator.expression.is, keyword.operator.expression.keyof.ts, keyword.operator.expression.of.js, keyword.operator.expression.of.ts, keyword.operator.expression.typeof.ts	#ca9ee6	—
support.function.macro.julia	#81c8be	italic
constant.language.julia	#ef9f76	—
constant.other.symbol.julia	#ea999c	—
text.tex keyword.control.preamble	#81c8be	—
text.tex support.function.be	#99d1db	—
constant.other.general.math.tex	#eebebe	—
variable.language.liquid	#f4b8e4	—
comment.line.double-dash.documentation.lua storage.type.annotation.lua	#ca9ee6
comment.line.double-dash.documentation.lua entity.name.variable.lua, comment.line.double-dash.documentation.lua variable.lua	#c6d0f5	—
heading.1.markdown punctuation.definition.heading.markdown, heading.1.markdown, heading.1.quarto punctuation.definition.heading.quarto, heading.1.quarto, markup.heading.atx.1.mdx, markup.heading.atx.1.mdx punctuation.definition.heading.mdx, markup.heading.setext.1.markdown, markup.heading.heading-0.asciidoc	#e78284	—
heading.2.markdown punctuation.definition.heading.markdown, heading.2.markdown, heading.2.quarto punctuation.definition.heading.quarto, heading.2.quarto, markup.heading.atx.2.mdx, markup.heading.atx.2.mdx punctuation.definition.heading.mdx, markup.heading.setext.2.markdown, markup.heading.heading-1.asciidoc	#ef9f76	—
heading.3.markdown punctuation.definition.heading.markdown, heading.3.markdown, heading.3.quarto punctuation.definition.heading.quarto, heading.3.quarto, markup.heading.atx.3.mdx, markup.heading.atx.3.mdx punctuation.definition.heading.mdx, markup.heading.heading-2.asciidoc	#e5c890	—
heading.4.markdown punctuation.definition.heading.markdown, heading.4.markdown, heading.4.quarto punctuation.definition.heading.quarto, heading.4.quarto, markup.heading.atx.4.mdx, markup.heading.atx.4.mdx punctuation.definition.heading.mdx, markup.heading.heading-3.asciidoc	#a6d189	—
heading.5.markdown punctuation.definition.heading.markdown, heading.5.markdown, heading.5.quarto punctuation.definition.heading.quarto, heading.5.quarto, markup.heading.atx.5.mdx, markup.heading.atx.5.mdx punctuation.definition.heading.mdx, markup.heading.heading-4.asciidoc	#85c1dc	—
heading.6.markdown punctuation.definition.heading.markdown, heading.6.markdown, heading.6.quarto punctuation.definition.heading.quarto, heading.6.quarto, markup.heading.atx.6.mdx, markup.heading.atx.6.mdx punctuation.definition.heading.mdx, markup.heading.heading-5.asciidoc	#babbf1	—
markup.bold	#e78284	bold
markup.italic	#e78284	italic
markup.strikethrough	#a5adce	strikethrough
punctuation.definition.link, markup.underline.link	#8caaee	—
text.html.markdown punctuation.definition.link.title, text.html.quarto punctuation.definition.link.title, string.other.link.title.markdown, string.other.link.title.quarto, markup.link, punctuation.definition.constant.markdown, punctuation.definition.constant.quarto, constant.other.reference.link.markdown, constant.other.reference.link.quarto, markup.substitution.attribute-reference	#babbf1	—
punctuation.definition.raw.markdown, punctuation.definition.raw.quarto, markup.inline.raw.string.markdown, markup.inline.raw.string.quarto, markup.raw.block.markdown, markup.raw.block.quarto	#a6d189	—
fenced_code.block.language	#99d1db	—
markup.fenced_code.block punctuation.definition, markup.raw support.asciidoc	#949cbb	—
markup.quote, punctuation.definition.quote.begin	#f4b8e4	—
meta.separator.markdown	#81c8be	—
punctuation.definition.list.begin.markdown, punctuation.definition.list.begin.quarto, markup.list.bullet	#81c8be	—
markup.heading.quarto	—	bold
entity.other.attribute-name.multipart.nix, entity.other.attribute-name.single.nix	#8caaee	—
variable.parameter.name.nix	#c6d0f5
meta.embedded variable.parameter.name.nix	#babbf1
string.unquoted.path.nix	#f4b8e4
support.attribute.builtin, meta.attribute.php	#e5c890	—
meta.function.parameters.php punctuation.definition.variable.php	#ea999c	—
constant.language.php	#ca9ee6	—
text.html.php support.function	#99d1db	—
keyword.other.phpdoc.php	—
support.variable.magic.python, meta.function-call.arguments.python	#c6d0f5	—
support.function.magic.python	#99d1db	italic
variable.parameter.function.language.special.self.python, variable.language.special.self.python	#e78284	italic
keyword.control.flow.python, keyword.operator.logical.python	#ca9ee6	—
storage.type.function.python	#ca9ee6	—
support.token.decorator.python, meta.function.decorator.identifier.python	#99d1db	—
meta.function-call.python	#8caaee	—
entity.name.function.decorator.python, punctuation.definition.decorator.python	#ef9f76	italic
constant.character.format.placeholder.other.python	#f4b8e4	—
support.type.exception.python, support.function.builtin.python	#ef9f76	—
support.type.python	#ef9f76	—
constant.language.python	#ca9ee6	—
meta.indexed-name.python, meta.item-access.python	#ea999c	italic
storage.type.string.python	#a6d189	italic
meta.function.parameters.python	—
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end	#f4b8e4	—
keyword.control.anchor.regexp	#ca9ee6	—
string.regexp.ts	#c6d0f5	—
punctuation.definition.group.regexp, keyword.other.back-reference.regexp	#a6d189	—
punctuation.definition.character-class.regexp	#e5c890	—
constant.other.character-class.regexp	#f4b8e4	—
constant.other.character-class.range.regexp	#f2d5cf	—
keyword.operator.quantifier.regexp	#81c8be	—
constant.character.numeric.regexp	#ef9f76	—
punctuation.definition.group.no-capture.regexp, meta.assertion.look-ahead.regexp, meta.assertion.negative-look-ahead.regexp	#8caaee	—
meta.annotation.rust, meta.annotation.rust punctuation, meta.attribute.rust, punctuation.definition.attribute.rust	#e5c890	italic
meta.attribute.rust string.quoted.double.rust, meta.attribute.rust string.quoted.single.char.rust	—
entity.name.function.macro.rules.rust, storage.type.module.rust, storage.modifier.rust, storage.type.struct.rust, storage.type.enum.rust, storage.type.trait.rust, storage.type.union.rust, storage.type.impl.rust, storage.type.rust, storage.type.function.rust, storage.type.type.rust	#ca9ee6
entity.name.type.numeric.rust	#ca9ee6
meta.generic.rust	#ef9f76	—
entity.name.impl.rust	#e5c890	italic
entity.name.module.rust	#ef9f76	—
entity.name.trait.rust	#e5c890	italic
storage.type.source.rust	#e5c890	—
entity.name.union.rust	#e5c890	—
meta.enum.rust storage.type.source.rust	#81c8be	—
support.macro.rust, meta.macro.rust support.function.rust, entity.name.function.macro.rust	#8caaee	italic
storage.modifier.lifetime.rust, entity.name.type.lifetime	#8caaee	italic
string.quoted.double.rust constant.other.placeholder.rust	#f4b8e4	—
meta.function.return-type.rust meta.generic.rust storage.type.rust	#c6d0f5	—
meta.function.call.rust	#8caaee	—
punctuation.brackets.angle.rust	#99d1db	—
constant.other.caps.rust	#ef9f76	—
meta.function.definition.rust variable.other.rust	#ea999c	—
meta.function.call.rust variable.other.rust	#c6d0f5	—
variable.language.self.rust	#e78284	—
variable.other.metavariable.name.rust, meta.macro.metavariable.rust keyword.operator.macro.dollar.rust	#f4b8e4	—
comment.line.shebang, comment.line.shebang punctuation.definition.comment, comment.line.shebang, punctuation.definition.comment.shebang.shell, meta.shebang.shell	#f4b8e4	italic
comment.line.shebang constant.language	#81c8be	italic
meta.function-call.arguments.shell punctuation.definition.variable.shell, meta.function-call.arguments.shell punctuation.section.interpolation, meta.function-call.arguments.shell punctuation.definition.variable.shell, meta.function-call.arguments.shell punctuation.section.interpolation	#e78284	—
meta.string meta.interpolation.parameter.shell variable.other.readwrite	#ef9f76	italic
source.shell punctuation.section.interpolation, punctuation.definition.evaluation.backticks.shell	#81c8be	—
entity.name.tag.heredoc.shell	#ca9ee6	—
string.quoted.double.shell variable.other.normal.shell	#c6d0f5	—

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