function greet(name) {
return `Hello, ${name}!`;
}
console.log(greet("World"));
'
```
## Key Elements
**Syntax Highlighting:**
- Use Shiki (`shiki.style`) or highlight.js for token coloring
- Inline styles work best for standalone images
**Window Chrome:**
- Traffic light dots (red, yellow, green)
- Filename in title bar
- Rounded corners, shadows
**Typography:**
- JetBrains Mono or Fira Code for code
- Inter or system fonts for UI elements
- Line numbers optional
**Backgrounds:**
- Gradient backgrounds for the container
- White or dark code window
- Glassmorphism effects
## Shiki Integration
For server-side syntax highlighting:
```javascript
import { createHighlighter } from "shiki";
const highlighter = await createHighlighter({
themes: ["github-light"],
langs: ["javascript", "python", "rust"],
});
const html = highlighter.codeToHtml(code, {
lang: "javascript",
theme: "github-light",
});
```
## Tips
- Use `deviceScaleFactor=2` for crisp text
- Add `delay=500` if using web fonts
- Container width should match `width` param
- Use `omitBackground=true` for transparent PNGs
## Rate Limits
50 requests/hour per IP.