Codeblock

The CodeBlock component renders code with syntax highlighting, language icons, and a copy button.

Usage#

import { CodeBlock } from "fromsrc/client";

<CodeBlock lang="typescript">
  {`const greeting = "hello world"
console.log(greeting)`}
</CodeBlock>;

With title#

Add a title to display in the header:

<CodeBlock lang="typescript" title="app.ts">
  {`export function main() {
  console.log("starting...")
}`}
</CodeBlock>

Language icons#

CodeBlock displays icons for supported languages:

• typescript, javascript
• python, rust, go
• bash, shell
• json, yaml
• html, css
• jsx, tsx
• markdown

Aliases are supported: ts maps to typescript, js to javascript, sh to bash, yml to yaml.

Copy button#

The copy button appears in the header when a title or language is set. Without a label, it floats in the top-right corner. Clicking copies the code content to clipboard.

Props#

Twoslash integration#

Twoslash metadata is rendered as notes below the code block when annotations are present:

```ts twoslash
const map = new Map<string, number>()
map.
//  ^| Map APIs
```

const map = new Map<string, number>()
map.
//  ^| Map APIs