@mdit/plugin-demo

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

使用

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

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

mdIt.render(`
::: demo

# Heading 1

Text

:::
`);

语法

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

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

选项

namestring

默认值"demo"

容器名称。

showCodeFirstboolean

默认值false

代码是否显示在内容前。

openRendererRendererRule

/**
 * @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 RendererRule = (
  tokens: Token[],
  index: number,
  options: Required<MarkdownItOptions>,
  env: Env | undefined,
  self: Renderer,
) => string;

开始标签渲染函数。

closeRendererRendererRule

/**
 * @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 RendererRule = (
  tokens: Token[],
  index: number,
  options: Required<MarkdownItOptions>,
  env: Env | undefined,
  self: Renderer,
) => string;

结束标签渲染函数。

codeRendererRendererRule

/**
 * @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 RendererRule = (
  tokens: Token[],
  index: number,
  options: Required<MarkdownItOptions>,
  env: Env | undefined,
  self: Renderer,
) => string;

代码渲染函数。

contentOpenRendererRendererRule

/**
 * @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 RendererRule = (
  tokens: Token[],
  index: number,
  options: Required<MarkdownItOptions>,
  env: Env | undefined,
  self: Renderer,
) => string;

内容开始标签渲染函数。

contentCloseRendererRendererRule

/**
 * @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 RendererRule = (
  tokens: Token[],
  index: number,
  options: Required<MarkdownItOptions>,
  env: Env | undefined,
  self: Renderer,
) => string;

内容结束标签渲染函数。

示例

Heading 1

Text

Demo

## Heading 1

Text

::: preview

## Heading 1

Text

:::