docusaurus-plugins

Use when creating Docusaurus plugins (remark, rehype, theme, content, lifecycle) to extend markdown, modify HTML, or add custom functionality

Stars 163

Forks 31

Install this agent skill to your Project

npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/skills/data/docusaurus-plugins-mcclowes-lea

SKILL.md

Docusaurus Plugin Guide

Quick Start

javascript

// Remark plugin - transforms markdown AST
module.exports = function remarkPlugin(options = {}) {
  return async function transformer(ast, vfile) {
    const { visit } = require('unist-util-visit');

    visit(ast, 'link', (node) => {
      // Transform nodes
      node.data = node.data || {};
      node.data.hProperties = { className: 'custom' };
    });

    return ast;
  };
};

// In docusaurus.config.js:
// remarkPlugins: [require('./plugins/my-plugin')]

Core Principles

5 Plugin Types: Remark (markdown), Rehype (HTML), Lifecycle (routes/webpack), Theme (components), Content (custom data)
Remark: Transforms markdown before HTML conversion, use unist-util-visit for AST traversal
Rehype: Transforms HTML after compilation, processes HAST (HTML AST)
Lifecycle: Most flexible, implements hooks like loadContent(), contentLoaded(), postBuild()
Export function: Returns transformer (remark/rehype) or plugin object (lifecycle)

Reference Files

Detailed guides for each plugin type:

references/remark-plugins.md - Markdown transformation
references/rehype-plugins.md - HTML processing
references/lifecycle-plugins.md - Routes, webpack, global data
references/theme-plugins.md - Themes and swizzling
references/content-plugins.md - Custom content types
references/package-structure.md - Publishing and config