{"id":18749207,"url":"https://github.com/mengdu/vue-dotmd-loader","last_synced_at":"2025-04-12T23:31:18.286Z","repository":{"id":35207004,"uuid":"215211177","full_name":"mengdu/vue-dotmd-loader","owner":"mengdu","description":"A webpack loader for markdown file transform to vue file.","archived":false,"fork":false,"pushed_at":"2022-12-11T09:27:22.000Z","size":991,"stargazers_count":10,"open_issues_count":25,"forks_count":5,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-10T13:34:55.679Z","etag":null,"topics":["vue-dotmd-loader","vue-markdown-laoder","webpack-loader"],"latest_commit_sha":null,"homepage":"https://mengdu.github.io/vue-dotmd-loader/index.html","language":"JavaScript","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/mengdu.png","metadata":{"files":{"readme":"README-zh.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-10-15T05:06:06.000Z","updated_at":"2022-05-18T06:55:22.000Z","dependencies_parsed_at":"2023-01-15T16:15:56.175Z","dependency_job_id":null,"html_url":"https://github.com/mengdu/vue-dotmd-loader","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mengdu%2Fvue-dotmd-loader","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mengdu%2Fvue-dotmd-loader/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mengdu%2Fvue-dotmd-loader/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mengdu%2Fvue-dotmd-loader/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mengdu","download_url":"https://codeload.github.com/mengdu/vue-dotmd-loader/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248647257,"owners_count":21139081,"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":["vue-dotmd-loader","vue-markdown-laoder","webpack-loader"],"created_at":"2024-11-07T17:06:43.660Z","updated_at":"2025-04-12T23:31:17.950Z","avatar_url":"https://github.com/mengdu.png","language":"JavaScript","funding_links":[],"categories":["Components \u0026 Libraries","Dev Tools [🔝](#readme)"],"sub_categories":["Dev Tools"],"readme":"# vue-dotmd-loader\n\n用于把 `markdown` 文件转成 `Vue` 组件的 `webpack` `laoder` 工具包。\n\n[English](./README.md)\n\n**特性**：\n\n+ [x] 支持导入 Vue 文件组件渲染成 Vue 组件实例\n+ [x] 代码块支持高亮指定行\n+ [x] md里支持编写 Vue 代码和定义 `script` 渲染到当前组件\n+ [x] 支持定义当前组件 style 样式\n+ [x] md 添加 totolist 支持\n+ [x] 支持代码块渲染组件（需要 Vue 的 `esm` 版本）\n+ [x] 支持导入文件代码（渲染成代码高亮）\n+ [x] 支持导入源码（比如导入html片段，注意：不会经过markdown编译）\n\n详细用法：[Docs](https://mengdu.github.io/vue-dotmd-loader/index.html)\n\n## Usage\n\n**安装**\n\n```ls\nnpm install -D vue-dotmd-loader\n```\n\n**webpack配置**\n\n```js\n{\n  rules: [\n    {\n      test: /\\.md$/,\n      use: [\n        'vue-loader', // vue-dotmd-loader =\u003e vue-loader 必须的\n        {\n          loader: 'vue-dotmd-loader',\n          options: options\n        }\n      ]\n    }\n  ]\n}\n```\n\n**options**：\n\n```js\n{\n  wrapperName: 'DemoBlock', // 定义 demo 包裹组件（请全局注册好组件），如果空则仅渲染 demo\n  fileDemoNamePerfix: 'FileDemo', // 文件 demo 组件名前缀\n  blockDemoNamePerfix: 'BlockCodeDemo',// 代码块 demo 组件名前缀\n  fileDemoTag: 'demo:vue', // 文件 demo 标记；格式：[demo:vue](filePath)\n  blockDemoTag: 'demo:vue',// 代码块 demo 标记；格式：````html demo:vue code ````\n  includeCodeTag: 'include:code', // 导入code，渲染成代码；格式：[include:code](filePath)\n  includeRawTag: 'include:raw', // 导入html片段；格式：[include:code](filePath)\n  dest: false, // 输出结果到文件；true/false/function\n  dest (code, contextPath, resourcePath) {}, // 自定义写文件\n  markdown: { // markdown-it options see: https://github.com/markdown-it/markdown-it#init-with-presets-and-options\n    options: {\n      html: false\n    },\n    notWrapper: false,\n    init (md) {\n      md.use(otherPlugin) // 添加 markdown-it 插件\n    }\n  }\n}\n```\n\n**eslint ignore**\n\n```json\n{\n  \"eslintIgnore\": [\n    \"**/*.md\"\n  ]\n}\n```\n\n如果你需要与本页面一样的样式，请按照如下引用 css。\n\n```js\nimport 'github-markdown-css/github-markdown.css'\nimport 'highlight.js/styles/color-brewer.css'\nimport 'vue-dotmd-loader/src/docs.css'\n```\n\n## Vue CLI\n\n如果你使用 Vue cli 初始化的项目，请按照如下配置。\n\n```js\n{\n  // ...\n  configureWebpack: {\n    resolve: {\n      extensions: ['.md'],\n    }\n  },\n  chainWebpack (config) {\n    // see: https://github.com/neutrinojs/webpack-chain\n    config.module\n      .rule('dotmd')\n      .test(/\\.md$/)\n      .use('vue-loader')\n      .loader('vue-loader')\n      .options({\n        ...(config.module.rules.get('vue').uses.get('vue-loader').get('options') || null) // 与 vue-loader 配置保持一致\n      })\n      .end()\n      .use('vue-dotmd-loader')\n      .loader('vue-dotmd-loader')\n      .options({\n        dest: true,\n        markdown: {\n          options: {\n            html: true\n          }\n        }\n      })\n      .end()\n  }\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmengdu%2Fvue-dotmd-loader","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmengdu%2Fvue-dotmd-loader","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmengdu%2Fvue-dotmd-loader/lists"}