Code Block

Display syntax-highlighted code snippets using Shiki.

Examples

Code Block Basics

Line Selection Highlight

Use highlight property for the line-selection highlight

Installation

Show Line Numbers

To show line numbers in your code block, add the following styles to your global.css:

code {
counter-reset: step;
counter-increment: step 0;
margin: 0;
width: 100%;
}

code .line::before {
content: counter(step);
counter-increment: step;
width: 1rem;
margin-right: 1.5rem;
display: inline-block;
text-align: right;
color: gray;
}