{"id":13715172,"url":"https://github.com/wxsms/vue-md-loader","last_synced_at":"2025-04-05T23:07:49.425Z","repository":{"id":40434639,"uuid":"107947341","full_name":"wxsms/vue-md-loader","owner":"wxsms","description":":sparkles: Markdown files to ALIVE Vue components.","archived":false,"fork":false,"pushed_at":"2024-01-10T21:58:55.000Z","size":2855,"stargazers_count":120,"open_issues_count":5,"forks_count":56,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-29T22:07:14.316Z","etag":null,"topics":["document","markdown","vue","webpack","webpack-loader"],"latest_commit_sha":null,"homepage":"https://vue-md-loader.wxsm.space","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/wxsms.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","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},"funding":{"github":null,"patreon":null,"open_collective":null,"ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"custom":["https://www.paypal.com/paypalme/wxsm"]}},"created_at":"2017-10-23T07:34:40.000Z","updated_at":"2025-03-19T10:22:03.000Z","dependencies_parsed_at":"2024-02-09T13:08:42.888Z","dependency_job_id":"7d2a4f5b-2fbb-4548-83b4-2c58b7cce19c","html_url":"https://github.com/wxsms/vue-md-loader","commit_stats":{"total_commits":487,"total_committers":7,"mean_commits":69.57142857142857,"dds":0.6119096509240247,"last_synced_commit":"ae2c31bb0317e34bee645db8616f8bb72af62340"},"previous_names":[],"tags_count":26,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wxsms%2Fvue-md-loader","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wxsms%2Fvue-md-loader/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wxsms%2Fvue-md-loader/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wxsms%2Fvue-md-loader/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/wxsms","download_url":"https://codeload.github.com/wxsms/vue-md-loader/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247411234,"owners_count":20934653,"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":["document","markdown","vue","webpack","webpack-loader"],"created_at":"2024-08-03T00:00:55.250Z","updated_at":"2025-04-05T23:07:49.405Z","avatar_url":"https://github.com/wxsms.png","language":"JavaScript","funding_links":["https://www.paypal.com/paypalme/wxsm"],"categories":["JavaScript","叫研发工具组","Components \u0026 Libraries","Dev Tools [🔝](#readme)","Dev Tools"],"sub_categories":["文档","Dev Tools","Docs"],"readme":"# vue-md-loader\n\n![CI](https://github.com/wxsms/vue-md-loader/workflows/CI/badge.svg)\n[![NPM Downloads](https://img.shields.io/npm/dm/vue-md-loader.svg)](https://www.npmjs.com/package/vue-md-loader)\n[![NPM Version](https://img.shields.io/npm/v/vue-md-loader.svg)](https://www.npmjs.com/package/vue-md-loader)\n[![License](https://img.shields.io/github/license/wxsms/vue-md-loader.svg)](https://github.com/wxsms/vue-md-loader)\n\n| loader version | webpack version |\n|-------------   |----------------    |\n| 2.x            | 5                  |\n| 1.x            | 4 and lower        |\n\n## Introduction\n\nWebpack loader for converting Markdown files to ALIVE Vue components.\n\n* Configurable **[Markdown-It](https://github.com/markdown-it/markdown-it)** parser.\n* Built-in **syntax highlighter** with **[highlightjs](https://highlightjs.org/)**.\n* ✨**Live demo**✨ support. Extremely useful for document examples.\n* Vue 3 \u0026 vue-cli usage support.\n* Hot reload.\n\n## Example\n\nThis page ([vue-md-loader.wxsm.space](https://vue-md-loader.wxsm.space)) is generated by a markdown file. Source: [/example](https://github.com/wxsms/vue-md-loader/tree/master/example).\n\nThere is also a Vue 3 \u0026 Vue-cli example: [/example-vue3](https://github.com/wxsms/vue-md-loader/tree/master/example-vue3).\n\n## Install\n\nNPM:\n\n```bash\nnpm install vue-md-loader --save-dev\n```\n\nYarn:\n\n```bash\nyarn add vue-md-loader --dev\n```\n\n## Usage\n\n### Basic\n\nSimply **use `vue-md-loader`** to load `.md` files and **chain it with your `vue-loader`**.\n\n```javascript\nmodule.exports = {\n  // ...\n  module: {\n    rules: [\n      // ...\n      {\n        test: /\\.md$/,\n        loader: 'vue-loader!vue-md-loader'\n      }\n    ]\n  }\n}\n```\n\nNote that to get code highlighting to work, you need to:\n\n* include one of the highlight.js css files into your project, for example: `highlight.js/styles/github-gist.css`.\n* specify a lang in code block. ref: [creating and highlighting code blocks](https://help.github.com/articles/creating-and-highlighting-code-blocks/).\n\n### With Options\n\n```javascript\nmodule.exports = {\n  // ...\n  module: {\n    rules: [\n      // ...\n      {\n        test: /\\.md$/,\n        loaders: [\n          'vue-loader',\n          {\n            loader: 'vue-md-loader',\n            options: {\n              // your preferred options\n            }\n          }\n        ]\n      }\n    ]\n  }\n}\n```\n\n## ✨ Markdown Alive!\n\nA live demo is:\n\n```html\n\u003ctemplate\u003e\n  \u003cdiv class=\"cls\"\u003e{{msg}}\u003c/div\u003e\n\u003c/template\u003e\n\u003cscript\u003e\n  export default {\n    data () {\n      return {\n        msg: 'Hello world!'\n      }\n    }\n  }\n\u003c/script\u003e\n\u003cstyle\u003e\n  .cls {\n    color: red;\n    background: green;\n  }\n\u003c/style\u003e\n\u003c!-- some-live-demo.vue --\u003e\n```\n\nbecomes something like:\n\n```html\n\u003csome-live-demo/\u003e\n\u003cpre\u003e\u003ccode\u003e...\u003c/code\u003e\u003c/pre\u003e\n```\n\nA **Vue component** with all it's `\u003ctemplate\u003e`, `\u003cscript\u003e` and `\u003cstyle\u003e` settled will be **inserted before it's source code block**.\n\nMultiple lives inside a single markdown file is supported by:\n\n* All `\u003cscript\u003e` from different code blocks:\n  * code **inside** `export default` will be extract into it's own Vue component with no conflicts.\n  * code **before** `export default` will be extract into the same top-level component.\n* All `\u003cstyle\u003e` from different code blocks will be extract into the same top-level component.\n\n**Note:** \n\n* Loader will treat the entire block as template if no `\u003ctemplate\u003e` found in live block.\n* You will need runtime + compiler build of Vue.js for this feature. For example:\n\n```javascript\nmodule.exports = {\n  // ...\n  resolve: {\n    alias: {\n      'vue$': 'vue/dist/vue.esm.js' // 'vue/dist/vue.common.js' for webpack 1\n    }\n  }\n}\n```\n\n## Options\n\n### wrapper\n\nString. Default: `section`\n\nThe wrapper of entire markdown content, can be HTML tag name or Vue component name.\n\n### markdown\n\nObject.\n\nMarkdown-It options. Default:\n\n```javascript\n{\n  html: true,\n  highlight: function (str, lang) {\n    if (lang \u0026\u0026 hljs.getLanguage(lang)) {\n      try {\n        return hljs.highlight(str, { language: lang }).value\n      } catch (__) {}\n    }\n    return ''\n  }\n}\n```\n\n### plugins\n\nArray.\n\nMarkdown-It plugins list. For example:\n\n```javascript\n// ...\nplugins: [\n  // Without option\n  require('markdown-it-plugin-1'),\n  // With options\n  [\n    require('markdown-it-plugin-2'),\n    {\n      // ...\n    }\n  ]\n]\n// ...\n```\n\n### rules\n\nObject.\n\nMarkdown-It renderer rules. For example:\n\n```javascript\nrules: {\n  'table_open': () =\u003e '\u003cdiv class=\"table-responsive\"\u003e\u003ctable class=\"table\"\u003e',\n  'table_close': () =\u003e '\u003c/table\u003e\u003c/div\u003e'\n}\n```\n\n### preProcess\n\nFunction. For example:\n\n```javascript\npreProcess: function(source) {\n  // do anything\n  return source\n}\n```\n\n### process\n\nFunction. For example:\n\n```javascript\n// This is useful when used with front-matter-loader to set the page title in nuxt projects\nprocess: function(source){\n  let attrs = (source \u0026\u0026 source.attributes) || {}\n  attrs.title = attrs.title || \"\"\n  return {\n    template: source.body,\n    style: \"\",\n    script: `export default {\n      head(){\n        return {\n          title: '${attrs.title}'\n        }\n      }\n    }`\n  }\n}\n```\n\n### afterProcess\n\nFunction. For example:\n\n```javascript\nafterProcess: function(result) {\n  // do anything\n  return result\n}\n```\n\n### live\n\nBoolean. Default: `true`\n\nEnable / Disable live detecting and assembling.\n\n### livePattern\n\nRegex. Default: `/\u003c!--[\\s]*?([-\\w]+?).vue[\\s]*?--\u003e/i`\n\nA code block with `livePattern` inside itself becomes a live block. The matched body will become the live Vue component's name and reference (note that they must be unique to each other within the same page).\n\n### afterProcessLiveTemplate\n\nFunction. Default: `null`\n\nUse this if you wish to change the live template manually after process (e.g. add wrappers). For example:\n\n```javascript\nafterProcessLiveTemplate: function(template) {\n  return `\u003cdiv class=\"live-wrapper\"\u003e${template}\u003c/div\u003e`\n}\n```\n\n## Build Setup\n\n```bash\n# install dependencies\nnpm install\n\n# serve example with hot reload at localhost:8888\nnpm run dev\n\n# run all tests\nnpm test\n```\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwxsms%2Fvue-md-loader","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwxsms%2Fvue-md-loader","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwxsms%2Fvue-md-loader/lists"}