---
title: "Code Snippet Embed (GitHub Gist)"
description: "Code Snippet (GitHub Gist) for HubSpot – Clean, Fast, Developer-Friendly"
url: "https://freshjuice.dev/docs/modules/github-gist/"
---
Documentation

# Code Snippet Embed (GitHub Gist)

[View module on HubSpot Marketplace](https://app.hubspot.com/l/ecosystem/marketplace/modules/code-snippet-github-gist-module-by-freshjuice?utm_source=freshjuice.dev)

The **Code Snippet Embed (GitHub Gist)** module lets you embed real GitHub Gists directly into your HubSpot pages. It comes with flexible styling, support for multi-file Gists, line highlighting, and built-in caching for blazing fast performance.

[View module preview](https://demo.freshjuice.dev/modules/code-snippet-github-gist) — this is a HubSpot landing page showing the module in action. You can use it to test performance with tools like PageSpeed Insights.

---

## Content tab

### Gist Embed Code

Paste the GitHub Gist embed code here. This is the only required field — it loads the snippet from GitHub and renders it inside HubSpot.

![sidebar Gist Embed Code textarea](https://freshjuice.dev/_astro/gist-embed-code.C634jqw0_1RzNFE.webp)

Gist Embed Code textarea.

### File Name (optional)

If your Gist contains multiple files, specify the exact file you want to display. Leave blank to show the default file.

![sidebar File Name input](https://freshjuice.dev/_astro/file-name.D6p6-AH7_i6avF.webp)

File Name input.

### Caption (optional)

Add a short caption above the code block. Great for labeling examples like “Example HTML snippet” or “Config.js sample.”

![sidebar Caption input](https://freshjuice.dev/_astro/caption.3E3i11fB_Zagve1.webp)

Caption input.

### Show Lines (optional)

Display only specific lines from the snippet. Examples: 2, 1-5, 1,4,6-8. Leave empty to show all lines.

![sidebar Show Lines toggle](https://freshjuice.dev/_astro/show-lines.D8fK9Xwd_HYzTJ.webp)

Show Lines toggle.

## Highlight Lines (optional)

Highlight specific lines to draw attention to important parts of the snippet. Examples: 2, 1-5, 1,4,6-8.

![sidebar Highlight Lines input](https://freshjuice.dev/_astro/highlight-lines.CjgQ959j_1Ip9Ti.webp)

Highlight Lines input.

## Advanced options

Expand the **Advanced** group in the sidebar:

-   **Custom CSS Class** — add extra classes for targeting or styling.

![sidebar Custom CSS Class input](https://freshjuice.dev/_astro/custom-css-class.zGK7Afoe_Z1PDiqJ.webp)

Sidebar Custom CSS Class input.

## Style tab

### Gist Style

-   **Show Footer** - Toggle whether the footer (with file name and GitHub link) should be displayed.
-   **Show Line Numbers** - Enable or disable line numbers in the code block.
-   **Expand Hidden Lines** - Allow users to expand collapsed code blocks and view hidden lines.

![Style tab options](https://freshjuice.dev/_astro/gist-styles.BzYUr6Jr_Z1XPcAo.webp)

Style tab options.

### Appearance

-   **Theme** – Choose between System (default), Light, or Dark themes. System adapts to the visitor’s OS preference.
-   **Border Radius** – Round the corners of the code snippet (in pixels). Example: 3 adds subtle rounding.
-   **Max-Width** – Set a maximum width (in pixels) for the snippet container. Example: **900** ensures the block fits your layout.
-   **Alignment** – Align the code snippet within its container: **Left**, **Center**, or **Right**.

![Style → Appearance options](https://freshjuice.dev/_astro/appearance.BNKWZ028_Z16D4tW.webp)

Style → Appearance options.

---

Looking to install this module?  
[Get Lite Video Embed on the HubSpot Marketplace](https://app.hubspot.com/l/ecosystem/marketplace/modules/code-snippet-github-gist-module-by-freshjuice?utm_source=freshjuice.dev)