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

import { GitHubCode } from "~/components";

Usage

use worker::*;

#[event(fetch)]
async fn fetch(
    _req: Request,
    _env: Env,
    _ctx: Context,
) -> Result<Response> {
    console_error_panic_hook::set_once();
    Response::ok("Hello World!")
}

import { GitHubCode } from "~/components";

<GitHubCode
    repo="cloudflare/workers-rs"
    file="templates/hello-world/src/lib.rs"
    commit="ab3951b5c95329a600a7baa9f9bb1a7a95f1aeaa"
    lang="rs"
/>

Filtering by lines

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();
*/}

Filtering by tag

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();
*/}

<GitHubCode> Props

repo

required type: string

The owner and repository to pull from, for example cloudflare/workers-rs.

file

required type: string

The file path to pull from, for example templates/hello-world/src/lib.rs.

commit

required type: string

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

lang

required type: string

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

lines

type: string

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

tag

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.

Was this helpful?

What did you like?

Accurate

Easy to understand

Solved my problem

Helped me decide to use the product

Other

What went wrong?

Hard to understand

Incorrect information

Missing the information

Other

Thank you for helping improve Cloudflare's documentation!