Markdown Enhance

Config

Mr.Hope ... 2020-5-7 About 3 min

You can pass these options to the plugin:

# enableAll

  • Type: boolean
  • Default: false

Whether to enable all features.

Warning

Please use this option ONLY for playing or testing.

As time grows,vuepress-plugin-md-enhance is becoming more powerful. It’s adding more syntax to Markdown parser and more code to output.

Enabling features you don’t need will increase dev and build time. (markdown-it has to check for extra syntaxs)

Also, presentation feature will add a 700KB size chunk (mostly is reveal.js) to your output.

Please use the options below and enable ONLY the feature you want to use.

# lineNumbers Default value changed

  • Type: boolean
  • Default: true

Whether to display the line number to the left of each code block.

# imageFix

  • Type: boolean
  • Default: true

Whether to fix image links containing special characters.

# gfm

  • Type: boolean
  • Default: false

Whether to support full GFM syntax.

Note

For full GFM syntax, see GFM (opens new window).

We are not 100% supporting it to be honestly, we only supply it’s syntax inlucding tasklists, footnote and so on.

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

# container

  • Type: boolean
  • Default: false

Whether to enable custom container including

  • info
  • note
  • tip
  • warning
  • danger
  • details

Note

The last 4 items conflict with default theme and will override it’s style.

# tabs

  • Type: boolean
  • Default: false

Whether to enable tabs.

# codegroup

  • Type: boolean
  • Default: false

Whether to enable codegroup.

# codetabs

  • Type: boolean
  • Default: false

Whether to enable codetabs.

# align

  • Type: boolean
  • Default: false

Whether to enable custom align.

# sup

  • Type: boolean
  • Default: false

Whether to enable the upper format support.

# sub

  • Type: boolean
  • Default: false

Whether to enable the lower corner format support.

# footnote

  • Type: boolean
  • Default: false

Whether to enable footnote format support.

# lazyLoad

  • Type: boolean
  • Default: false

Whether to lazy load every images in page in native way.

# mark

  • Type: boolean
  • Default: false

Whether to enable mark support.

# imageMark

  • Type: ImageMarkOptions | boolean
  • Default: false

Whether enable image mark support.

interface ImageMarkOptions {
  /** lightmode only IDs */
  light?: string[];
  /** darkmode only IDs */
  dark?: string[];
}
1
2
3
4
5
6

# 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;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

# tex

  • Type: KatexOptions | boolean
  • Default: false

Whether to enable TeX\TeX syntax support. You can pass an object to config KaTeX\KaTeX.

Please see Katex Docs (opens new window) for available options.

# include

  • Type: IncludeOptions | boolean

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

  /**
   * Whether deep include files in included markdown files
   *
   * @default false
   */
  deep?: boolean;
}
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15

  • Default: false

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

# chart

  • Type: boolean
  • Default: false

Whether to enable chart support

# flowchart

  • Type: boolean
  • Default: false

Whether to enable flowchart support

# mermaid

  • Type: boolean
  • Default: false

Whether to enable Mermaid (opens new window) 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[];
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35

  • Default: false

Stylize inline tokens to create snippet you want.

# demo

  • Type: CodeDemoGlobalOptions | boolean
  • Default: false

Whether to enable code demo support.

# demo.jsLib

  • Type: string[]
  • Required: No

CodePen, JsFiddle requires an external JS library for dating.

# demo.cssLib

  • Type: string[]
  • Required: No

CodePen, JsFiddle need an external CSS library for dating.

Note

The above two options are only used by third-party code demo service, you need to import these libraries in head.

# demo.jsfiddle

  • Type: boolean
  • Default value: true

Whether to display the JSFiddle button

# demo.codepen

  • Type: boolean
  • Default value: true

Whether to display the CodePen button

# demo.codepenLayout

  • Type: "top" | "left" | "correct"
  • Default value: "left"

CodePen editor layout

# demo.codepenEditors

  • Type: string
  • Default value: "101"

CodePen editor status

# others

The following are the library links used by the third-party code demo service. Unless your environment cannot visit unpkg or the speed is slow, you probably don’t need to override the default values.

# demo.babel

Default value: "https://unpkg.com/@babel/standalone/babel.min.js"

# demo.vue

Default value: "https://unpkg.com/vue@2/dist/vue.min.js"

# demo.react

Default value: "https://unpkg.com/react/umd/react.production.min.js"

# demo.reactDOM

Default value: "https://unpkg.com/react-dom/umd/react-dom.production.min.js"

# presentation

  • Type: PresentationOptions | boolean
  • Default: false

Whether to enable presentation syntax support.

You can set it with an object, the object will be used to config reveal.js.

# presentation.plugins

  • Type: string[]
  • Required: No

Plugins you want to use on reveal.js.

Acceptable values are:

  • "highlight"
  • "math"
  • "search"
  • "notes"
  • "zoom"

# presentation.revealConfig

  • Type: Partial<RevealOptions>
  • Required: No

Config which you want to pass to reveal.js.

# delay

  • Type: number
  • Default: 500

The delay of operating dom, in ms.

Tips

If the theme you are using has a switching animation, it is recommended to configure this option to Switch animation duration + 200.

# locales

  • Type: MarkdownEnhanceLocaleConfig

    interface MarkdownEnhanceLocaleData {
  /**
   * Default Title text for info block
   */
  info: string;

  /**
   * Default Title text for note block
   */
  note: string;

  /**
   * Default Title text for tip block
   */
  tip: string;

  /**
   * Default Title text for warning block
   */
  warning: string;

  /**
   * Default Title text for danger block
   */
  danger: string;

  /**
   * Default Title text for details block
   */
  details: string;
}

interface MarkdownEnhanceLocaleConfig {
  [localePath: string]: MarkdownEnhanceLocaleData;
}
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35

  • Required: No

Locales config for Markdown Enhance Plugin.

Edit this page
Last update: June 4, 2022 13:16
Contributors: Mr.Hope , Mr.Hope