@mdit/plugin-demo

用于同时展示片段渲染和片段代码。

使用

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

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

mdIt.render(`
::: demo

# Heading 1

Text

:::
`);

格式

使用此插件，你可以快速展示 Markdown 片段和其对应的源代码。你可以自定义渲染输出，默认情况下将会渲染出一个 <details> 块。

语法与 container 相同，只不过对应的 name 为 demo。

选项

name

• 类型：string
• 默认值："demo"
• 详情：容器名称。

showCodeFirst

• 类型：boolean
• 默认值：false
• 详情：代码是否显示在内容前。

openRender

• 类型：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;

• 详情：开始标签渲染函数。

closeRender

• 类型：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;

• 详情：结束标签渲染函数。

codeRender

• 类型：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;

• 详情：代码渲染函数。

contentOpenRender

• 类型：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;

• 详情：内容开始标签渲染函数。

contentCloseRender

• 类型：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;

• 详情：内容结束标签渲染函数。

示例

Heading 1

Text

Demo

## Heading 1

Text

::: preview

## Heading 1

Text

:::