Markdown Code Config

The following options adds new code feature in Markdown, and can be set under markdown property in theme options.

Options

markdown.codeTabsboolean

Whether to enable tabs support.

See also: Markdown → Code Tabs and @vuepress/plugin-markdown-tab → codeTabs.

markdown.fileTreeboolean

Whether to enable file tree support.

See also: Markdown → File Tree and @vuepress/plugin-markdown-file-tree → fileTree.

markdown.codeTreeboolean | MarkdownCodeTreePluginOptions

Whether to enable code tree support. You can also pass an object to customize the default height.

See also: Markdown → Code Tree and @vuepress/plugin-markdown-file-tree → codeTree.

markdown.codeTree.heightnumber | string

Default"320px"

The default height of the code tree, accepts a CSS length or a number in pixels.

markdown.previewboolean

Whether to enable preview support.

See also: Markdown → Preview and @vuepress/plugin-markdown-preview.

markdown.playgroundPlaygroundGlobalOptions

Playground options.

See also: Markdown → Playground.

markdown.playground.presetsRequired(BuiltInPlaygroundPreset | PlaygroundOptions)[]

Playground presets. BuiltInPlaygroundPreset is one of "ts", "vue" and "unocss", which enables a built-in preset, while an object configures a custom playground.

markdown.playground.presets[*].nameRequiredstring

Playground container name.

markdown.playground.presets[*].componentstring

Default"Playground"

Playground component name.

markdown.playground.presets[*].propsGetterRequired(data: PlaygroundData) => Record<string, string>

Props getter. Its data argument has the following types:

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;
}

markdown.playground.config{ ts?: TSPresetPlaygroundOptions; vue?: VuePresetPlaygroundOptions; unocss?: UnoPresetPlaygroundOptions }

Playground config of the built-in presets.

markdown.playground.config.tsTSPresetPlaygroundOptions

Options of the ts preset.

markdown.playground.config.ts.servicestring

Default"https://www.typescriptlang.org/play"

External playground service url.

markdown.playground.config.vueVuePresetPlaygroundOptions

Options of the vue preset.

markdown.playground.config.vue.servicestring

Default"https://sfc.vuejs.org/"

External playground service url.

markdown.playground.config.vue.devboolean

Whether to use the development version.

markdown.playground.config.vue.ssrboolean

Whether to enable SSR.

markdown.playground.config.unocssUnoPresetPlaygroundOptions

Options of the unocss preset.

markdown.playground.config.unocss.servicestring

Default"https://unocss.dev/play"

External playground service url.

markdown.kotlinPlaygroundboolean

Whether to enable Kotlin playground support.

See also: Markdown → Kotlin Playground.

markdown.vuePlaygroundboolean

Whether to enable Vue playground support.

See also: Markdown → Vue Playground.

markdown.sandpackboolean

Whether to enable sandpack playground support.

See also: Markdown → Sandpack Playground.

markdown.demoPartial<CodeDemoOptions> | boolean

Whether to enable code demo support.

See also: Markdown → Code Demo.

markdown.demo.jsLibstring[]

External JS libraries for CodePen, JsFiddle only.

markdown.demo.cssLibstring[]

External CSS libraries for CodePen, JsFiddle only.

Warning

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

markdown.demo.jsfiddleboolean

Defaulttrue

Whether to display the JSFiddle button.

markdown.demo.codepenboolean

Defaulttrue

Whether to display the CodePen button.

markdown.demo.codepenLayout"top" | "left" | "right"

Default"left"

CodePen editor layout.

markdown.demo.codepenEditorsstring

Default"101"

CodePen editor status.