GitHub Gist

The <Gist> component embeds files from a GitHub Gist in Astro projects.

Usage

The <Gist> component generates static HTML for files from a GitHub Gist. It uses the HTML markup provided by GitHub and links to GitHub’s CSS for styling, so no client-side JavaScript is required.

Astro

---
import { Gist } from 'astro-embed';
---

<Gist id="https://gist.github.com/delucis/0b44f4ff0397767b2416cc981692c346" />

MDX

import { Gist } from 'astro-embed';

<Gist id="https://gist.github.com/delucis/0b44f4ff0397767b2416cc981692c346" />

The above code produces the following result:

Optional props

In addition to the required id prop, the following props are available to customise how the <Gist> component renders:

file

Type: string

You can display only a single file from a multi-file Gist by specifying the file attribute with the name of the file to embed.

For example, this is the same Gist as above, but only showing the README.md file:

<Gist
  id="https://gist.github.com/delucis/0b44f4ff0397767b2416cc981692c346"
  file="README.md"
/>

Standalone installation

If you only need the <Gist> component, you can install the package directly instead of the main astro-embed package:

npm

npm i @astro-community/astro-embed-gist

pnpm

pnpm add @astro-community/astro-embed-gist

yarn

yarn add @astro-community/astro-embed-gist

The <Gist> component can then be imported as:

import { Gist } from '@astro-community/astro-embed-gist';