Code Blocks no Astro
Como usar code blocks profissionais com Expressive Code.
Syntax Highlighting
O Astro usa Expressive Code para code blocks profissionais com copy button, line numbers e muito mais.
Exemplo em JavaScript
function greet(name) { console.log(`Olá, ${name}!`);}
greet("Mundo");Exemplo em TypeScript
interface User { id: number; name: string; email: string;}
const user: User = { id: 1, name: "Ricco", email: "ricco@example.com",};Exemplo em CSS
.container { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1rem;}Exemplo com line numbers
// Isso aparece com números de linhaconst items = [1, 2, 3, 4, 5];
const doubled = items.map((item) => { return item * 2;});
console.log(doubled);Exemplo com destaque de linhas
const items = [1, 2, 3, 4, 5];const doubled = items.map((item) => item * 2);