CodeBlock

This component adds a title to a code block that’s styled differently from Starlight’s default styles. The title will be displayed as part of the code block in bold.

To use the component, the page must be in .mdx format. Change the format from .md to .mdx if necessary. All your existing markdown will still be supported without issue.

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",
}