Code

The Code component displays syntax highlighted code with copy functionality.

Usage#

Use fenced code blocks in your MDX:

```javascript
const greeting = "hello world";
console.log(greeting);
```

Renders as:

const greeting = "hello world";
console.log(greeting);

With filename#

Add a filename to show a header:

```typescript filename="app.ts"
export function main() {
  console.log("starting...");
}
```

Supported languages#

fromsrc supports all languages via Shiki:

• JavaScript, TypeScript
• Python, Ruby, Go, Rust
• HTML, CSS, JSON, YAML
• Bash, SQL, GraphQL
• And many more

Props#

Behavior#

• Copy button with status feedback
• Word wrap toggle
• Wrap preference persisted across pages