Custom Components

Code Block

How to use code blocks

#Code Block

We use Shiki for highlighting.

#API Reference

Name	Prop	Type	Default
Show Line Numbers	`showLineNumbers`	`boolean`	`false`
Line Highlighting	`{<line_number>} \| {<line_number>,<line_number>} \| {<start>-<end>}`	`number{}`	-
Word Highlighting	`/<word>/`	`string`	-
Custom Title	`title="..."`	`string`	-
Custom Icon	`icon="i<IconName>"`	`string`	-
Custom Font	`font="<FontName>"`	`string`	-
Font Ligatures	`fontLigatures`	`boolean`	`true`
Diff Notation	`// [!code ++] \| // [!code --]`	`string`	-

#List Available Icon

Variable Name	Icon Render
`iJs`	js
`iJsx`	jsx
`iTs`	ts
`iDts`	dts
`iTsx`	tsx
`iNode`	node
`iNodejs`	nodejs
`iNpm`	npm
`iYarn`	yarn
`iPnpm`	pnpm
`iBun`	bun
`iCss`	css
`iHtml`	html
`iJson`	json
`iMd`	md
`iMdx`	mdx
`iAnsi`	ansi
`iBash`	bash
`iSh`	sh
`iZsh`	zsh
`iShell`	shell
`iYml`	yml
`iYaml`	yaml
`iCsv`	csv
`iSql`	sql
`iJava`	java
`iGo`	go
`iGolang`	golang
`iPy`	py
`iPython`	python
`iRb`	rb
`iRuby`	ruby
`iVim`	vim
`iVimscript`	vimscript
`iDocker`	docker
`iDockerfile`	dockerfile
`iDiff`	diff
`iLua`	lua
`iRust`	rust
`iCs`	cs
`iCsharp`	csharp
`iCpp`	cpp
`iC`	c
`iSwift`	swift
`iDart`	dart
`iFlutter`	flutter
`iXml`	xml
`iXaml`	xaml
`iPhp`	php
`iBlade`	blade
`iLaravel`	laravel
`iKotlin`	kotlin
`iKt`	kt
`iVue`	vue
`iVuejs`	vuejs
`iAngular`	angular
`iSass`	sass
`iGit`	git
`iGithub`	github
`iGitlab`	gitlab
`iPostgresql`	postgresql
`iTf`	terraform
`iTerraform`	terraform
`iAnsible`	ansible
`iTofu`	tofu
`iKubernetes`	kubernetes
`iK8s`	kubernetes
`iNginx`	nginx
`iArduino`	arduino
`iIno`	arduino
`iTailwind`	tailwind
`iDotnet`	dotnet
`iGraphql`	graphql
`iPrisma`	prisma
`iMysql`	mysql
`iMariadb`	mariadb
`iRabbitmq`	rabbitmq
`iKafka`	kafka
`iRedis`	redis
`iMongodb`	mongodb
`iSupabase`	supabase
`iGithubactions`	githubactions
`iMssql`	mssql
`iSqlserver`	sqlserver
`iPodman`	podman
`iArgo`	argo
`iPosthog`	posthog
`iGa`	ga
`iGoogleAnalytics`	ga

#Basic Usage

See detail info about how to use code blocks.

PreviousDescription Color

NextLine Numbers