# CodeBlock

> For the complete documentation index, see [llms.txt](https://preview.writedocs.io/llms.txt).

A code block built from props - for code that comes from a variable or a component.

`CodeBlock` draws a code block from props instead of a fenced block. It looks and works the same - highlighting, title, line numbers, copy button - and suits code that isn't written out in the page: code in a variable, or built by a [snippet](https://preview.writedocs.io/docs/content/snippets/).

<CodeBlock language="javascript" filename="client.js" icon="square-code" lines highlight="[2]">
{`import { Acme } from "acme-sdk";
const acme = new Acme(process.env.ACME_KEY);
const payment = await acme.payments.create({ amount: 1000 });`}
</CodeBlock>

```mdx
<CodeBlock language="javascript" filename="client.js" icon="square-code" lines highlight="[2]">
{`import { Acme } from "acme-sdk";
const acme = new Acme(process.env.ACME_KEY);
const payment = await acme.payments.create({ amount: 1000 });`}
</CodeBlock>
```

Put the code in a template string - `` {`...`} `` - so its line breaks and characters stay as written.

## From a variable

`code` takes the code as a prop - here from a value defined in the page:

export const install = "npm install acme-sdk";

<CodeBlock language="bash" filename="Install" code={install} />

```mdx
export const install = "npm install acme-sdk";

<CodeBlock language="bash" filename="Install" code={install} />
```

## Collapsed, wrapped and focused

<CodeBlock language="python" filename="handler.py" expandable wrap focus="3">
{`def handler(event, context):
    payload = parse(event["body"])
    payment = acme.payments.create(amount=payload["amount"], currency=payload.get("currency", "usd"), metadata={"order_id": payload["order_id"], "source": "checkout"})
    notify(payment)
    log.info("payment created", extra={"id": payment.id})
    metrics.increment("payments.created")
    audit.record("payment", payment.id)
    cache.invalidate(payload["order_id"])
    queue.publish("payment.created", payment)
    return {"statusCode": 201, "body": json.dumps(payment)}`}
</CodeBlock>

```mdx
<CodeBlock language="python" filename="handler.py" expandable wrap focus="3">
{`def handler(event, context):
    payload = parse(event["body"])
    payment = acme.payments.create(...)
    ...`}
</CodeBlock>
```

## Props

**`code`** `string`

The code. Without it, the code is the component's content.

**`language`** `string` default: `text`

The language to highlight, like `javascript` or `bash`.

**`filename`** `string`

A title bar with this text.

**`icon`** `string`

An icon in the title bar - any [icon](https://preview.writedocs.io/docs/content/components/icon/#icons).

**`lines`** `boolean` default: `false`

Line numbers.

**`highlight`** `string | number[]`

Lines to highlight: `"[1,3,4]"`, `"1,3-5"` or `{[1, 3]}`.

**`focus`** `string | number[]`

Lines to focus, dimming the rest - written like `highlight`.

**`wrap`** `boolean` default: `false`

Wraps long lines instead of scrolling them sideways.

**`expandable`** `boolean` default: `false`

Shows the first lines of a long block, with a button to show the rest.

**`nocopy`** `boolean` default: `false`

No copy button.

For code written in the page, a fenced code block is simpler - see [Code blocks](https://preview.writedocs.io/docs/content/code-blocks/).