Skip to main content

@mdit/plugin-demo


Display snippet render result and code at the same time.

Usage

TS
import MarkdownIt from "markdown-it";
import { demo } from "@mdit/plugin-demo";

const mdIt = MarkdownIt().use(demo, {
  // your options
});

mdIt.render(`
::: demo

# Heading 1

Text

:::
`);

Syntax

With this plugin, you can quickly display a Markdown snippet and its corresponding source code. You can customize the rendering output, by default it will render a <details> block

The syntax is the same as container, except that the corresponding name is demo.

选项

interface MarkdownItDemoOptions {
  /**
   * Container name
   *
   * @default "demo"
   */
  name?: string;

  /**
   * Whether code is displayed before result
   *
   * @default true
   */
  beforeContent?: boolean;

  /**
   * Opening tag render function
   */
  openRender?: RenderRule;

  /**
   * Closing tag render function
   */
  closeRender?: RenderRule;

  /**
   * Code render function
   */
  codeRender?: RenderRule;
}

Demo

Heading 1

Text

## Heading 1

Text
::: demo

## Heading 1

Text

:::