ChunkedSnippet

Caution

This component only exists in the Open Payments repository. Raise an issue if you feel it should be elevated into the shared library.

This component allows you to display specially formatted code snippet files from a public GitHub repo within a page.

The snippet files must have “chunking comments” for the component to work correctly. Example.

The component takes a source attribute which must be a raw Github link, and a chunk attribute which specifies the chunk you want to display on-page.

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 ChunkedSnippet component like so:

import ChunkedSnippet from "/src/components/ChunkedSnippet.astro";

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

<ChunkedSnippet
  source='https://raw.githubusercontent.com/huijing/filerepo/gh-pages/incoming-grant.ts'
  chunk='1'
/>

Working example

Refer to the TypeScript code snippets within the Open Payments documentation for Get wallet address information. The raw source file is located here.