Skip to content
GitHub

CodeBlock

Use this component to add a title to a code block that’s styled differently from Starlight’s default styles. To use it, your docs page must be in .mdx format. Please change the format from .md to .mdx if necessary. All your existing markdown will still be supported without issue.

The component takes a title attribute. The title will be displayed as part of the code block in bold. Starlight’s default styles cause a title to appear either in a tab or in a mock terminal window. The Markdown syntax page has examples of all three styles.

Usage

Import the CodeBlock component like so:

import { CodeBlock } from "@interledger/docs-design-system";

Use the <CodeBlock> component within your content like so:

<CodeBlock title="Response">
```http
{
"id":"https://wallet.example/alice/incoming-payments/08394f02-7b7b-45e2-b645-51d04e7c330c",
"paymentPointer":"https://wallet.example/alice",
"receivedAmount": {
"value":"0",
"assetCode":"USD",
"assetScale":2
},
"completed":false,
"createdAt":"2022-03-12T23:20:50.52Z",
"updatedAt":"2022-03-12T23:20:50.52Z",
}
```
</CodeBlock>

Working example

Response

{
"id":"https://wallet.example/alice/incoming-payments/08394f02-7b7b-45e2-b645-51d04e7c330c",
"paymentPointer":"https://wallet.example/alice",
"receivedAmount": {
"value":"0",
"assetCode":"USD",
"assetScale":2
},
"completed":false,
"createdAt":"2022-03-12T23:20:50.52Z",
"updatedAt":"2022-03-12T23:20:50.52Z",
}