Skip to main content

@mdit/plugin-demo

Display snippet render result and code at the same time.

Usage

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.

Options

name

  • Type: string
  • Default: "demo"
  • Details: Container name.

showCodeFirst

  • Type: boolean
  • Default: false
  • Details: Whether code is displayed before result.

openRender

  • Type: RenderRule
/**
 * @param tokens - List of tokens.
 * @param index - Current token index.
 * @param options - Markdown-it options.
 * @param env - Markdown-it environment.
 * @param self - Markdown-it renderer instance.
 *
 * @returns Rendered HTML string.
 */
type RenderRule = (
  tokens: Token[],
  index: number,
  options: Options,
  env: Env,
  self: Renderer,
) => string;
  • Details: Opening tag render function.

closeRender

  • Type: RenderRule
/**
 * @param tokens - List of tokens.
 * @param index - Current token index.
 * @param options - Markdown-it options.
 * @param env - Markdown-it environment.
 * @param self - Markdown-it renderer instance.
 *
 * @returns Rendered HTML string.
 */
type RenderRule = (
  tokens: Token[],
  index: number,
  options: Options,
  env: Env,
  self: Renderer,
) => string;
  • Details: Closing tag render function.

codeRender

  • Type: RenderRule
/**
 * @param tokens - List of tokens.
 * @param index - Current token index.
 * @param options - Markdown-it options.
 * @param env - Markdown-it environment.
 * @param self - Markdown-it renderer instance.
 *
 * @returns Rendered HTML string.
 */
type RenderRule = (
  tokens: Token[],
  index: number,
  options: Options,
  env: Env,
  self: Renderer,
) => string;
  • Details: Code render function.

contentOpenRender

  • Type: RenderRule
/**
 * @param tokens - List of tokens.
 * @param index - Current token index.
 * @param options - Markdown-it options.
 * @param env - Markdown-it environment.
 * @param self - Markdown-it renderer instance.
 *
 * @returns Rendered HTML string.
 */
type RenderRule = (
  tokens: Token[],
  index: number,
  options: Options,
  env: Env,
  self: Renderer,
) => string;
  • Details: Content open tag render function.

contentCloseRender

  • Type: RenderRule
/**
 * @param tokens - List of tokens.
 * @param index - Current token index.
 * @param options - Markdown-it options.
 * @param env - Markdown-it environment.
 * @param self - Markdown-it renderer instance.
 *
 * @returns Rendered HTML string.
 */
type RenderRule = (
  tokens: Token[],
  index: number,
  options: Options,
  env: Env,
  self: Renderer,
) => string;
  • Details: Content close tag render function.

Demo

Heading 1

Text

Demo
## Heading 1

Text
::: preview

## Heading 1

Text

:::