@alt-gnome/markdown-it-custom-containers

Plug-in layer for simplified creation of custom containers in Vitepress

Installation

pnpm i -D @alt-gnome/markdown-it-custom-containers

Configure in VitePress

Add VitePress config:

// Other imports
import { createContainerPlugin } from '@alt-gnome/markdown-it-custom-containers';

export const config = defineConfig({
    // Other VitePress configuration
    markdown: {
        config: (md) => {
            // Other MD-It configs
            md.use(createContainerPlugin, {
                containers: [
                    // Here you will find the configuration of the blocks you need
                    // More about it in "Creating containers" section
                ] 
            }) 
        }
    }
}

Creating containers

General information

createContainerPlugin use as parameters:

/**
 * Plugin config
 * @interface
 * @property {ContainerConfig[]} [containers] - List of container configurations
 * @property {boolean} [debug=false] - Enabling debugging mode
 */
interface PluginOptions {
  containers?: ContainerConfig[]
  debug?: boolean
}

containers use an array of objects with keys:

/**
 * Configuration of a container
 * @interface
 * @property {string} type - The unique identifier of the container
 * @property {string} [defaultTitle] - The default header on page render
 * @property {boolean} [renderTitle=true] - Should it render the title?
 * @property {string} [customClass] - Additional CSS classes
 * @property {boolean} [isDetails] - Use the <details> tag instead of <div>
 */
interface ContainerConfig {
  type: string
  defaultTitle?: string
  renderTitle?: boolean
  customClass?: string
  isDetails?: boolean
}