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 Macchiato

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#181926
activityBar.border#00000000
activityBar.dropBorder#c6a0f633
activityBar.foreground#c6a0f6
activityBar.inactiveForeground#6e738d
activityBarBadge.background#c6a0f6
activityBarBadge.foreground#181926
activityBarTop.activeBorder#00000000
activityBarTop.dropBorder#c6a0f633
activityBarTop.foreground#c6a0f6
activityBarTop.inactiveForeground#6e738d
badge.background#494d64
badge.foreground#cad3f5
banner.background#494d64
banner.foreground#cad3f5
banner.iconForeground#cad3f5
breadcrumb.activeSelectionForeground#c6a0f6
breadcrumb.background#24273a
breadcrumb.focusForeground#c6a0f6
breadcrumb.foreground#cad3f5cc
breadcrumbPicker.background#1e2030
button.background#c6a0f6
button.border#00000000
button.foreground#181926
button.hoverBackground#dac1f9
button.secondaryBackground#5b6078
button.secondaryBorder#c6a0f6
button.secondaryForeground#cad3f5
button.secondaryHoverBackground#6a708c
button.separator#00000000
charts.blue#8aadf4
charts.foreground#cad3f5
charts.green#a6da95
charts.lines#b8c0e0
charts.orange#f5a97f
charts.purple#c6a0f6
charts.red#ed8796
charts.yellow#eed49f
checkbox.background#494d64
checkbox.border#00000000
checkbox.foreground#c6a0f6
commandCenter.activeBackground#5b607833
commandCenter.activeBorder#c6a0f6
commandCenter.activeForeground#c6a0f6
commandCenter.background#1e2030
commandCenter.border#00000000
commandCenter.foreground#b8c0e0
commandCenter.inactiveBorder#00000000
commandCenter.inactiveForeground#b8c0e0
debugConsole.errorForeground#ed8796
debugConsole.infoForeground#8aadf4
debugConsole.sourceForeground#f4dbd6
debugConsole.warningForeground#f5a97f
debugConsoleInputIcon.foreground#cad3f5
debugExceptionWidget.background#181926
debugExceptionWidget.border#c6a0f6
debugIcon.breakpointCurrentStackframeForeground#5b6078
debugIcon.breakpointDisabledForeground#ed879699
debugIcon.breakpointForeground#ed8796
debugIcon.breakpointStackframeForeground#5b6078
debugIcon.breakpointUnverifiedForeground#a47487
debugIcon.continueForeground#a6da95
debugIcon.disconnectForeground#5b6078
debugIcon.pauseForeground#8aadf4
debugIcon.restartForeground#8bd5ca
debugIcon.startForeground#a6da95
debugIcon.stepBackForeground#5b6078
debugIcon.stepIntoForeground#cad3f5
debugIcon.stepOutForeground#cad3f5
debugIcon.stepOverForeground#c6a0f6
debugIcon.stopForeground#ed8796
debugTokenExpression.boolean#c6a0f6
debugTokenExpression.error#ed8796
debugTokenExpression.number#f5a97f
debugTokenExpression.string#a6da95
debugToolBar.background#181926
debugToolBar.border#00000000
descriptionForeground#cad3f5
diffEditor.border#5b6078
diffEditor.diagonalFill#5b607899
diffEditor.insertedLineBackground#a6da9526
diffEditor.insertedTextBackground#a6da951a
diffEditor.removedLineBackground#ed879626
diffEditor.removedTextBackground#ed87961a
diffEditorOverview.insertedForeground#a6da95cc
diffEditorOverview.removedForeground#ed8796cc
disabledForeground#a5adcb
dropdown.background#1e2030
dropdown.border#c6a0f6
dropdown.foreground#cad3f5
dropdown.listBackground#5b6078
editor.background#24273a
editor.findMatchBackground#604456
editor.findMatchBorder#ed879633
editor.findMatchHighlightBackground#455c6d
editor.findMatchHighlightBorder#91d7e333
editor.findRangeHighlightBackground#455c6d
editor.findRangeHighlightBorder#91d7e333
editor.focusedStackFrameHighlightBackground#a6da9526
editor.foldBackground#91d7e340
editor.foreground#cad3f5
editor.hoverHighlightBackground#91d7e340
editor.lineHighlightBackground#cad3f512
editor.lineHighlightBorder#00000000
editor.rangeHighlightBackground#91d7e340
editor.rangeHighlightBorder#00000000
editor.selectionBackground#939ab740
editor.selectionHighlightBackground#939ab733
editor.selectionHighlightBorder#939ab733
editor.stackFrameHighlightBackground#eed49f26
editor.wordHighlightBackground#939ab733
editor.wordHighlightStrongBackground#8aadf433
editorBracketHighlight.foreground1#ed8796
editorBracketHighlight.foreground2#f5a97f
editorBracketHighlight.foreground3#eed49f
editorBracketHighlight.foreground4#a6da95
editorBracketHighlight.foreground5#7dc4e4
editorBracketHighlight.foreground6#c6a0f6
editorBracketHighlight.unexpectedBracket.foreground#ee99a0
editorBracketMatch.background#939ab71a
editorBracketMatch.border#939ab7
editorCodeLens.foreground#8087a2
editorCursor.background#24273a
editorCursor.foreground#f4dbd6
editorError.background#00000000
editorError.border#00000000
editorError.foreground#ed8796
editorGroup.border#5b6078
editorGroup.dropBackground#c6a0f633
editorGroup.emptyBackground#24273a
editorGroupHeader.tabsBackground#181926
editorGutter.addedBackground#a6da95
editorGutter.background#24273a
editorGutter.commentGlyphForeground#c6a0f6
editorGutter.commentRangeForeground#363a4f
editorGutter.deletedBackground#ed8796
editorGutter.foldingControlForeground#939ab7
editorGutter.modifiedBackground#eed49f
editorHoverWidget.background#1e2030
editorHoverWidget.border#5b6078
editorHoverWidget.foreground#cad3f5
editorIndentGuide.activeBackground#5b6078
editorIndentGuide.background#494d64
editorInfo.background#00000000
editorInfo.border#00000000
editorInfo.foreground#8aadf4
editorInlayHint.background#1e2030bf
editorInlayHint.foreground#5b6078
editorInlayHint.parameterBackground#1e2030bf
editorInlayHint.parameterForeground#a5adcb
editorInlayHint.typeBackground#1e2030bf
editorInlayHint.typeForeground#b8c0e0
editorLightBulb.foreground#eed49f
editorLineNumber.activeForeground#c6a0f6
editorLineNumber.foreground#8087a2
editorLink.activeForeground#c6a0f6
editorMarkerNavigation.background#1e2030
editorMarkerNavigationError.background#ed8796
editorMarkerNavigationInfo.background#8aadf4
editorMarkerNavigationWarning.background#f5a97f
editorOverviewRuler.background#1e2030
editorOverviewRuler.border#cad3f512
editorOverviewRuler.modifiedForeground#eed49f
editorRuler.foreground#5b6078
editorStickyScrollHover.background#363a4f
editorSuggestWidget.background#1e2030
editorSuggestWidget.border#5b6078
editorSuggestWidget.foreground#cad3f5
editorSuggestWidget.highlightForeground#c6a0f6
editorSuggestWidget.selectedBackground#363a4f
editorWarning.background#00000000
editorWarning.border#00000000
editorWarning.foreground#f5a97f
editorWhitespace.foreground#939ab766
editorWidget.background#1e2030
editorWidget.foreground#cad3f5
editorWidget.resizeBorder#5b6078
errorForeground#ed8796
errorLens.errorBackground#ed879626
errorLens.errorBackgroundLight#ed879626
errorLens.errorForeground#ed8796
errorLens.errorForegroundLight#ed8796
errorLens.errorMessageBackground#ed879626
errorLens.hintBackground#a6da9526
errorLens.hintBackgroundLight#a6da9526
errorLens.hintForeground#a6da95
errorLens.hintForegroundLight#a6da95
errorLens.hintMessageBackground#a6da9526
errorLens.infoBackground#8aadf426
errorLens.infoBackgroundLight#8aadf426
errorLens.infoForeground#8aadf4
errorLens.infoForegroundLight#8aadf4
errorLens.infoMessageBackground#8aadf426
errorLens.statusBarErrorForeground#ed8796
errorLens.statusBarHintForeground#a6da95
errorLens.statusBarIconErrorForeground#ed8796
errorLens.statusBarIconWarningForeground#f5a97f
errorLens.statusBarInfoForeground#8aadf4
errorLens.statusBarWarningForeground#f5a97f
errorLens.warningBackground#f5a97f26
errorLens.warningBackgroundLight#f5a97f26
errorLens.warningForeground#f5a97f
errorLens.warningForegroundLight#f5a97f
errorLens.warningMessageBackground#f5a97f26
extensionBadge.remoteBackground#8aadf4
extensionBadge.remoteForeground#181926
extensionButton.prominentBackground#c6a0f6
extensionButton.prominentForeground#181926
extensionButton.prominentHoverBackground#dac1f9
extensionButton.separator#24273a
extensionIcon.preReleaseForeground#5b6078
extensionIcon.sponsorForeground#f5bde6
extensionIcon.starForeground#eed49f
extensionIcon.verifiedForeground#a6da95
focusBorder#c6a0f6
foreground#cad3f5
gitDecoration.addedResourceForeground#a6da95
gitDecoration.conflictingResourceForeground#c6a0f6
gitDecoration.deletedResourceForeground#ed8796
gitDecoration.ignoredResourceForeground#6e738d
gitDecoration.modifiedResourceForeground#eed49f
gitDecoration.stageDeletedResourceForeground#ed8796
gitDecoration.stageModifiedResourceForeground#eed49f
gitDecoration.submoduleResourceForeground#8aadf4
gitDecoration.untrackedResourceForeground#a6da95
gitlens.closedAutolinkedIssueIconColor#c6a0f6
gitlens.closedPullRequestIconColor#ed8796
gitlens.decorations.branchAheadForegroundColor#a6da95
gitlens.decorations.branchBehindForegroundColor#f5a97f
gitlens.decorations.branchDivergedForegroundColor#eed49f
gitlens.decorations.branchMissingUpstreamForegroundColor#f5a97f
gitlens.decorations.branchUnpublishedForegroundColor#a6da95
gitlens.decorations.statusMergingOrRebasingConflictForegroundColor#ee99a0
gitlens.decorations.statusMergingOrRebasingForegroundColor#eed49f
gitlens.decorations.workspaceCurrentForegroundColor#c6a0f6
gitlens.decorations.workspaceRepoMissingForegroundColor#a5adcb
gitlens.decorations.workspaceRepoOpenForegroundColor#c6a0f6
gitlens.decorations.worktreeHasUncommittedChangesForegroundColor#f5a97f
gitlens.decorations.worktreeMissingForegroundColor#ee99a0
gitlens.graphChangesColumnAddedColor#a6da95
gitlens.graphChangesColumnDeletedColor#ed8796
gitlens.graphLane10Color#f5bde6
gitlens.graphLane1Color#c6a0f6
gitlens.graphLane2Color#eed49f
gitlens.graphLane3Color#8aadf4
gitlens.graphLane4Color#f0c6c6
gitlens.graphLane5Color#a6da95
gitlens.graphLane6Color#b7bdf8
gitlens.graphLane7Color#f4dbd6
gitlens.graphLane8Color#ed8796
gitlens.graphLane9Color#8bd5ca
gitlens.graphMinimapMarkerHeadColor#a6da95
gitlens.graphMinimapMarkerHighlightsColor#eed49f
gitlens.graphMinimapMarkerLocalBranchesColor#8aadf4
gitlens.graphMinimapMarkerRemoteBranchesColor#739df2
gitlens.graphMinimapMarkerStashesColor#c6a0f6
gitlens.graphMinimapMarkerTagsColor#f0c6c6
gitlens.graphMinimapMarkerUpstreamColor#96d382
gitlens.graphScrollMarkerHeadColor#a6da95
gitlens.graphScrollMarkerHighlightsColor#eed49f
gitlens.graphScrollMarkerLocalBranchesColor#8aadf4
gitlens.graphScrollMarkerRemoteBranchesColor#739df2
gitlens.graphScrollMarkerStashesColor#c6a0f6
gitlens.graphScrollMarkerTagsColor#f0c6c6
gitlens.graphScrollMarkerUpstreamColor#96d382
gitlens.gutterBackgroundColor#363a4f4d
gitlens.gutterForegroundColor#cad3f5
gitlens.gutterUncommittedForegroundColor#c6a0f6
gitlens.lineHighlightBackgroundColor#c6a0f626
gitlens.lineHighlightOverviewRulerColor#c6a0f6cc
gitlens.mergedPullRequestIconColor#c6a0f6
gitlens.openAutolinkedIssueIconColor#a6da95
gitlens.openPullRequestIconColor#a6da95
gitlens.trailingLineBackgroundColor#00000000
gitlens.trailingLineForegroundColor#cad3f54d
gitlens.unpublishedChangesIconColor#a6da95
gitlens.unpublishedCommitIconColor#a6da95
gitlens.unpulledChangesIconColor#f5a97f
icon.foreground#c6a0f6
input.background#363a4f
input.border#00000000
input.foreground#cad3f5
input.placeholderForeground#cad3f573
inputOption.activeBackground#5b6078
inputOption.activeBorder#c6a0f6
inputOption.activeForeground#cad3f5
inputValidation.errorBackground#ed8796
inputValidation.errorBorder#18192633
inputValidation.errorForeground#181926
inputValidation.infoBackground#8aadf4
inputValidation.infoBorder#18192633
inputValidation.infoForeground#181926
inputValidation.warningBackground#f5a97f
inputValidation.warningBorder#18192633
inputValidation.warningForeground#181926
issues.closed#c6a0f6
issues.newIssueDecoration#f4dbd6
issues.open#a6da95
list.activeSelectionBackground#363a4f
list.activeSelectionForeground#cad3f5
list.dropBackground#c6a0f633
list.focusAndSelectionBackground#494d64
list.focusBackground#363a4f
list.focusForeground#cad3f5
list.focusOutline#00000000
list.highlightForeground#c6a0f6
list.hoverBackground#363a4f80
list.hoverForeground#cad3f5
list.inactiveSelectionBackground#363a4f
list.inactiveSelectionForeground#cad3f5
list.warningForeground#f5a97f
listFilterWidget.background#494d64
listFilterWidget.noMatchesOutline#ed8796
listFilterWidget.outline#00000000
menu.background#24273a
menu.border#24273a80
menu.foreground#cad3f5
menu.selectionBackground#5b6078
menu.selectionBorder#00000000
menu.selectionForeground#cad3f5
menu.separatorBackground#5b6078
menubar.selectionBackground#494d64
menubar.selectionForeground#cad3f5
merge.commonContentBackground#494d64
merge.commonHeaderBackground#5b6078
merge.currentContentBackground#a6da9533
merge.currentHeaderBackground#a6da9566
merge.incomingContentBackground#8aadf433
merge.incomingHeaderBackground#8aadf466
minimap.background#1e203080
minimap.errorHighlight#ed8796bf
minimap.findMatchHighlight#91d7e34d
minimap.selectionHighlight#5b6078bf
minimap.selectionOccurrenceHighlight#5b6078bf
minimap.warningHighlight#f5a97fbf
minimapGutter.addedBackground#a6da95bf
minimapGutter.deletedBackground#ed8796bf
minimapGutter.modifiedBackground#eed49fbf
minimapSlider.activeBackground#c6a0f699
minimapSlider.background#c6a0f633
minimapSlider.hoverBackground#c6a0f666
notificationCenter.border#c6a0f6
notificationCenterHeader.background#1e2030
notificationCenterHeader.foreground#cad3f5
notificationLink.foreground#8aadf4
notifications.background#1e2030
notifications.border#c6a0f6
notifications.foreground#cad3f5
notificationsErrorIcon.foreground#ed8796
notificationsInfoIcon.foreground#8aadf4
notificationsWarningIcon.foreground#f5a97f
notificationToast.border#c6a0f6
panel.background#24273a
panel.border#5b6078
panelSection.border#5b6078
panelSection.dropBackground#c6a0f633
panelTitle.activeBorder#c6a0f6
panelTitle.activeForeground#cad3f5
panelTitle.inactiveForeground#a5adcb
peekView.border#c6a0f6
peekViewEditor.background#1e2030
peekViewEditor.matchHighlightBackground#91d7e34d
peekViewEditor.matchHighlightBorder#00000000
peekViewEditorGutter.background#1e2030
peekViewResult.background#1e2030
peekViewResult.fileForeground#cad3f5
peekViewResult.lineForeground#cad3f5
peekViewResult.matchHighlightBackground#91d7e34d
peekViewResult.selectionBackground#363a4f
peekViewResult.selectionForeground#cad3f5
peekViewTitle.background#24273a
peekViewTitleDescription.foreground#b8c0e0b3
peekViewTitleLabel.foreground#cad3f5
pickerGroup.border#c6a0f6
pickerGroup.foreground#c6a0f6
problemsErrorIcon.foreground#ed8796
problemsInfoIcon.foreground#8aadf4
problemsWarningIcon.foreground#f5a97f
progressBar.background#c6a0f6
pullRequests.closed#ed8796
pullRequests.draft#939ab7
pullRequests.merged#c6a0f6
pullRequests.notification#cad3f5
pullRequests.open#a6da95
sash.hoverBorder#c6a0f6
scrollbar.shadow#181926
scrollbarSlider.activeBackground#363a4f66
scrollbarSlider.background#5b607880
scrollbarSlider.hoverBackground#6e738d
selection.background#c6a0f666
settings.dropdownBackground#494d64
settings.dropdownListBorder#00000000
settings.focusedRowBackground#5b607833
settings.headerForeground#cad3f5
settings.modifiedItemIndicator#c6a0f6
settings.numberInputBackground#494d64
settings.numberInputBorder#00000000
settings.textInputBackground#494d64
settings.textInputBorder#00000000
sideBar.background#1e2030
sideBar.border#00000000
sideBar.dropBackground#c6a0f633
sideBar.foreground#cad3f5
sideBarSectionHeader.background#1e2030
sideBarSectionHeader.foreground#cad3f5
sideBarTitle.foreground#c6a0f6
statusBar.background#181926
statusBar.border#00000000
statusBar.debuggingBackground#f5a97f
statusBar.debuggingBorder#00000000
statusBar.debuggingForeground#181926
statusBar.foreground#cad3f5
statusBar.noFolderBackground#181926
statusBar.noFolderBorder#00000000
statusBar.noFolderForeground#cad3f5
statusBarItem.activeBackground#5b607866
statusBarItem.errorBackground#00000000
statusBarItem.errorForeground#ed8796
statusBarItem.hoverBackground#5b607833
statusBarItem.prominentBackground#00000000
statusBarItem.prominentForeground#c6a0f6
statusBarItem.prominentHoverBackground#5b607833
statusBarItem.remoteBackground#8aadf4
statusBarItem.remoteForeground#181926
statusBarItem.warningBackground#00000000
statusBarItem.warningForeground#f5a97f
symbolIcon.arrayForeground#f5a97f
symbolIcon.booleanForeground#c6a0f6
symbolIcon.classForeground#eed49f
symbolIcon.colorForeground#f5bde6
symbolIcon.constantForeground#f5a97f
symbolIcon.constructorForeground#b7bdf8
symbolIcon.enumeratorForeground#eed49f
symbolIcon.enumeratorMemberForeground#eed49f
symbolIcon.eventForeground#f5bde6
symbolIcon.fieldForeground#cad3f5
symbolIcon.fileForeground#c6a0f6
symbolIcon.folderForeground#c6a0f6
symbolIcon.functionForeground#8aadf4
symbolIcon.interfaceForeground#eed49f
symbolIcon.keyForeground#8bd5ca
symbolIcon.keywordForeground#c6a0f6
symbolIcon.methodForeground#8aadf4
symbolIcon.moduleForeground#cad3f5
symbolIcon.namespaceForeground#eed49f
symbolIcon.nullForeground#ee99a0
symbolIcon.numberForeground#f5a97f
symbolIcon.objectForeground#eed49f
symbolIcon.operatorForeground#8bd5ca
symbolIcon.packageForeground#f0c6c6
symbolIcon.propertyForeground#ee99a0
symbolIcon.referenceForeground#eed49f
symbolIcon.snippetForeground#f0c6c6
symbolIcon.stringForeground#a6da95
symbolIcon.structForeground#8bd5ca
symbolIcon.textForeground#cad3f5
symbolIcon.typeParameterForeground#ee99a0
symbolIcon.unitForeground#cad3f5
symbolIcon.variableForeground#cad3f5
tab.activeBackground#24273a
tab.activeBorder#00000000
tab.activeBorderTop#c6a0f6
tab.activeForeground#c6a0f6
tab.activeModifiedBorder#eed49f
tab.border#1e2030
tab.hoverBackground#2e324a
tab.hoverBorder#00000000
tab.hoverForeground#c6a0f6
tab.inactiveBackground#1e2030
tab.inactiveForeground#6e738d
tab.inactiveModifiedBorder#eed49f4d
tab.lastPinnedBorder#c6a0f6
tab.unfocusedActiveBackground#1e2030
tab.unfocusedActiveBorder#00000000
tab.unfocusedActiveBorderTop#c6a0f64d
tab.unfocusedInactiveBackground#141620
table.headerBackground#363a4f
table.headerForeground#cad3f5
terminal.ansiBlack#494d64
terminal.ansiBlue#8aadf4
terminal.ansiBrightBlack#5b6078
terminal.ansiBrightBlue#78a1f6
terminal.ansiBrightCyan#63cbc0
terminal.ansiBrightGreen#8ccf7f
terminal.ansiBrightMagenta#f2a9dd
terminal.ansiBrightRed#ec7486
terminal.ansiBrightWhite#b8c0e0
terminal.ansiBrightYellow#e1c682
terminal.ansiCyan#8bd5ca
terminal.ansiGreen#a6da95
terminal.ansiMagenta#f5bde6
terminal.ansiRed#ed8796
terminal.ansiWhite#a5adcb
terminal.ansiYellow#eed49f
terminal.border#5b6078
terminal.dropBackground#c6a0f633
terminal.foreground#cad3f5
terminal.inactiveSelectionBackground#5b607880
terminal.selectionBackground#5b6078
terminal.tab.activeBorder#c6a0f6
terminalCommandDecoration.defaultBackground#5b6078
terminalCommandDecoration.errorBackground#ed8796
terminalCommandDecoration.successBackground#a6da95
terminalCursor.background#24273a
terminalCursor.foreground#f4dbd6
textBlockQuote.background#1e2030
textBlockQuote.border#181926
textCodeBlock.background#24273a
textLink.activeForeground#91d7e3
textLink.foreground#8aadf4
textPreformat.foreground#cad3f5
textSeparator.foreground#c6a0f6
titleBar.activeBackground#181926
titleBar.activeForeground#cad3f5
titleBar.border#00000000
titleBar.inactiveBackground#181926
titleBar.inactiveForeground#cad3f580
tree.inactiveIndentGuidesStroke#494d64
tree.indentGuidesStroke#939ab7
walkThrough.embeddedEditorBackground#24273a4d
welcomePage.progress.background#181926
welcomePage.progress.foreground#c6a0f6
welcomePage.tileBackground#1e2030
widget.shadow#1e203080
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	#cad3f5	—
punctuation	#939ab7
comment, punctuation.definition.comment	#939ab7	italic
string, punctuation.definition.string	#a6da95	—
constant.character.escape	#f5bde6	—
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	#f5a97f	—
keyword, keyword.operator.word, keyword.operator.new, variable.language.super, support.type.primitive, storage.type, storage.modifier, punctuation.definition.keyword	#c6a0f6
entity.name.tag.documentation	#c6a0f6	—
keyword.operator, punctuation.accessor, punctuation.definition.generic, meta.function.closure punctuation.section.parameters, punctuation.definition.tag, punctuation.separator.key-value	#8bd5ca	—
entity.name.function, meta.function-call.method, support.function, support.function.misc, variable.function	#8aadf4	italic
entity.name.class, entity.other.inherited-class, support.class, meta.function-call.constructor, entity.name.struct	#eed49f	italic
entity.name.enum	#eed49f	italic
meta.enum variable.other.readwrite, variable.other.enummember	#8bd5ca	—
meta.property.object	#8bd5ca	—
meta.type, meta.type-alias, support.type, entity.name.type	#eed49f	italic
meta.annotation variable.function, meta.annotation variable.annotation.function, meta.annotation punctuation.definition.annotation, meta.decorator, punctuation.decorator	#f5a97f	—
variable.parameter, meta.function.parameters	#ee99a0	italic
constant.language, support.function.builtin	#ed8796	—
entity.other.attribute-name.documentation	#ed8796	—
keyword.control.directive, punctuation.definition.directive	#eed49f	—
punctuation.definition.typeparameters	#91d7e3	—
entity.name.namespace	#eed49f	—
support.type.property-name.css	#8aadf4
variable.language.this, variable.language.this punctuation.definition.variable	#ed8796	—
variable.object.property	#cad3f5	—
string.template variable, string variable	#cad3f5	—
keyword.operator.new	—	bold
storage.modifier.specifier.extern.cpp	#c6a0f6	—
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	#eed49f	—
storage.type.class.doxygen	—
storage.modifier.reference.cpp	#8bd5ca	—
meta.interpolation.cs	#cad3f5	—
comment.block.documentation.cs	#cad3f5	—
source.css entity.other.attribute-name.class.css, entity.other.attribute-name.parent-selector.css punctuation.definition.entity.css	#eed49f	—
punctuation.separator.operator.css	#8bd5ca	—
source.css entity.other.attribute-name.pseudo-class	#8bd5ca	—
source.css constant.other.unicode-range	#f5a97f	—
source.css variable.parameter.url	#a6da95
support.type.vendored.property-name	#91d7e3	—
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	#ee99a0	—
source.css meta.property-list variable, meta.property-list variable.other.less, meta.property-list variable.other.less punctuation.definition.variable.less	#8aadf4	—
keyword.other.unit.percentage.css	#f5a97f	—
source.css meta.attribute-selector	#a6da95	—
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	#8aadf4
constant.language.json, constant.language.yaml	#f5a97f	—
entity.name.type.anchor.yaml, variable.other.alias.yaml	#eed49f
support.type.property-name.table, entity.name.section.group-title.ini	#eed49f	—
constant.other.time.datetime.offset.toml	#f5bde6	—
punctuation.definition.anchor.yaml, punctuation.definition.alias.yaml	#f5bde6	—
entity.other.document.begin.yaml	#f5bde6	—
markup.changed.diff	#f5a97f	—
meta.diff.header.from-file, meta.diff.header.to-file, punctuation.definition.from-file.diff, punctuation.definition.to-file.diff	#8aadf4	—
markup.inserted.diff	#a6da95	—
markup.deleted.diff	#ed8796	—
variable.other.env	#8aadf4	—
string.quoted variable.other.env	#cad3f5	—
support.function.builtin.gdscript	#8aadf4	—
constant.language.gdscript	#f5a97f	—
comment meta.annotation.go	#ee99a0	—
comment meta.annotation.parameters.go	#f5a97f	—
constant.language.go	#f5a97f	—
variable.graphql	#cad3f5	—
string.unquoted.alias.graphql	#f0c6c6	—
constant.character.enum.graphql	#8bd5ca	—
meta.objectvalues.graphql constant.object.key.graphql string.unquoted.graphql	#f0c6c6	—
keyword.other.doctype, meta.tag.sgml.doctype punctuation.definition.tag, meta.tag.metadata.doctype entity.name.tag, meta.tag.metadata.doctype punctuation.definition.tag	#c6a0f6	—
entity.name.tag	#8aadf4
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	#ed8796	—
entity.other.attribute-name	#eed49f	—
support.class.component, support.class.component.jsx, support.class.component.tsx, support.class.component.vue	#f5bde6
punctuation.definition.annotation, storage.type.annotation	#f5a97f	—
constant.other.enum.java	#8bd5ca	—
storage.modifier.import.java	#cad3f5	—
comment.block.javadoc.java keyword.other.documentation.javadoc.java	—
meta.export variable.other.readwrite.js	#ee99a0	—
variable.other.constant.js, variable.other.constant.ts, variable.other.property.js, variable.other.property.ts	#cad3f5	—
variable.other.jsdoc, comment.block.documentation variable.other	#ee99a0
storage.type.class.jsdoc	—
support.type.object.console.js	#cad3f5	—
support.constant.node, support.type.object.module.js	#c6a0f6	—
storage.modifier.implements	#c6a0f6	—
constant.language.null.js, constant.language.null.ts, constant.language.undefined.js, constant.language.undefined.ts, support.type.builtin.ts	#c6a0f6	—
variable.parameter.generic	#eed49f	—
keyword.declaration.function.arrow.js, storage.type.function.arrow.ts	#8bd5ca	—
punctuation.decorator.ts	#8aadf4	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	#c6a0f6	—
support.function.macro.julia	#8bd5ca	italic
constant.language.julia	#f5a97f	—
constant.other.symbol.julia	#ee99a0	—
text.tex keyword.control.preamble	#8bd5ca	—
text.tex support.function.be	#91d7e3	—
constant.other.general.math.tex	#f0c6c6	—
variable.language.liquid	#f5bde6	—
comment.line.double-dash.documentation.lua storage.type.annotation.lua	#c6a0f6
comment.line.double-dash.documentation.lua entity.name.variable.lua, comment.line.double-dash.documentation.lua variable.lua	#cad3f5	—
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	#ed8796	—
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	#f5a97f	—
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	#eed49f	—
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	#a6da95	—
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	#7dc4e4	—
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	#b7bdf8	—
markup.bold	#ed8796	bold
markup.italic	#ed8796	italic
markup.strikethrough	#a5adcb	strikethrough
punctuation.definition.link, markup.underline.link	#8aadf4	—
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	#b7bdf8	—
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	#a6da95	—
fenced_code.block.language	#91d7e3	—
markup.fenced_code.block punctuation.definition, markup.raw support.asciidoc	#939ab7	—
markup.quote, punctuation.definition.quote.begin	#f5bde6	—
meta.separator.markdown	#8bd5ca	—
punctuation.definition.list.begin.markdown, punctuation.definition.list.begin.quarto, markup.list.bullet	#8bd5ca	—
markup.heading.quarto	—	bold
entity.other.attribute-name.multipart.nix, entity.other.attribute-name.single.nix	#8aadf4	—
variable.parameter.name.nix	#cad3f5
meta.embedded variable.parameter.name.nix	#b7bdf8
string.unquoted.path.nix	#f5bde6
support.attribute.builtin, meta.attribute.php	#eed49f	—
meta.function.parameters.php punctuation.definition.variable.php	#ee99a0	—
constant.language.php	#c6a0f6	—
text.html.php support.function	#91d7e3	—
keyword.other.phpdoc.php	—
support.variable.magic.python, meta.function-call.arguments.python	#cad3f5	—
support.function.magic.python	#91d7e3	italic
variable.parameter.function.language.special.self.python, variable.language.special.self.python	#ed8796	italic
keyword.control.flow.python, keyword.operator.logical.python	#c6a0f6	—
storage.type.function.python	#c6a0f6	—
support.token.decorator.python, meta.function.decorator.identifier.python	#91d7e3	—
meta.function-call.python	#8aadf4	—
entity.name.function.decorator.python, punctuation.definition.decorator.python	#f5a97f	italic
constant.character.format.placeholder.other.python	#f5bde6	—
support.type.exception.python, support.function.builtin.python	#f5a97f	—
support.type.python	#f5a97f	—
constant.language.python	#c6a0f6	—
meta.indexed-name.python, meta.item-access.python	#ee99a0	italic
storage.type.string.python	#a6da95	italic
meta.function.parameters.python	—
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end	#f5bde6	—
keyword.control.anchor.regexp	#c6a0f6	—
string.regexp.ts	#cad3f5	—
punctuation.definition.group.regexp, keyword.other.back-reference.regexp	#a6da95	—
punctuation.definition.character-class.regexp	#eed49f	—
constant.other.character-class.regexp	#f5bde6	—
constant.other.character-class.range.regexp	#f4dbd6	—
keyword.operator.quantifier.regexp	#8bd5ca	—
constant.character.numeric.regexp	#f5a97f	—
punctuation.definition.group.no-capture.regexp, meta.assertion.look-ahead.regexp, meta.assertion.negative-look-ahead.regexp	#8aadf4	—
meta.annotation.rust, meta.annotation.rust punctuation, meta.attribute.rust, punctuation.definition.attribute.rust	#eed49f	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	#c6a0f6
entity.name.type.numeric.rust	#c6a0f6
meta.generic.rust	#f5a97f	—
entity.name.impl.rust	#eed49f	italic
entity.name.module.rust	#f5a97f	—
entity.name.trait.rust	#eed49f	italic
storage.type.source.rust	#eed49f	—
entity.name.union.rust	#eed49f	—
meta.enum.rust storage.type.source.rust	#8bd5ca	—
support.macro.rust, meta.macro.rust support.function.rust, entity.name.function.macro.rust	#8aadf4	italic
storage.modifier.lifetime.rust, entity.name.type.lifetime	#8aadf4	italic
string.quoted.double.rust constant.other.placeholder.rust	#f5bde6	—
meta.function.return-type.rust meta.generic.rust storage.type.rust	#cad3f5	—
meta.function.call.rust	#8aadf4	—
punctuation.brackets.angle.rust	#91d7e3	—
constant.other.caps.rust	#f5a97f	—
meta.function.definition.rust variable.other.rust	#ee99a0	—
meta.function.call.rust variable.other.rust	#cad3f5	—
variable.language.self.rust	#ed8796	—
variable.other.metavariable.name.rust, meta.macro.metavariable.rust keyword.operator.macro.dollar.rust	#f5bde6	—
comment.line.shebang, comment.line.shebang punctuation.definition.comment, comment.line.shebang, punctuation.definition.comment.shebang.shell, meta.shebang.shell	#f5bde6	italic
comment.line.shebang constant.language	#8bd5ca	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	#ed8796	—
meta.string meta.interpolation.parameter.shell variable.other.readwrite	#f5a97f	italic
source.shell punctuation.section.interpolation, punctuation.definition.evaluation.backticks.shell	#8bd5ca	—
entity.name.tag.heredoc.shell	#c6a0f6	—
string.quoted.double.shell variable.other.normal.shell	#cad3f5	—

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