VitePress添加pdf

VitePress 配置中添加 PDF 显示的功能。主要需要在 markdown 配置中添加相关设置。

以下是需要修改的代码部分：

// ... existing code ...
import { defineConfig, type DefaultTheme } from 'vitepress'
import {nav,head,markdown,sidebar} from "./configs"
import container from 'markdown-it-container' // 添加这行导入

export default defineConfig({
  markdown: {
    ...markdown,
    config: (md) => {
      // 使用 ESM 导入的 container
      md.use(container, 'pdf', {
        validate: function(params) {
          return params.trim().match(/^pdf\s+(.*)$/);
        },
        render: function(tokens, idx) {
          if (tokens[idx].nesting === 1) {
            const m = tokens[idx].info.trim().match(/^pdf\s+(.*)$/);
            return `<iframe 
              src="${m[1]}"
              width="100%"
              height="600px"
              style="border: none;"
            >`;
          }
          return '</iframe>';
        }
      });
    }
  },
  // ... existing code ...
})

要使用这个功能，您需要：

首先安装必要的依赖

npm install markdown-it-container --save-dev

Markdown 文件中使用

::: pdf /path/to/your.pd

主要更改说明

• 在 markdown 配置中添加了自定义容器支持
• 创建了一个名为 'pdf' 的自定义容器
• 使用 iframe 来嵌入显示 PDF 文件