{"id":17816641,"url":"https://github.com/saurabhdaware/vite-plugin-md-to-html","last_synced_at":"2025-03-18T03:31:01.451Z","repository":{"id":57393134,"uuid":"463509921","full_name":"saurabhdaware/vite-plugin-md-to-html","owner":"saurabhdaware","description":"Vite plugin to convert markdown to HTML with build-time syntax highlighting, image path resolution, and preset configurations","archived":false,"fork":false,"pushed_at":"2022-10-15T19:47:43.000Z","size":1477,"stargazers_count":18,"open_issues_count":1,"forks_count":1,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-02-26T22:04:14.658Z","etag":null,"topics":["markdown-to-html","vite","vite-markdown-to-html","vite-plugin"],"latest_commit_sha":null,"homepage":"https://stackblitz.com/edit/vite-plugin-md-to-html?file=src%2Fmain.js\u0026terminal=dev","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/saurabhdaware.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-02-25T11:37:41.000Z","updated_at":"2024-10-04T17:29:33.000Z","dependencies_parsed_at":"2023-01-20T01:04:44.254Z","dependency_job_id":null,"html_url":"https://github.com/saurabhdaware/vite-plugin-md-to-html","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/saurabhdaware%2Fvite-plugin-md-to-html","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/saurabhdaware%2Fvite-plugin-md-to-html/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/saurabhdaware%2Fvite-plugin-md-to-html/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/saurabhdaware%2Fvite-plugin-md-to-html/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/saurabhdaware","download_url":"https://codeload.github.com/saurabhdaware/vite-plugin-md-to-html/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243901734,"owners_count":20366252,"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":["markdown-to-html","vite","vite-markdown-to-html","vite-plugin"],"created_at":"2024-10-27T16:38:47.879Z","updated_at":"2025-03-18T03:31:01.057Z","avatar_url":"https://github.com/saurabhdaware.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# vite-plugin-md-to-html\n\nVite plugin to convert markdown to html with front-matter extraction, build-time syntax highlighting, and relative image resolutions.\n\nTry it out on [StackBlitz](https://stackblitz.com/edit/vite-plugin-md-to-html?file=src%2Fmain.js\u0026terminal=dev)\n\n---\n**Table of Content**\n- [Installation](#-installation)\n- [Setup and Usage](#-setup-and-usage)\n- [Options](#%EF%B8%8F-options)\n- [Type Declarations](#-type-declaration)\n- [Features](#-features)\n  - [Image Path Resolutions](#--image-path-resolutions)\n  - [Build-Time Syntax Highlighting](#-build-time-syntax-highlighting)\n- [Why New Plugin?](#-why-new-plugin)\n---\n\n## 🐥 Installation\n\n```sh\nnpm install --save-dev vite-plugin-md-to-html\n\n# OR\n\nyarn add vite-plugin-md-to-html -D\n```\n\n## 👷🏻 Setup and Usage\n\n_`vite.config.js`_\n```ts\n// vite.config.js\nimport { defineConfig } from 'vite';\nimport { vitePluginMdToHTML } from 'vite-plugin-md-to-html';\n\nexport default defineConfig({\n  plugins: [vitePluginMdToHTML()]\n})\n```\n\n_`test.md`_\n```md\n---\ntitle: Hello from front-matter\n---\n\n# Markdown File\n```\n\n_`main.js`_\n```ts\n// main.js\nimport testHTML, { attributes } from \"./test.md\";\n\ndocument.title = attributes.title; // Hello from front-matter\ndocument.querySelector(\"#app\").innerHTML = testHTML; // \u003ch1\u003eMarkdown File\u003c/h1\u003e\n```\n\n## ⚙️ Options\n\nOptions type\n```ts\nexport type PluginOptions = {\n  markdownIt?: any; // markdown-it configurations\n  syntaxHighlighting?: boolean; // set true to enable syntax highlighting. default false.\n  resolveImageLinks?: boolean; // set true to resolve relative images in markdown. default false.\n  highlightJs?: {\n    register?: Record\u003cstring, any\u003e; // to register new language to syntax highlighting.\n  };\n};\n```\n\n\n## 💙 Type Declaration\n\nAdd this to your `global.d.ts` to remove TS errors in markdown imports.\n\n```ts\n// global.d.ts\n/// \u003creference types=\"vite-plugin-md-to-html/types\" /\u003e\n```\n\n## ✨ Features\n\n### 🏞  Image Path Resolutions\n\nThe relative paths in markdown will not work by default.\n\nE.g. the following markdown will not render image because vite won't know about `example.png` file.\n\n```markdown\n![Example](./example.png) # Where example.png is in the same directory\n```\n\nYou can enable this using `resolveImageLinks` option.\n\n```ts\nimport { defineConfig } from 'vite';\nimport { vitePluginMdToHTML } from 'vite-plugin-md-to-html';\n\nexport default defineConfig({\n  plugins: [\n    vitePluginMdToHTML({\n      resolveImageLinks: true\n    })\n  ]\n})\n```\n\nThe above code will work as expected after this 🥳\n\n### 🖊 Build-Time Syntax Highlighting!!\n```ts\nimport { defineConfig } from 'vite';\nimport { vitePluginMdToHTML } from 'vite-plugin-md-to-html';\n\nexport default defineConfig({\n  plugins: [\n    vitePluginMdToHTML({\n      syntaxHighlighting: true\n    })\n  ]\n})\n```\n\nThis will not include the CSS of syntax highlighting. You can-\n\nEither import css from `highlight.js` npm package\n```sh\nimport 'highlight.js/styles/github.css';\n```\n\nOr use it from CDN\n```html\n\u003clink rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.4.0/styles/default.min.css\"\u003e\n```\n\nCheck out https://highlightjs.org/usage/ for more details.\n\n## 🤔 Why New Plugin?\n\nThere are other plugins that you can use if you want to convert markdown to framework components.\n- [vite-plugin-md](https://www.npmjs.com/package/vite-plugin-md) for markdown to Vue component\n- [vite-plugin-svelte-md](https://www.npmjs.com/package/vite-plugin-svelte-md) for markdown to Svelte component\n- [vite-plugin-markdown](https://www.npmjs.com/package/vite-plugin-markdown) for markdown to HTML, Vue, React, TOC\\\n  This one in particular also supports turning markdown into HTML. However I was looking for a plugin where I can get markdown-to-html working without specifying any configurations and something that comes with default configs and is built for HTML output specifically.\n\n- [vite-plugin-md2html](https://www.npmjs.com/package/vite-plugin-md2html) for markdown to HTML\\\n  I found about this after building `vite-plugin-md-to-html`. It also supports markdown to HTML. Although, I countinue to maintain `vite-plugin-md-to-html` for features like syntax highlighting based on just boolean, or path resolutions in markdown.\n\n\nI built this to make markdown integration easy with [abell](https://github.com/abelljs/abell). however, the plugin itself is generic and not built for abell.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsaurabhdaware%2Fvite-plugin-md-to-html","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsaurabhdaware%2Fvite-plugin-md-to-html","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsaurabhdaware%2Fvite-plugin-md-to-html/lists"}