Skip to content
GitHub

ChunkedSnippet

Use this component on specially formatted code snippet files from a public Github repository to be displayed as code.

The code files must have “chunking comments” to allow the component to work correctly without borking out the whole site. Example.

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

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.

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.