{"id":13417469,"url":"https://github.com/JasKang/vite-plugin-markdown-preview","last_synced_at":"2025-03-15T02:31:26.209Z","repository":{"id":40268409,"uuid":"299846762","full_name":"jaskang/vite-plugin-markdown-preview","owner":"jaskang","description":"在 markdown 中书写 vue demo，支持 vite/vitepress。","archived":false,"fork":false,"pushed_at":"2024-03-28T16:53:35.000Z","size":2365,"stargazers_count":171,"open_issues_count":4,"forks_count":41,"subscribers_count":2,"default_branch":"main","last_synced_at":"2024-10-29T18:05:44.952Z","etag":null,"topics":["demo","markdown","preview","vite","vitepress","vue3"],"latest_commit_sha":null,"homepage":"https://markdown-preview.jaskang.vip","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jaskang.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2020-09-30T07:49:08.000Z","updated_at":"2024-09-24T06:55:27.000Z","dependencies_parsed_at":"2024-01-07T18:05:59.487Z","dependency_job_id":"e8687ae8-21c6-4bbf-9741-d701ae77bdd9","html_url":"https://github.com/jaskang/vite-plugin-markdown-preview","commit_stats":null,"previous_names":["jaskang/vite-plugin-vuedoc","jaskang/vite-plugin-md-preview"],"tags_count":47,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jaskang%2Fvite-plugin-markdown-preview","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jaskang%2Fvite-plugin-markdown-preview/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jaskang%2Fvite-plugin-markdown-preview/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jaskang%2Fvite-plugin-markdown-preview/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jaskang","download_url":"https://codeload.github.com/jaskang/vite-plugin-markdown-preview/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243658061,"owners_count":20326459,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["demo","markdown","preview","vite","vitepress","vue3"],"created_at":"2024-07-30T22:00:37.678Z","updated_at":"2025-03-15T02:31:25.745Z","avatar_url":"https://github.com/jaskang.png","language":"TypeScript","funding_links":[],"categories":["Plugins"],"sub_categories":["Vue"],"readme":"# vite-plugin-markdown-preview\n\n基于 `vite`/`vitepress` 的 markdown 代码块预览插件。\n\n`vite-plugin-markdown-preview` 能将 markdown 文档中带有 `preview` 标识的 vue 代码块替换为 vue 组件。\n\n文档：[https://markdown-preview.jaskang.vip](https://markdown-preview.jaskang.vip)\n\n## 示例\n\n![](https://markdown-preview.jaskang.vip/1.png)\n\n## 安装\n\n安装依赖\n\n```shell\nnpm install vite-plugin-markdown-preview\n# or\npnpm install vite-plugin-markdown-preview\n```\n\n## 在 Vitepress 中使用\n\n在 `.vitepress/config.ts` 中配置插件\n\n```ts\nimport { defineConfig } from 'vitepress'\nimport MarkdownPreview from 'vite-plugin-markdown-preview'\n\nexport default defineConfig({\n  vite: {\n    plugins: [MarkdownPreview()],\n  },\n})\n```\n\n## 在 Vite 中使用\n\n`vite-plugin-markdown-preview` 依赖 [`unplugin-vue-markdown`](https://github.com/mdit-vue/unplugin-vue-markdown) 的 markdown 解析能力, 所以还需要安装 `unplugin-vue-markdown`\n\n```ts\n// vite.config.ts\nimport { defineConfig } from 'vite'\nimport Vue from '@vitejs/plugin-vue'\nimport Markdown from 'unplugin-vue-markdown/vite'\nimport MarkdownPreview from 'vite-plugin-markdown-preview'\n\nconst config = defineConfig({\n  plugins: [\n    Vue({\n      include: [/\\.vue$/, /\\.md$/], // \u003c-- allows Vue to compile Markdown files\n    }),\n    Markdown({\n      /* options */\n    }),\n    MarkdownPreview(),\n  ],\n})\n\nexport default config\n```\n\n## 代码预览标识\n\n给需要预览的 vue 代码块加上 `preview` 标记。\n\n如 `test.md` 文件内容为：\n\n````markdown\n_下方代码块将会被解析为 vue 组件并展示_\n\n```vue preview\n\u003ctemplate\u003e我是 vue 模板\u003c/template\u003e\n```\n````\n\n**经过 `vite-plugin-markdown-preview` 处理后：**\n\n![](https://markdown-preview.jaskang.vip/2.png)\n\n## 自定义预览组件\n\n如果默认的样式不能满足需求，可以全局注册一个 `CodePreview` 组件来代替默认组件。\n\n```ts\napp.component('CodePreview', MyCodePreview)\n```\n\n`CodePreview` 需要按约定支持如下 `props` 和 `slot`\n\n- props\n  - `lang` string 代码块的 lang\n  - `meta` string // 代码块的 meta 信息\n  - `code` string // 代码块的原始代码\n- slot\n  - `default` 代码块生成的 vue 组件将会以 slots.default 传递过来\n  - `code` 代码块经过高亮转换为 html 将会以 slots.code 传递过来\n\n**示例自定义展示组件:**\n\n![](https://markdown-preview.jaskang.vip/3.png)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FJasKang%2Fvite-plugin-markdown-preview","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FJasKang%2Fvite-plugin-markdown-preview","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FJasKang%2Fvite-plugin-markdown-preview/lists"}