Code Block

Display formatted code snippets with syntax highlighting and copy functionality.

Default

A standard code block with language label and copy button.

javascript
function greet(name) {
  return `Hello, ${name}!`;
}

const message = greet("World");
console.log(message);

With Line Numbers

Code block with line numbers for easier reference.

typescript
1interface User {
2 id: string;
3 name: string;
4 email: string;
5 role: "admin" | "user";
6}
7
8function getUser(id: string): User {
9 return fetchUser(id);
10}

With Highlighted Lines

Highlight specific lines to draw attention to important code.

javascript
const app = express();
app.get("/api/users", (req, res) => {
const users = db.getUsers();
res.json(users);
});
app.listen(3000);

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.

terminal
$ 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!