ghost-toc-plugin

A tiny (~3 KB), dependency-free floating table of contents you can drop into any site via CDN — no build step, no theme editing. Built for the GreedyLabs Ghost blog, but works on any HTML page.

Live demo & visual configurator: https://ghost-toc-plugin.greedylabs.kr

• Auto-generates a TOC from the headings in your article
• Floats beside your content and follows as you scroll
• Highlights the section you're currently reading
• Hides automatically on narrow screens (configurable)
• Korean/Unicode heading slugs, dark-mode aware
• Configure everything with data-* attributes
• Fully namespaced under greedylabs-ghost-toc (classes + CSS vars) so it never clashes with your theme's styles

Quick start

Add this once. For Ghost: Settings → Code injection → Site Footer.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/GreedyLabs/ghost-toc-plugin@1/toc.css">
<script src="https://cdn.jsdelivr.net/gh/GreedyLabs/ghost-toc-plugin@1/toc.min.js"
        data-content=".gh-content"
        data-headings="h2,h3"
        data-position="right"
        data-title="목차"></script>

@1 always resolves to the latest v1.x.x release (jsDelivr refreshes it within ~12h; our release workflow purges it instantly). Pin an exact version like @v1.0.1 if you need fully reproducible builds. jsDelivr also serves an auto-minified build — just add .min: .../toc.min.js.

Options

All set as data-* attributes on the <script> tag.

Attribute	Default	Description
data-content	.gh-content, article, main, .post-content, .entry-content	CSS selector for the article body
data-headings	h2,h3	Which headings to list (e.g. h2,h3,h4)
data-position	right	right or left
data-title	목차	Title above the list (empty string hides it)
data-accent	auto	Active-item color. Defaults to your Ghost theme accent (--ghost-accent-color), then #1a73e8. Set only to override.
data-min-width	1200	Hide the TOC below this viewport width (px)
data-min-headings	2	Don't render if fewer headings than this
data-top	100	Distance from top of viewport (px)
data-width	240	Panel width (px)
data-gap	28	Gap between content and panel (px)

Styling

Override the CSS variables on .greedylabs-ghost-toc (or globally) — no need to fork the CSS:

.greedylabs-ghost-toc {
    --greedylabs-ghost-toc-accent: #e8590c;          /* active link */
    --greedylabs-ghost-toc-muted:  rgba(0,0,0,.5);   /* inactive text */
    --greedylabs-ghost-toc-border: rgba(0,0,0,.1);   /* the rail */
}

Theme accent is automatic. On a Ghost site the active color already follows your publication's accent color (--ghost-accent-color) with no setup. Only set data-accent (or --greedylabs-ghost-toc-accent) if you want a different color.

Markup it generates

<aside class="greedylabs-ghost-toc greedylabs-ghost-toc--right">
  <nav class="greedylabs-ghost-toc__inner">
    <p class="greedylabs-ghost-toc__title">목차</p>
    <ul class="greedylabs-ghost-toc__list">
      <li class="greedylabs-ghost-toc__item greedylabs-ghost-toc__item--h2">
        <a class="greedylabs-ghost-toc__link" href="#...">…</a>
      </li>
      …
    </ul>
  </nav>
</aside>

The active link gets greedylabs-ghost-toc__link--active.

Notes

• Place the <script> without defer/async (the footer is fine) so it can read its own data-* options.
• On screens narrower than data-min-width, or when there isn't room beside the content, the panel hides itself.

License

MIT © GreedyLabs