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 Latte

fetchUser.ts

index.ts

README.md

srccomponentsfetchUser.ts

Problems1

Output

Debug Console

Terminal

Ports

~/my-project $ pnpm dev
▲ Next.js ready on http://localhost:3000
✓ compiled client and server successfully in 412ms
wait - compiling /theme/vscode...

main*

Copilot

Ln 5, Col 12

Spaces: 2

UTF-8

TypeScript

Light+

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.activeBackground#00000000
activityBar.activeBorder#00000000
activityBar.activeFocusBorder#00000000
activityBar.background#dce0e8
activityBar.border#00000000
activityBar.dropBorder#8839ef33
activityBar.foreground#8839ef
activityBar.inactiveForeground#9ca0b0
activityBarBadge.background#8839ef
activityBarBadge.foreground#dce0e8
activityBarTop.activeBorder#00000000
activityBarTop.dropBorder#8839ef33
activityBarTop.foreground#8839ef
activityBarTop.inactiveForeground#9ca0b0
badge.background#bcc0cc
badge.foreground#4c4f69
banner.background#bcc0cc
banner.foreground#4c4f69
banner.iconForeground#4c4f69
breadcrumb.activeSelectionForeground#8839ef
breadcrumb.background#eff1f5
breadcrumb.focusForeground#8839ef
breadcrumb.foreground#4c4f69cc
breadcrumbPicker.background#e6e9ef
button.background#8839ef
button.border#00000000
button.foreground#dce0e8
button.hoverBackground#9c5af2
button.secondaryBackground#acb0be
button.secondaryBorder#8839ef
button.secondaryForeground#4c4f69
button.secondaryHoverBackground#c0c3ce
button.separator#00000000
charts.blue#1e66f5
charts.foreground#4c4f69
charts.green#40a02b
charts.lines#5c5f77
charts.orange#fe640b
charts.purple#8839ef
charts.red#d20f39
charts.yellow#df8e1d
checkbox.background#bcc0cc
checkbox.border#00000000
checkbox.foreground#8839ef
commandCenter.activeBackground#acb0be33
commandCenter.activeBorder#8839ef
commandCenter.activeForeground#8839ef
commandCenter.background#e6e9ef
commandCenter.border#00000000
commandCenter.foreground#5c5f77
commandCenter.inactiveBorder#00000000
commandCenter.inactiveForeground#5c5f77
debugConsole.errorForeground#d20f39
debugConsole.infoForeground#1e66f5
debugConsole.sourceForeground#dc8a78
debugConsole.warningForeground#fe640b
debugConsoleInputIcon.foreground#4c4f69
debugExceptionWidget.background#dce0e8
debugExceptionWidget.border#8839ef
debugIcon.breakpointCurrentStackframeForeground#acb0be
debugIcon.breakpointDisabledForeground#d20f3999
debugIcon.breakpointForeground#d20f39
debugIcon.breakpointStackframeForeground#acb0be
debugIcon.breakpointUnverifiedForeground#bf607c
debugIcon.continueForeground#40a02b
debugIcon.disconnectForeground#acb0be
debugIcon.pauseForeground#1e66f5
debugIcon.restartForeground#179299
debugIcon.startForeground#40a02b
debugIcon.stepBackForeground#acb0be
debugIcon.stepIntoForeground#4c4f69
debugIcon.stepOutForeground#4c4f69
debugIcon.stepOverForeground#8839ef
debugIcon.stopForeground#d20f39
debugTokenExpression.boolean#8839ef
debugTokenExpression.error#d20f39
debugTokenExpression.number#fe640b
debugTokenExpression.string#40a02b
debugToolBar.background#dce0e8
debugToolBar.border#00000000
descriptionForeground#4c4f69
diffEditor.border#acb0be
diffEditor.diagonalFill#acb0be99
diffEditor.insertedLineBackground#40a02b26
diffEditor.insertedTextBackground#40a02b1a
diffEditor.removedLineBackground#d20f3926
diffEditor.removedTextBackground#d20f391a
diffEditorOverview.insertedForeground#40a02bcc
diffEditorOverview.removedForeground#d20f39cc
disabledForeground#6c6f85
dropdown.background#e6e9ef
dropdown.border#8839ef
dropdown.foreground#4c4f69
dropdown.listBackground#acb0be
editor.background#eff1f5
editor.findMatchBackground#e6adbd
editor.findMatchBorder#d20f3933
editor.findMatchHighlightBackground#a9daf0
editor.findMatchHighlightBorder#04a5e533
editor.findRangeHighlightBackground#a9daf0
editor.findRangeHighlightBorder#04a5e533
editor.focusedStackFrameHighlightBackground#40a02b26
editor.foldBackground#04a5e540
editor.foreground#4c4f69
editor.hoverHighlightBackground#04a5e540
editor.lineHighlightBackground#4c4f6912
editor.lineHighlightBorder#00000000
editor.rangeHighlightBackground#04a5e540
editor.rangeHighlightBorder#00000000
editor.selectionBackground#7c7f934d
editor.selectionHighlightBackground#7c7f9333
editor.selectionHighlightBorder#7c7f9333
editor.stackFrameHighlightBackground#df8e1d26
editor.wordHighlightBackground#7c7f9333
editor.wordHighlightStrongBackground#1e66f526
editorBracketHighlight.foreground1#d20f39
editorBracketHighlight.foreground2#fe640b
editorBracketHighlight.foreground3#df8e1d
editorBracketHighlight.foreground4#40a02b
editorBracketHighlight.foreground5#209fb5
editorBracketHighlight.foreground6#8839ef
editorBracketHighlight.unexpectedBracket.foreground#e64553
editorBracketMatch.background#7c7f931a
editorBracketMatch.border#7c7f93
editorCodeLens.foreground#8c8fa1
editorCursor.background#eff1f5
editorCursor.foreground#dc8a78
editorError.background#00000000
editorError.border#00000000
editorError.foreground#d20f39
editorGroup.border#acb0be
editorGroup.dropBackground#8839ef33
editorGroup.emptyBackground#eff1f5
editorGroupHeader.tabsBackground#dce0e8
editorGutter.addedBackground#40a02b
editorGutter.background#eff1f5
editorGutter.commentGlyphForeground#8839ef
editorGutter.commentRangeForeground#ccd0da
editorGutter.deletedBackground#d20f39
editorGutter.foldingControlForeground#7c7f93
editorGutter.modifiedBackground#df8e1d
editorHoverWidget.background#e6e9ef
editorHoverWidget.border#acb0be
editorHoverWidget.foreground#4c4f69
editorIndentGuide.activeBackground#acb0be
editorIndentGuide.background#bcc0cc
editorInfo.background#00000000
editorInfo.border#00000000
editorInfo.foreground#1e66f5
editorInlayHint.background#e6e9efbf
editorInlayHint.foreground#acb0be
editorInlayHint.parameterBackground#e6e9efbf
editorInlayHint.parameterForeground#6c6f85
editorInlayHint.typeBackground#e6e9efbf
editorInlayHint.typeForeground#5c5f77
editorLightBulb.foreground#df8e1d
editorLineNumber.activeForeground#8839ef
editorLineNumber.foreground#8c8fa1
editorLink.activeForeground#8839ef
editorMarkerNavigation.background#e6e9ef
editorMarkerNavigationError.background#d20f39
editorMarkerNavigationInfo.background#1e66f5
editorMarkerNavigationWarning.background#fe640b
editorOverviewRuler.background#e6e9ef
editorOverviewRuler.border#4c4f6912
editorOverviewRuler.modifiedForeground#df8e1d
editorRuler.foreground#acb0be
editorStickyScrollHover.background#ccd0da
editorSuggestWidget.background#e6e9ef
editorSuggestWidget.border#acb0be
editorSuggestWidget.foreground#4c4f69
editorSuggestWidget.highlightForeground#8839ef
editorSuggestWidget.selectedBackground#ccd0da
editorWarning.background#00000000
editorWarning.border#00000000
editorWarning.foreground#fe640b
editorWhitespace.foreground#7c7f9366
editorWidget.background#e6e9ef
editorWidget.foreground#4c4f69
editorWidget.resizeBorder#acb0be
errorForeground#d20f39
errorLens.errorBackground#d20f3926
errorLens.errorBackgroundLight#d20f3926
errorLens.errorForeground#d20f39
errorLens.errorForegroundLight#d20f39
errorLens.errorMessageBackground#d20f3926
errorLens.hintBackground#40a02b26
errorLens.hintBackgroundLight#40a02b26
errorLens.hintForeground#40a02b
errorLens.hintForegroundLight#40a02b
errorLens.hintMessageBackground#40a02b26
errorLens.infoBackground#1e66f526
errorLens.infoBackgroundLight#1e66f526
errorLens.infoForeground#1e66f5
errorLens.infoForegroundLight#1e66f5
errorLens.infoMessageBackground#1e66f526
errorLens.statusBarErrorForeground#d20f39
errorLens.statusBarHintForeground#40a02b
errorLens.statusBarIconErrorForeground#d20f39
errorLens.statusBarIconWarningForeground#fe640b
errorLens.statusBarInfoForeground#1e66f5
errorLens.statusBarWarningForeground#fe640b
errorLens.warningBackground#fe640b26
errorLens.warningBackgroundLight#fe640b26
errorLens.warningForeground#fe640b
errorLens.warningForegroundLight#fe640b
errorLens.warningMessageBackground#fe640b26
extensionBadge.remoteBackground#1e66f5
extensionBadge.remoteForeground#dce0e8
extensionButton.prominentBackground#8839ef
extensionButton.prominentForeground#dce0e8
extensionButton.prominentHoverBackground#9c5af2
extensionButton.separator#eff1f5
extensionIcon.preReleaseForeground#acb0be
extensionIcon.sponsorForeground#ea76cb
extensionIcon.starForeground#df8e1d
extensionIcon.verifiedForeground#40a02b
focusBorder#8839ef
foreground#4c4f69
gitDecoration.addedResourceForeground#40a02b
gitDecoration.conflictingResourceForeground#8839ef
gitDecoration.deletedResourceForeground#d20f39
gitDecoration.ignoredResourceForeground#9ca0b0
gitDecoration.modifiedResourceForeground#df8e1d
gitDecoration.stageDeletedResourceForeground#d20f39
gitDecoration.stageModifiedResourceForeground#df8e1d
gitDecoration.submoduleResourceForeground#1e66f5
gitDecoration.untrackedResourceForeground#40a02b
gitlens.closedAutolinkedIssueIconColor#8839ef
gitlens.closedPullRequestIconColor#d20f39
gitlens.decorations.branchAheadForegroundColor#40a02b
gitlens.decorations.branchBehindForegroundColor#fe640b
gitlens.decorations.branchDivergedForegroundColor#df8e1d
gitlens.decorations.branchMissingUpstreamForegroundColor#fe640b
gitlens.decorations.branchUnpublishedForegroundColor#40a02b
gitlens.decorations.statusMergingOrRebasingConflictForegroundColor#e64553
gitlens.decorations.statusMergingOrRebasingForegroundColor#df8e1d
gitlens.decorations.workspaceCurrentForegroundColor#8839ef
gitlens.decorations.workspaceRepoMissingForegroundColor#6c6f85
gitlens.decorations.workspaceRepoOpenForegroundColor#8839ef
gitlens.decorations.worktreeHasUncommittedChangesForegroundColor#fe640b
gitlens.decorations.worktreeMissingForegroundColor#e64553
gitlens.graphChangesColumnAddedColor#40a02b
gitlens.graphChangesColumnDeletedColor#d20f39
gitlens.graphLane10Color#ea76cb
gitlens.graphLane1Color#8839ef
gitlens.graphLane2Color#df8e1d
gitlens.graphLane3Color#1e66f5
gitlens.graphLane4Color#dd7878
gitlens.graphLane5Color#40a02b
gitlens.graphLane6Color#7287fd
gitlens.graphLane7Color#dc8a78
gitlens.graphLane8Color#d20f39
gitlens.graphLane9Color#179299
gitlens.graphMinimapMarkerHeadColor#40a02b
gitlens.graphMinimapMarkerHighlightsColor#df8e1d
gitlens.graphMinimapMarkerLocalBranchesColor#1e66f5
gitlens.graphMinimapMarkerRemoteBranchesColor#0b57ef
gitlens.graphMinimapMarkerStashesColor#8839ef
gitlens.graphMinimapMarkerTagsColor#dd7878
gitlens.graphMinimapMarkerUpstreamColor#388c26
gitlens.graphScrollMarkerHeadColor#40a02b
gitlens.graphScrollMarkerHighlightsColor#df8e1d
gitlens.graphScrollMarkerLocalBranchesColor#1e66f5
gitlens.graphScrollMarkerRemoteBranchesColor#0b57ef
gitlens.graphScrollMarkerStashesColor#8839ef
gitlens.graphScrollMarkerTagsColor#dd7878
gitlens.graphScrollMarkerUpstreamColor#388c26
gitlens.gutterBackgroundColor#ccd0da4d
gitlens.gutterForegroundColor#4c4f69
gitlens.gutterUncommittedForegroundColor#8839ef
gitlens.lineHighlightBackgroundColor#8839ef26
gitlens.lineHighlightOverviewRulerColor#8839efcc
gitlens.mergedPullRequestIconColor#8839ef
gitlens.openAutolinkedIssueIconColor#40a02b
gitlens.openPullRequestIconColor#40a02b
gitlens.trailingLineBackgroundColor#00000000
gitlens.trailingLineForegroundColor#4c4f694d
gitlens.unpublishedChangesIconColor#40a02b
gitlens.unpublishedCommitIconColor#40a02b
gitlens.unpulledChangesIconColor#fe640b
icon.foreground#8839ef
input.background#ccd0da
input.border#00000000
input.foreground#4c4f69
input.placeholderForeground#4c4f6973
inputOption.activeBackground#acb0be
inputOption.activeBorder#8839ef
inputOption.activeForeground#4c4f69
inputValidation.errorBackground#d20f39
inputValidation.errorBorder#dce0e833
inputValidation.errorForeground#dce0e8
inputValidation.infoBackground#1e66f5
inputValidation.infoBorder#dce0e833
inputValidation.infoForeground#dce0e8
inputValidation.warningBackground#fe640b
inputValidation.warningBorder#dce0e833
inputValidation.warningForeground#dce0e8
issues.closed#8839ef
issues.newIssueDecoration#dc8a78
issues.open#40a02b
list.activeSelectionBackground#ccd0da
list.activeSelectionForeground#4c4f69
list.dropBackground#8839ef33
list.focusAndSelectionBackground#bcc0cc
list.focusBackground#ccd0da
list.focusForeground#4c4f69
list.focusOutline#00000000
list.highlightForeground#8839ef
list.hoverBackground#ccd0da80
list.hoverForeground#4c4f69
list.inactiveSelectionBackground#ccd0da
list.inactiveSelectionForeground#4c4f69
list.warningForeground#fe640b
listFilterWidget.background#bcc0cc
listFilterWidget.noMatchesOutline#d20f39
listFilterWidget.outline#00000000
menu.background#eff1f5
menu.border#eff1f580
menu.foreground#4c4f69
menu.selectionBackground#acb0be
menu.selectionBorder#00000000
menu.selectionForeground#4c4f69
menu.separatorBackground#acb0be
menubar.selectionBackground#bcc0cc
menubar.selectionForeground#4c4f69
merge.commonContentBackground#bcc0cc
merge.commonHeaderBackground#acb0be
merge.currentContentBackground#40a02b33
merge.currentHeaderBackground#40a02b66
merge.incomingContentBackground#1e66f533
merge.incomingHeaderBackground#1e66f566
minimap.background#e6e9ef80
minimap.errorHighlight#d20f39bf
minimap.findMatchHighlight#04a5e54d
minimap.selectionHighlight#acb0bebf
minimap.selectionOccurrenceHighlight#acb0bebf
minimap.warningHighlight#fe640bbf
minimapGutter.addedBackground#40a02bbf
minimapGutter.deletedBackground#d20f39bf
minimapGutter.modifiedBackground#df8e1dbf
minimapSlider.activeBackground#8839ef99
minimapSlider.background#8839ef33
minimapSlider.hoverBackground#8839ef66
notificationCenter.border#8839ef
notificationCenterHeader.background#e6e9ef
notificationCenterHeader.foreground#4c4f69
notificationLink.foreground#1e66f5
notifications.background#e6e9ef
notifications.border#8839ef
notifications.foreground#4c4f69
notificationsErrorIcon.foreground#d20f39
notificationsInfoIcon.foreground#1e66f5
notificationsWarningIcon.foreground#fe640b
notificationToast.border#8839ef
panel.background#eff1f5
panel.border#acb0be
panelSection.border#acb0be
panelSection.dropBackground#8839ef33
panelTitle.activeBorder#8839ef
panelTitle.activeForeground#4c4f69
panelTitle.inactiveForeground#6c6f85
peekView.border#8839ef
peekViewEditor.background#e6e9ef
peekViewEditor.matchHighlightBackground#04a5e54d
peekViewEditor.matchHighlightBorder#00000000
peekViewEditorGutter.background#e6e9ef
peekViewResult.background#e6e9ef
peekViewResult.fileForeground#4c4f69
peekViewResult.lineForeground#4c4f69
peekViewResult.matchHighlightBackground#04a5e54d
peekViewResult.selectionBackground#ccd0da
peekViewResult.selectionForeground#4c4f69
peekViewTitle.background#eff1f5
peekViewTitleDescription.foreground#5c5f77b3
peekViewTitleLabel.foreground#4c4f69
pickerGroup.border#8839ef
pickerGroup.foreground#8839ef
problemsErrorIcon.foreground#d20f39
problemsInfoIcon.foreground#1e66f5
problemsWarningIcon.foreground#fe640b
progressBar.background#8839ef
pullRequests.closed#d20f39
pullRequests.draft#7c7f93
pullRequests.merged#8839ef
pullRequests.notification#4c4f69
pullRequests.open#40a02b
sash.hoverBorder#8839ef
scrollbar.shadow#dce0e8
scrollbarSlider.activeBackground#ccd0da66
scrollbarSlider.background#acb0be80
scrollbarSlider.hoverBackground#9ca0b0
selection.background#8839ef66
settings.dropdownBackground#bcc0cc
settings.dropdownListBorder#00000000
settings.focusedRowBackground#acb0be33
settings.headerForeground#4c4f69
settings.modifiedItemIndicator#8839ef
settings.numberInputBackground#bcc0cc
settings.numberInputBorder#00000000
settings.textInputBackground#bcc0cc
settings.textInputBorder#00000000
sideBar.background#e6e9ef
sideBar.border#00000000
sideBar.dropBackground#8839ef33
sideBar.foreground#4c4f69
sideBarSectionHeader.background#e6e9ef
sideBarSectionHeader.foreground#4c4f69
sideBarTitle.foreground#8839ef
statusBar.background#dce0e8
statusBar.border#00000000
statusBar.debuggingBackground#fe640b
statusBar.debuggingBorder#00000000
statusBar.debuggingForeground#dce0e8
statusBar.foreground#4c4f69
statusBar.noFolderBackground#dce0e8
statusBar.noFolderBorder#00000000
statusBar.noFolderForeground#4c4f69
statusBarItem.activeBackground#acb0be66
statusBarItem.errorBackground#00000000
statusBarItem.errorForeground#d20f39
statusBarItem.hoverBackground#acb0be33
statusBarItem.prominentBackground#00000000
statusBarItem.prominentForeground#8839ef
statusBarItem.prominentHoverBackground#acb0be33
statusBarItem.remoteBackground#1e66f5
statusBarItem.remoteForeground#dce0e8
statusBarItem.warningBackground#00000000
statusBarItem.warningForeground#fe640b
symbolIcon.arrayForeground#fe640b
symbolIcon.booleanForeground#8839ef
symbolIcon.classForeground#df8e1d
symbolIcon.colorForeground#ea76cb
symbolIcon.constantForeground#fe640b
symbolIcon.constructorForeground#7287fd
symbolIcon.enumeratorForeground#df8e1d
symbolIcon.enumeratorMemberForeground#df8e1d
symbolIcon.eventForeground#ea76cb
symbolIcon.fieldForeground#4c4f69
symbolIcon.fileForeground#8839ef
symbolIcon.folderForeground#8839ef
symbolIcon.functionForeground#1e66f5
symbolIcon.interfaceForeground#df8e1d
symbolIcon.keyForeground#179299
symbolIcon.keywordForeground#8839ef
symbolIcon.methodForeground#1e66f5
symbolIcon.moduleForeground#4c4f69
symbolIcon.namespaceForeground#df8e1d
symbolIcon.nullForeground#e64553
symbolIcon.numberForeground#fe640b
symbolIcon.objectForeground#df8e1d
symbolIcon.operatorForeground#179299
symbolIcon.packageForeground#dd7878
symbolIcon.propertyForeground#e64553
symbolIcon.referenceForeground#df8e1d
symbolIcon.snippetForeground#dd7878
symbolIcon.stringForeground#40a02b
symbolIcon.structForeground#179299
symbolIcon.textForeground#4c4f69
symbolIcon.typeParameterForeground#e64553
symbolIcon.unitForeground#4c4f69
symbolIcon.variableForeground#4c4f69
tab.activeBackground#eff1f5
tab.activeBorder#00000000
tab.activeBorderTop#8839ef
tab.activeForeground#8839ef
tab.activeModifiedBorder#df8e1d
tab.border#e6e9ef
tab.hoverBackground#ffffff
tab.hoverBorder#00000000
tab.hoverForeground#8839ef
tab.inactiveBackground#e6e9ef
tab.inactiveForeground#9ca0b0
tab.inactiveModifiedBorder#df8e1d4d
tab.lastPinnedBorder#8839ef
tab.unfocusedActiveBackground#e6e9ef
tab.unfocusedActiveBorder#00000000
tab.unfocusedActiveBorderTop#8839ef4d
tab.unfocusedInactiveBackground#d6dbe5
table.headerBackground#ccd0da
table.headerForeground#4c4f69
terminal.ansiBlack#5c5f77
terminal.ansiBlue#1e66f5
terminal.ansiBrightBlack#6c6f85
terminal.ansiBrightBlue#456eff
terminal.ansiBrightCyan#2d9fa8
terminal.ansiBrightGreen#49af3d
terminal.ansiBrightMagenta#fe85d8
terminal.ansiBrightRed#de293e
terminal.ansiBrightWhite#bcc0cc
terminal.ansiBrightYellow#eea02d
terminal.ansiCyan#179299
terminal.ansiGreen#40a02b
terminal.ansiMagenta#ea76cb
terminal.ansiRed#d20f39
terminal.ansiWhite#acb0be
terminal.ansiYellow#df8e1d
terminal.border#acb0be
terminal.dropBackground#8839ef33
terminal.foreground#4c4f69
terminal.inactiveSelectionBackground#acb0be80
terminal.selectionBackground#acb0be
terminal.tab.activeBorder#8839ef
terminalCommandDecoration.defaultBackground#acb0be
terminalCommandDecoration.errorBackground#d20f39
terminalCommandDecoration.successBackground#40a02b
terminalCursor.background#eff1f5
terminalCursor.foreground#dc8a78
textBlockQuote.background#e6e9ef
textBlockQuote.border#dce0e8
textCodeBlock.background#eff1f5
textLink.activeForeground#04a5e5
textLink.foreground#1e66f5
textPreformat.foreground#4c4f69
textSeparator.foreground#8839ef
titleBar.activeBackground#dce0e8
titleBar.activeForeground#4c4f69
titleBar.border#00000000
titleBar.inactiveBackground#dce0e8
titleBar.inactiveForeground#4c4f6980
tree.inactiveIndentGuidesStroke#bcc0cc
tree.indentGuidesStroke#7c7f93
walkThrough.embeddedEditorBackground#eff1f54d
welcomePage.progress.background#dce0e8
welcomePage.progress.foreground#8839ef
welcomePage.tileBackground#e6e9ef
widget.shadow#e6e9ef80
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	#4c4f69	—
punctuation	#7c7f93
comment, punctuation.definition.comment	#7c7f93	italic
string, punctuation.definition.string	#40a02b	—
constant.character.escape	#ea76cb	—
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	#fe640b	—
keyword, keyword.operator.word, keyword.operator.new, variable.language.super, support.type.primitive, storage.type, storage.modifier, punctuation.definition.keyword	#8839ef
entity.name.tag.documentation	#8839ef	—
keyword.operator, punctuation.accessor, punctuation.definition.generic, meta.function.closure punctuation.section.parameters, punctuation.definition.tag, punctuation.separator.key-value	#179299	—
entity.name.function, meta.function-call.method, support.function, support.function.misc, variable.function	#1e66f5	italic
entity.name.class, entity.other.inherited-class, support.class, meta.function-call.constructor, entity.name.struct	#df8e1d	italic
entity.name.enum	#df8e1d	italic
meta.enum variable.other.readwrite, variable.other.enummember	#179299	—
meta.property.object	#179299	—
meta.type, meta.type-alias, support.type, entity.name.type	#df8e1d	italic
meta.annotation variable.function, meta.annotation variable.annotation.function, meta.annotation punctuation.definition.annotation, meta.decorator, punctuation.decorator	#fe640b	—
variable.parameter, meta.function.parameters	#e64553	italic
constant.language, support.function.builtin	#d20f39	—
entity.other.attribute-name.documentation	#d20f39	—
keyword.control.directive, punctuation.definition.directive	#df8e1d	—
punctuation.definition.typeparameters	#04a5e5	—
entity.name.namespace	#df8e1d	—
support.type.property-name.css	#1e66f5
variable.language.this, variable.language.this punctuation.definition.variable	#d20f39	—
variable.object.property	#4c4f69	—
string.template variable, string variable	#4c4f69	—
keyword.operator.new	—	bold
storage.modifier.specifier.extern.cpp	#8839ef	—
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	#df8e1d	—
storage.type.class.doxygen	—
storage.modifier.reference.cpp	#179299	—
meta.interpolation.cs	#4c4f69	—
comment.block.documentation.cs	#4c4f69	—
source.css entity.other.attribute-name.class.css, entity.other.attribute-name.parent-selector.css punctuation.definition.entity.css	#df8e1d	—
punctuation.separator.operator.css	#179299	—
source.css entity.other.attribute-name.pseudo-class	#179299	—
source.css constant.other.unicode-range	#fe640b	—
source.css variable.parameter.url	#40a02b
support.type.vendored.property-name	#04a5e5	—
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	#e64553	—
source.css meta.property-list variable, meta.property-list variable.other.less, meta.property-list variable.other.less punctuation.definition.variable.less	#1e66f5	—
keyword.other.unit.percentage.css	#fe640b	—
source.css meta.attribute-selector	#40a02b	—
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	#1e66f5
constant.language.json, constant.language.yaml	#fe640b	—
entity.name.type.anchor.yaml, variable.other.alias.yaml	#df8e1d
support.type.property-name.table, entity.name.section.group-title.ini	#df8e1d	—
constant.other.time.datetime.offset.toml	#ea76cb	—
punctuation.definition.anchor.yaml, punctuation.definition.alias.yaml	#ea76cb	—
entity.other.document.begin.yaml	#ea76cb	—
markup.changed.diff	#fe640b	—
meta.diff.header.from-file, meta.diff.header.to-file, punctuation.definition.from-file.diff, punctuation.definition.to-file.diff	#1e66f5	—
markup.inserted.diff	#40a02b	—
markup.deleted.diff	#d20f39	—
variable.other.env	#1e66f5	—
string.quoted variable.other.env	#4c4f69	—
support.function.builtin.gdscript	#1e66f5	—
constant.language.gdscript	#fe640b	—
comment meta.annotation.go	#e64553	—
comment meta.annotation.parameters.go	#fe640b	—
constant.language.go	#fe640b	—
variable.graphql	#4c4f69	—
string.unquoted.alias.graphql	#dd7878	—
constant.character.enum.graphql	#179299	—
meta.objectvalues.graphql constant.object.key.graphql string.unquoted.graphql	#dd7878	—
keyword.other.doctype, meta.tag.sgml.doctype punctuation.definition.tag, meta.tag.metadata.doctype entity.name.tag, meta.tag.metadata.doctype punctuation.definition.tag	#8839ef	—
entity.name.tag	#1e66f5
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	#d20f39	—
entity.other.attribute-name	#df8e1d	—
support.class.component, support.class.component.jsx, support.class.component.tsx, support.class.component.vue	#ea76cb
punctuation.definition.annotation, storage.type.annotation	#fe640b	—
constant.other.enum.java	#179299	—
storage.modifier.import.java	#4c4f69	—
comment.block.javadoc.java keyword.other.documentation.javadoc.java	—
meta.export variable.other.readwrite.js	#e64553	—
variable.other.constant.js, variable.other.constant.ts, variable.other.property.js, variable.other.property.ts	#4c4f69	—
variable.other.jsdoc, comment.block.documentation variable.other	#e64553
storage.type.class.jsdoc	—
support.type.object.console.js	#4c4f69	—
support.constant.node, support.type.object.module.js	#8839ef	—
storage.modifier.implements	#8839ef	—
constant.language.null.js, constant.language.null.ts, constant.language.undefined.js, constant.language.undefined.ts, support.type.builtin.ts	#8839ef	—
variable.parameter.generic	#df8e1d	—
keyword.declaration.function.arrow.js, storage.type.function.arrow.ts	#179299	—
punctuation.decorator.ts	#1e66f5	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	#8839ef	—
support.function.macro.julia	#179299	italic
constant.language.julia	#fe640b	—
constant.other.symbol.julia	#e64553	—
text.tex keyword.control.preamble	#179299	—
text.tex support.function.be	#04a5e5	—
constant.other.general.math.tex	#dd7878	—
variable.language.liquid	#ea76cb	—
comment.line.double-dash.documentation.lua storage.type.annotation.lua	#8839ef
comment.line.double-dash.documentation.lua entity.name.variable.lua, comment.line.double-dash.documentation.lua variable.lua	#4c4f69	—
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	#d20f39	—
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	#fe640b	—
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	#df8e1d	—
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	#40a02b	—
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	#209fb5	—
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	#7287fd	—
markup.bold	#d20f39	bold
markup.italic	#d20f39	italic
markup.strikethrough	#6c6f85	strikethrough
punctuation.definition.link, markup.underline.link	#1e66f5	—
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	#7287fd	—
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	#40a02b	—
fenced_code.block.language	#04a5e5	—
markup.fenced_code.block punctuation.definition, markup.raw support.asciidoc	#7c7f93	—
markup.quote, punctuation.definition.quote.begin	#ea76cb	—
meta.separator.markdown	#179299	—
punctuation.definition.list.begin.markdown, punctuation.definition.list.begin.quarto, markup.list.bullet	#179299	—
markup.heading.quarto	—	bold
entity.other.attribute-name.multipart.nix, entity.other.attribute-name.single.nix	#1e66f5	—
variable.parameter.name.nix	#4c4f69
meta.embedded variable.parameter.name.nix	#7287fd
string.unquoted.path.nix	#ea76cb
support.attribute.builtin, meta.attribute.php	#df8e1d	—
meta.function.parameters.php punctuation.definition.variable.php	#e64553	—
constant.language.php	#8839ef	—
text.html.php support.function	#04a5e5	—
keyword.other.phpdoc.php	—
support.variable.magic.python, meta.function-call.arguments.python	#4c4f69	—
support.function.magic.python	#04a5e5	italic
variable.parameter.function.language.special.self.python, variable.language.special.self.python	#d20f39	italic
keyword.control.flow.python, keyword.operator.logical.python	#8839ef	—
storage.type.function.python	#8839ef	—
support.token.decorator.python, meta.function.decorator.identifier.python	#04a5e5	—
meta.function-call.python	#1e66f5	—
entity.name.function.decorator.python, punctuation.definition.decorator.python	#fe640b	italic
constant.character.format.placeholder.other.python	#ea76cb	—
support.type.exception.python, support.function.builtin.python	#fe640b	—
support.type.python	#fe640b	—
constant.language.python	#8839ef	—
meta.indexed-name.python, meta.item-access.python	#e64553	italic
storage.type.string.python	#40a02b	italic
meta.function.parameters.python	—
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end	#ea76cb	—
keyword.control.anchor.regexp	#8839ef	—
string.regexp.ts	#4c4f69	—
punctuation.definition.group.regexp, keyword.other.back-reference.regexp	#40a02b	—
punctuation.definition.character-class.regexp	#df8e1d	—
constant.other.character-class.regexp	#ea76cb	—
constant.other.character-class.range.regexp	#dc8a78	—
keyword.operator.quantifier.regexp	#179299	—
constant.character.numeric.regexp	#fe640b	—
punctuation.definition.group.no-capture.regexp, meta.assertion.look-ahead.regexp, meta.assertion.negative-look-ahead.regexp	#1e66f5	—
meta.annotation.rust, meta.annotation.rust punctuation, meta.attribute.rust, punctuation.definition.attribute.rust	#df8e1d	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	#8839ef
entity.name.type.numeric.rust	#8839ef
meta.generic.rust	#fe640b	—
entity.name.impl.rust	#df8e1d	italic
entity.name.module.rust	#fe640b	—
entity.name.trait.rust	#df8e1d	italic
storage.type.source.rust	#df8e1d	—
entity.name.union.rust	#df8e1d	—
meta.enum.rust storage.type.source.rust	#179299	—
support.macro.rust, meta.macro.rust support.function.rust, entity.name.function.macro.rust	#1e66f5	italic
storage.modifier.lifetime.rust, entity.name.type.lifetime	#1e66f5	italic
string.quoted.double.rust constant.other.placeholder.rust	#ea76cb	—
meta.function.return-type.rust meta.generic.rust storage.type.rust	#4c4f69	—
meta.function.call.rust	#1e66f5	—
punctuation.brackets.angle.rust	#04a5e5	—
constant.other.caps.rust	#fe640b	—
meta.function.definition.rust variable.other.rust	#e64553	—
meta.function.call.rust variable.other.rust	#4c4f69	—
variable.language.self.rust	#d20f39	—
variable.other.metavariable.name.rust, meta.macro.metavariable.rust keyword.operator.macro.dollar.rust	#ea76cb	—
comment.line.shebang, comment.line.shebang punctuation.definition.comment, comment.line.shebang, punctuation.definition.comment.shebang.shell, meta.shebang.shell	#ea76cb	italic
comment.line.shebang constant.language	#179299	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	#d20f39	—
meta.string meta.interpolation.parameter.shell variable.other.readwrite	#fe640b	italic
source.shell punctuation.section.interpolation, punctuation.definition.evaluation.backticks.shell	#179299	—
entity.name.tag.heredoc.shell	#8839ef	—
string.quoted.double.shell variable.other.normal.shell	#4c4f69	—

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