Markdown 代码配置

以下选项在 Markdown 中添加了新的代码功能，可以在主题选项的 markdown 属性下进行设置。

选项

markdown.codeTabsboolean

是否启用选项卡支持。

参考：Markdown → 代码选项卡 与 @vuepress/plugin-markdown-tab → codeTabs。

markdown.fileTreeboolean

是否启用文件树支持。

参考：Markdown → 文件树 与 @vuepress/plugin-markdown-file-tree → fileTree。

markdown.codeTreeboolean | MarkdownCodeTreePluginOptions

是否启用代码树支持。你也可以传入对象以自定义默认高度。

参考：Markdown → 代码树 与 @vuepress/plugin-markdown-file-tree → codeTree。

markdown.codeTree.heightnumber | string

默认值"320px"

代码树的默认高度，接受 CSS 长度或像素数值。

markdown.previewboolean

是否启用预览支持。

参考：Markdown → 预览 与 @vuepress/plugin-markdown-preview。

markdown.playgroundPlaygroundGlobalOptions

交互演示选项。

参考：Markdown → 交互演示。

markdown.playground.presets必填(BuiltInPlaygroundPreset | PlaygroundOptions)[]

交互演示预设。BuiltInPlaygroundPreset 是 "ts"、"vue" 与 "unocss" 之一，用于启用内置预设，而对象则用于配置自定义交互演示。

markdown.playground.presets[*].name必填string

交互演示容器名。

markdown.playground.presets[*].componentstring

默认值"Playground"

交互演示组件名称。

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

属性获取器。其 data 参数类型如下：

interface PlaygroundCodeConfig {
  /**
   * 代码块扩展名
   *
   * @description 它基于文件名，而不是代码块语言
   */
  ext: string;

  /** 代码块内容 */
  content: string;
}

interface PlaygroundData {
  /** 交互演示标题 */
  title?: string;

  /**
   * Import map 文件名
   *
   * @default "import-map.json"
   */
  importMap?: string;

  /** 交互演示文件信息 */
  files: Record<
    /** 文件名 */
    string,
    /** 文件详情 */
    PlaygroundCodeConfig
  >;

  /**
   * 交互演示设置
   *
   * @description 它是设置指令后的 json 内容的解析结果
   */
  settings: Record<string, unknown>;

  /**
   * hash key based on playground content
   *
   * 根据交互演示内容生成的 hash key
   */
  key: string;
}

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

内置预设的交互演示配置。

markdown.playground.config.tsTSPresetPlaygroundOptions

ts 预设的选项。

markdown.playground.config.ts.servicestring

默认值"https://www.typescriptlang.org/play"

交互演示外部地址。

markdown.playground.config.vueVuePresetPlaygroundOptions

vue 预设的选项。

markdown.playground.config.vue.servicestring

默认值"https://sfc.vuejs.org/"

交互演示外部地址。

markdown.playground.config.vue.devboolean

是否启用开发版本。

markdown.playground.config.vue.ssrboolean

是否启用 SSR。

markdown.playground.config.unocssUnoPresetPlaygroundOptions

unocss 预设的选项。

markdown.playground.config.unocss.servicestring

默认值"https://unocss.dev/play"

交互演示外部地址。

markdown.kotlinPlaygroundboolean

是否启用 Kotlin 交互演示支持。

参考：Markdown → Kotlin 交互演示。

markdown.vuePlaygroundboolean

是否启用 Vue 交互演示支持。

参考：Markdown → Vue 交互演示。

markdown.sandpackboolean

是否启用 Sandpack 交互演示支持。

参考：Markdown → Sandpack 交互演示。

markdown.demoPartial<CodeDemoOptions> | boolean

是否启用代码演示支持。

参考：Markdown → 代码演示。

markdown.demo.jsLibstring[]

CodePen, JsFiddle 需要引入的外部 JS 库。

markdown.demo.cssLibstring[]

CodePen, JsFiddle 需要引入的外部 CSS 库。

注意

上述两个选项仅仅是给第三方代码演示使用的，你需要自行在 head 中导入这些库。

markdown.demo.jsfiddleboolean

默认值true

是否显示 JSFiddle 按钮。

markdown.demo.codepenboolean

默认值true

是否显示 CodePen 按钮。

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

默认值"left"

CodePen 编辑器布局。

markdown.demo.codepenEditorsstring

默认值"101"

CodePen 编辑器状态。