CodeBlock

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.

client.js

import { Acme } from "acme-sdk";
const acme = new Acme(process.env.ACME_KEY);
const payment = await acme.payments.create({ amount: 1000 });

<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:

Install

npm install acme-sdk

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

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

Collapsed, wrapped and focused

handler.py

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 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.

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.