MdEnhance Plugin Config

About 3 min

Intro

The theme can enhance Markdown syntax via vuepress-plugin-md-enhance. You can set the following options with plugins.mdEnhance in theme options.

Plugin Options

The theme passes plugins.mdEnhance in theme options as plugin options to vuepress-plugin-md-enhance plugin.

gfm

Type: boolean
Default: false

Whether to support full GFM syntax.

Note

For full GFM syntax, see GFM.

Honestly, we do not 100% implement GFM, we only supply its common syntax.

Some of the behavior might be different, for example to support Vue syntax, we are not disallowing <script> tags. But in most situation, the behavior should be same.

vPre

Type: boolean
Default: false
Details:
- v-pre wrapper

Whether to enable v-pre wrapper.

breaks

Type: boolean
Default: false
Enabled in GFM: Yes

Whether convert \n in paragraphs into <br>s

linkify

Type: boolean
Default: false
Enabled in GFM: Yes

Whether convert URL-like text into links

align

Type: boolean
Default: false
Details:
- Align

Whether to enable custom align.

attrs

Type: AttrsOptions | boolean

interface AttrsOptions {
  /**
   * left delimiter
   *
   * @default '{'
   */
  left?: string;

  /**
   * right delimiter
   *
   * @default '}'
   */
  right?: string;

  /**
   * allowed attributes
   *
   * @description An empty list means allowing all attribute
   *
   * @default []
   */
  allowed?: (string | RegExp)[];
}

Default: false
Details:
- Attrs

Whether to enable attribute customize support.

sup

Type: boolean
Default: false
Details:
- Superscript

Whether to enable the upper format support.

sub

Type: boolean
Default: false
Details:
- Subscript

Whether to enable the lower corner format support.

footnote

Type: boolean
Default: false
Details:
- Footnote

Whether to enable footnote format support.

mark

Type: boolean
Default: false
Details:
- Mark

Whether to enable mark support.

tasklist

Type: TaskListOptions | boolean
Default: false

Whether to enable tasklist format support. You can pass an object to config task list.

interface TaskListOptions {
  /**
   * Whether disable checkbox
   *
   * @default true
   */
  disabled?: boolean;

  /**
   * Whether use `<label>` to wrap text
   *
   * @default true
   */
  label?: boolean;
}

include

Type: IncludeOptions | boolean

interface IncludeOptions {
  /**
   * handle include filePath
   *
   * @default (path) => path
   */
  resolvePath?: (path: string, cwd: string) => string;

  /**
   * Whether deep include files in included Markdown files
   *
   * @default false
   */
  deep?: boolean;
}

Default: false

Whether to enable Markdown import support. You can pass in a function for path resolution.

component

Type: boolean
Default: false

Whether to enable component support

chart

Type: boolean
Default: false

Whether to enable chart support

echarts

Type: boolean
Default: false

Whether to enable ECharts support

flowchart

Type: boolean
Default: false

Whether to enable flowchart support

mermaid

Type: MermaidConfig | boolean
Default: false

Whether to enable Mermaid support, you can pass in a config object to customize the behavior of Mermaid.

plantuml

Type: MarkdownItPlantumlOptions[] | boolean
Default: false

Whether to enable plantuml support.

spoiler

Type: boolean
Default: false

Whether to enable spoiler support.

stylize

Type: StylizeOptions | false

interface StylizeResult {
  /**
   * Tag name
   */
  tag: string;

  /**
   * Attributes settings
   */
  attrs: Record<string, string>;

  /**
   * Tag content
   */
  content: string;
}

interface StylizeItem {
  /**
   * Inline token matcher
   */
  matcher: string | RegExp;

  /**
   * Content Replacer
   */
  replacer: (options: {
    tag: string;
    content: string;
    attrs: Record<string, string>;
    env?: MarkdownEnv;
  }) => StylizeResult | void;
}

type StylizeOptions = StylizeItem[];

Default: false

Stylize inline tokens to create snippet you want.

playground

Type: PlaygroundGlobalOptions

interface PlaygroundCodeConfig {
  /**
   * Code block extension
   *
   * @description It's based on filename, not code fence language
   */
  ext: string;

  /** Code block content */
  content: string;
}

interface PlaygroundData {
  /** Title of Playground */
  title?: string;

  /**
   * Import map file name
   *
   * @default "import-map.json"
   */
  importMap?: string;

  /** Playground files info */
  files: Record<
    /** File name */
    string,
    /** File detail */
    PlaygroundCodeConfig
  >;

  /**
   * Playground settings
   *
   * @description It's parsed result of json content after setting directive
   */
  settings: Record<string, unknown>;

  /** hash key based on playground content */
  key: string;
}

interface PlaygroundOptions {
  /** Playground container name */
  name: string;

  /**
   * Playground component name
   *
   * @default "Playground"
   */
  component?: string;

  /**
   * Props getter
   */
  propsGetter: (data: PlaygroundData) => Record<string, string>;
}

interface TSPresetPlaygroundOptions extends CompilerOptions {
  /**
   * external playground service url
   *
   * @default "https://www.typescriptlang.org/play"
   */
  service?: string;
}

interface VuePresetPlaygroundOptions {
  /**
   * external playground service url
   *
   * @default "https://sfc.vuejs.org/"
   */
  service?: string;

  /**
   * Whether to use dev version
   *
   * @default false
   */
  dev?: boolean;

  /**
   * Whether to enable SSR
   *
   * @default false
   */
  ssr?: boolean;
}

interface UnoPresetPlaygroundOptions {
  /**
   * external playground service url
   *
   * @default "https://unocss.dev/play"
   */
  service?: string;
}

type BuiltInPlaygroundPreset = "ts" | "vue" | "unocss";

interface PlaygroundGlobalOptions {
  /** Playground presets */
  presets: (BuiltInPlaygroundPreset | PlaygroundOptions)[];
  /** Playground config */
  config?: {
    ts?: TSPresetPlaygroundOptions;
    vue?: VuePresetPlaygroundOptions;
    unocss?: UnoPresetPlaygroundOptions;
  };
}