{"id":13595124,"url":"https://github.com/hmsk/vite-plugin-markdown","last_synced_at":"2025-05-15T00:06:48.698Z","repository":{"id":37954394,"uuid":"276309891","full_name":"hmsk/vite-plugin-markdown","owner":"hmsk","description":"A vite plugin to import a Markdown file in various formats like Front Matter, HTML, ToC, and React/Vue Component","archived":false,"fork":false,"pushed_at":"2025-02-03T19:06:28.000Z","size":2397,"stargazers_count":281,"open_issues_count":30,"forks_count":48,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-05-08T00:12:48.866Z","etag":null,"topics":["frontmatter","markdown","markdown-it","react","vite","vue"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/vite-plugin-markdown","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/hmsk.png","metadata":{"files":{"readme":"README.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-07-01T07:37:30.000Z","updated_at":"2025-05-01T13:12:34.000Z","dependencies_parsed_at":"2024-01-09T10:54:07.613Z","dependency_job_id":"12b0af20-d9a5-4090-80b9-eb780476efe2","html_url":"https://github.com/hmsk/vite-plugin-markdown","commit_stats":{"total_commits":273,"total_committers":10,"mean_commits":27.3,"dds":0.4285714285714286,"last_synced_commit":"26e97108120624c8a0f218ea5b15cbde511b108b"},"previous_names":["hmsk/vite-plugin-frontmatter-markdown"],"tags_count":32,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hmsk%2Fvite-plugin-markdown","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hmsk%2Fvite-plugin-markdown/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hmsk%2Fvite-plugin-markdown/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hmsk%2Fvite-plugin-markdown/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hmsk","download_url":"https://codeload.github.com/hmsk/vite-plugin-markdown/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254223068,"owners_count":22034984,"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":["frontmatter","markdown","markdown-it","react","vite","vue"],"created_at":"2024-08-01T16:01:44.382Z","updated_at":"2025-05-15T00:06:48.466Z","avatar_url":"https://github.com/hmsk.png","language":"TypeScript","funding_links":[],"categories":["TypeScript","vue"],"sub_categories":[],"readme":"# vite-plugin-markdown\n\n[![npm](https://img.shields.io/npm/v/vite-plugin-markdown.svg?style=for-the-badge)](https://www.npmjs.com/package/vite-plugin-markdown) [![npm beta channel](https://img.shields.io/npm/v/vite-plugin-markdown/beta?style=for-the-badge\u0026label=beta\u0026color=yellow)](https://www.npmjs.com/package/vite-plugin-markdown/v/beta)\n\n\nA plugin enables you to import a Markdown file as various formats on your [vite](https://github.com/vitejs/vite) project.\n\n## Setup\n\n```\nnpm i -D vite-plugin-markdown\n```\n\n\u003cdetails\u003e\n\u003csummary\u003eFor vite v1\u003c/summary\u003e\n\n```\nnpm i -D vite-plugin-markdown@vite-1\n```\n\u003c/details\u003e\n\n### Config\n\n```js\nimport mdPlugin from 'vite-plugin-markdown'\n\nmodule.exports = {\n  plugins: [mdPlugin(options)]\n}\n```\n\nThen you can import front matter attributes from `.md` file as default.\n\n```md\n---\ntitle: Awesome Title\ndescription: Describe this awesome content\ntags:\n  - \"great\"\n  - \"awesome\"\n  - \"rad\"\n---\n\n# This is awesome\n\nVite is an opinionated web dev build tool that serves your code via native ES Module imports during dev and bundles it with Rollup for production.\n```\n\n```ts\nimport { attributes } from './contents/the-doc.md';\n\nconsole.log(attributes) //=\u003e { title: 'Awesome Title', description: 'Describe this awesome content', tags: ['great', 'awesome', 'rad'] }\n```\n\n### Options\n\n```ts\nmode?: ('html' | 'markdown' | 'toc' | 'react' | 'vue')[]\nmarkdown?: (body: string) =\u003e string\nmarkdownIt?: MarkdownIt | MarkdownIt.Options\n```\n\nEnum for `mode` is provided as `Mode`\n\n```ts\nimport { Mode } from 'vite-plugin-markdown'\n\nconsole.log(Mode.HTML) //=\u003e 'html'\nconsole.log(Mode.MARKDOWN) //=\u003e 'markdown'\nconsole.log(Mode.TOC) //=\u003e 'toc'\nconsole.log(Mode.REACT) //=\u003e 'react'\nconsole.log(Mode.VUE) //=\u003e 'vue'\n```\n\n\"Mode\" enables you to import markdown file in various formats (HTML, ToC, React/Vue Component)\n\n#### `Mode.HTML`\n\n\u003cdetails\u003e\n  \u003csummary\u003eImport compiled HTML\u003c/summary\u003e\n\n```md\n# This is awesome\n\nVite is an opinionated web dev build tool that serves your code via native ES Module imports during dev and bundles it with Rollup for production.\n```\n\n```ts\nimport { html } from './contents/the-doc.md';\n\nconsole.log(html) //=\u003e \"\u003ch1\u003eThis is awesome\u003c/h1\u003e\u003cp\u003eite is an opinionated web dev build tool that serves your code via native ES Module imports during dev and bundles it with Rollup for production.\u003c/p\u003e\"\n```\n\n\u003c/details\u003e\n\n#### `Mode.MARKDOWN`\n\n\u003cdetails\u003e\n  \u003csummary\u003eImport the raw Markdown content\u003c/summary\u003e\n\n```js\nimport { markdown } from './contents/the-doc.md'\n\nconsole.log(markdown) //=\u003e \"# This is awesome \\n Vite is an opinionated web dev build tool that serves your code via native ES Module imports during dev and bundles it with Rollup for production.\"\n```\n\u003c/details\u003e\n\n#### `Mode.TOC`\n\n\u003cdetails\u003e\n  \u003csummary\u003eImport ToC metadata\u003c/summary\u003e\n\n```md\n# vite\n\nVite is an opinionated web dev build tool that serves your code via native ES Module imports during dev and bundles it with Rollup for production.\n\n## Status\n\n## Getting Started\n\n# Notes\n```\n\n```ts\nimport { toc } from './contents/the-doc.md'\n\nconsole.log(toc) //=\u003e [{ level: '1', content: 'vite' }, { level: '2', content: 'Status' }, { level: '2', content: 'Getting Started' }, { level: '1', content: 'Notes' },]\n```\n\n\u003c/details\u003e\n\n#### `Mode.REACT`\n\n\u003cdetails\u003e\n  \u003csummary\u003eImport as a React component\u003c/summary\u003e\n\n```jsx\nimport React from 'react'\nimport { ReactComponent } from './contents/the-doc.md'\n\nfunction MyReactApp() {\n  return (\n    \u003cdiv\u003e\n      \u003cReactComponent /\u003e\n    \u003c/div\u003e\n}\n```\n\n\u003cdetails\u003e\n\u003csummary\u003eCustom Element on a markdown file can be runnable as a React component as well\u003c/summary\u003e\n\n```md\n# This is awesome\n\nVite is \u003cMyComponent type={'react'}\u003e\n```\n\n```jsx\nimport React from 'react'\nimport { ReactComponent } from './contents/the-doc.md'\nimport { MyComponent } from './my-component'\n\nfunction MyReactApp() {\n  return (\n    \u003cdiv\u003e\n      \u003cReactComponent MyComponent={MyComponent} /\u003e\n    \u003c/div\u003e\n}\n```\n\n`MyComponent` on markdown perform as a React component.\n\n\u003c/details\u003e\n\u003c/details\u003e\n\n#### `Mode.VUE`\n\n\u003cdetails\u003e\n  \u003csummary\u003eImport as a Vue component\u003c/summary\u003e\n\n```vue\n\u003ctemplate\u003e\n  \u003carticle\u003e\n    \u003cmarkdown-content /\u003e\n  \u003c/article\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nimport { VueComponent } from './contents/the-doc.md'\n\nexport default {\n  components: {\n    MarkdownContent: VueComponent\n  }\n};\n\u003c/script\u003e\n```\n\n\u003cdetails\u003e\n\u003csummary\u003eCustom Element on a markdown file can be runnable as a Vue component as well\u003c/summary\u003e\n\n```md\n# This is awesome\n\nVite is \u003cMyComponent :type=\"'vue'\"\u003e\n```\n\n```vue\n\u003ctemplate\u003e\n  \u003carticle\u003e\n    \u003cmarkdown-content /\u003e\n  \u003c/article\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nimport { VueComponentWith } from './contents/the-doc.md'\nimport MyComponent from './my-component.vue'\n\nexport default {\n  components: {\n    MarkdownContent: VueComponentWith({ MyComponent })\n  }\n};\n\u003c/script\u003e\n```\n\n`MyComponent` on markdown perform as a Vue component.\n\n\u003c/details\u003e\n\u003c/details\u003e\n\n\n### Type declarations\n\nIn TypeScript project, need to declare typedefs for `.md` file as you need.\n\n```ts\ndeclare module '*.md' {\n  // \"unknown\" would be more detailed depends on how you structure frontmatter\n  const attributes: Record\u003cstring, unknown\u003e; \n\n  // When \"Mode.TOC\" is requested\n  const toc: { level: string, content: string }[];\n\n  // When \"Mode.HTML\" is requested\n  const html: string;\n\n  // When \"Mode.RAW\" is requested\n  const raw: string\n\n  // When \"Mode.React\" is requested. VFC could take a generic like React.VFC\u003c{ MyComponent: TypeOfMyComponent }\u003e\n  import React from 'react'\n  const ReactComponent: React.VFC;\n  \n  // When \"Mode.Vue\" is requested\n  import { ComponentOptions, Component } from 'vue';\n  const VueComponent: ComponentOptions;\n  const VueComponentWith: (components: Record\u003cstring, Component\u003e) =\u003e ComponentOptions;\n\n  // Modify below per your usage\n  export { attributes, toc, html, ReactComponent, VueComponent, VueComponentWith };\n}\n```\n\nSave as `vite.d.ts` for instance.\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhmsk%2Fvite-plugin-markdown","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhmsk%2Fvite-plugin-markdown","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhmsk%2Fvite-plugin-markdown/lists"}