Code Block
Display formatted code snippets with syntax highlighting and copy functionality.
Default
A standard code block with language label and copy button.
function greet(name) {
return `Hello, ${name}!`;
}
const message = greet("World");
console.log(message); With Line Numbers
Code block with line numbers for easier reference.
1 interface User { 2 id: string; 3 name: string; 4 email: string; 5 role: "admin" | "user"; 6 } 7 8 function getUser(id: string): User { 9 return fetchUser(id); 10 }
With Highlighted Lines
Highlight specific lines to draw attention to important code.
Inline Code
Use inline code for short code references within text.
Use const for variables that won't be reassigned, and
let for variables that will change.
Import components with import Button from './Button' to use them in your templates.
The function returns Promise<User[]> which resolves to an array of user objects.
You can handle errors using try...catch blocks or the
.catch() method.
Run npm install to install dependencies, then
npm run dev to start the development server on
localhost:3000.
With Tabs
Switch between multiple languages or file variants.
function fibonacci(n) {
if (n <= 1) return n;
return fibonacci(n - 1) + fibonacci(n - 2);
}
console.log(fibonacci(10)); Terminal
Terminal-style code block for CLI commands and output.
$ npm install
added 156 packages in 3.2s
$ npm run build
> my-app@1.0.0 build
> astro build
generating static routes
▶ src/pages/index.astro
▶ src/pages/about.astro
▶ src/pages/components/button.astro
✓ Completed in 1.24s
build complete!