Skip to main content

Customization

Styling with CSS​

The plugin uses CSS modules — override specific classes in your site's src/css/custom.css:

/* Auto-linked term underline */
.glossaryTermWrapper .glossaryTerm {
  border-bottom-color: var(--ifm-color-primary);
}

/* Hover tooltip */
.glossaryTermWrapper .tooltip {
  background: var(--ifm-background-surface-color);
  color: var(--ifm-color-content);
}

Swizzling components​

For structural changes, swizzleswizzle Docusaurus's mechanism for customizing theme components by ejecting or wrapping them in your project. the components in wrap mode:

npm run swizzle docusaurus-plugin-glossary GlossaryPage -- --wrap
npm run swizzle docusaurus-plugin-glossary GlossaryTerm -- --wrap

This creates src/theme/GlossaryPage/ and src/theme/GlossaryTerm/ shim files you can modify without forking the plugin.

Troubleshooting​

  • Glossary page 404: check routePath doesn't clash with existing routes; run npm run clear to bust the Docusaurus cache
  • No auto-linking: make sure you're using the preset, or have the remarkremark A markdown processor. Remark plugins transform the markdown AST before it becomes HTML/JSX. plugin configured in both docs and pages; clear cache and restart
  • Tooltips missing: confirm you're on @docusaurus/core@^3 and react@^18
  • "GlossaryTerm not found": the MDXMDX A Markdown-based format that lets you write JSX inside your markdown, used by Docusaurus v3 for docs and pages. is trying to render before the plugin registered its theme — clear cache with npm run clear