GitHubCode

The GitHubCode component allows you to include files from Cloudflare repositories.

The remote content can be filtered by lines or a region enclosed in tags.

import { GitHubCode } from "~/components";

import { GitHubCode } from "~/components";

<GitHubCode
    repo="cloudflare/workflows-starter"
    file="src/index.ts"
    commit="a844e629ec80968118d4b116d4b26f5dcb107137"
    lang="ts"
    useTypeScriptExample={true}
/>

import { GitHubCode } from "~/components";

{/*
import { foo } from "bar";

const baz = foo();

console.log(baz);
*/}
<GitHubCode
    repo="..."
    file="..."
    commit="..."
    lang="..."
    lines="1-3"
/>
{/*
import { foo } from "bar";

const baz = foo();
*/}

import { GitHubCode } from "~/components";

{/*
<docs-tag name="no-logging">
import { foo } from "bar";

const baz = foo();
</docs-tag name="no-logging">

console.log(baz);
*/}
<GitHubCode
    repo="..."
    file="..."
    commit="..."
    lang="..."
    tag="no-logging"
/>
{/*
import { foo } from "bar";

const baz = foo();
*/}

required type: string

The owner and repository to pull from, in the form of cloudflare/<REPO-NAME>

For example:

• cloudflare/workers-rs.
• cloudflare/templates.

required type: string

The file path to pull from, in the form of path/to/filename-including-extensions. This path excludes the repo name.

For example:

• templates/hello-world/src/lib.rs.
• d1-starter-sessions-api/src/index.ts.

required type: string

The long (40-characters) Git commit hash to pull from, for example ab3951b5c95329a600a7baa9f9bb1a7a95f1aeaa.

required type: string

The language to use for the code block, for example rs.

type: boolean

If the lang is "ts" and useTypeScriptExample is true, the TypeScriptExample component will be used to provide a JavaScript tab as well.

type: string

A range of lines to filter the content using, for example 1-3.

type: string

A region to filter the content with, for example no-logging.

This should be represented as starting <docs-tag name="no-logging"> and closing </docs-tag name="no-logging"> comments in the source file.

type: object

Props to pass to the Expressive Code component ↗.

• Tutorial