Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/kricsleo/unplugin-markdown-2-html
📖 Compile markdown into html at build time.
https://github.com/kricsleo/unplugin-markdown-2-html
Last synced: 24 days ago
JSON representation
📖 Compile markdown into html at build time.
- Host: GitHub
- URL: https://github.com/kricsleo/unplugin-markdown-2-html
- Owner: kricsleo
- License: mit
- Created: 2023-03-04T11:40:26.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-04-29T09:56:22.000Z (6 months ago)
- Last Synced: 2024-08-09T07:11:06.991Z (3 months ago)
- Language: TypeScript
- Homepage:
- Size: 515 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
unplugin-markdown-2-html
✨ Render markdown into HTML at build time.
## Features
- 🪜 Support Vite, Rollup, Webpack, esbuild, and more - powered by [`unplugin`](https://github.com/unjs/unplugin)
- 🚀 0-runtime
- 🎃 Rich and customizable built-in rules for rendering markdown
- Built-in code highlight - powered by [Shiki](https://github.com/shikijs/shiki)
- Built-in support for table-of-contents - tagged with `[TOC]`
- Built-in support for YAML front matter - tagged with `---`
- Built-in support for anchors of heading
## Install
```bash
npm i unplugin-markdown-2-html
```
Vite
```ts
// vite.config.ts
import UnpluginMarkdown2Html from 'unplugin-markdown-2-html/vite'
export default defineConfig({
plugins: [
UnpluginMarkdown2Html({ /* options */ }),
],
})
```
Example: [`playground/`](./playground/)
Rollup
```ts
// rollup.config.js
import UnpluginMarkdown2Html from 'unplugin-markdown-2-html/rollup'
export default {
plugins: [
UnpluginMarkdown2Html({ /* options */ }),
],
}
```
Webpack
```ts
// webpack.config.js
module.exports = {
/* ... */
plugins: [
require('unplugin-markdown-2-html/webpack')({ /* options */ })
]
}
```
Nuxt
```ts
// nuxt.config.js
export default {
buildModules: [
['unplugin-markdown-2-html/nuxt', { /* options */ }],
],
}
```
> This module works for both Nuxt 2 and [Nuxt Vite](https://github.com/nuxt/vite)
Vue CLI
```ts
// vue.config.js
module.exports = {
configureWebpack: {
plugins: [
require('unplugin-markdown-2-html/webpack')({ /* options */ }),
],
},
}
```
esbuild
```ts
// esbuild.config.js
import { build } from 'esbuild'
import UnpluginMarkdown2Html from 'unplugin-markdown-2-html/esbuild'
build({
plugins: [UnpluginMarkdown2Html()],
})
```
## Usage
`hello.md` for example
---
title: Hello Makrdown
likes: 100
---
# h1
```ts
export interface Person {
name: string
}
```
# h2
Paragraph goes here.
✨ Directly import from the markdown file
```ts
import { html, toc, meta, markdown } from './hello.md'
console.log(html, toc, meta, markdown)
/* `html` 👇 */
//
# h1
// export interface Person {
// name: string
// }
//
//
# h2
// Paragraph goes here.
/* `toc` 👇 */
//
/* `meta` 👇 */
// {
// "title": "Hello Makrdown",
// "likes": 100
// }
/* `markdown`(same with raw file content) 👇 */
// ---
// title: Hello Makrdown
// likes: 100
// ---
//
// # h1
//
// ```ts
// export interface Person {
// name: string
// }
// ```
//
// # h2
//
// Paragraph goes here.
```
### Options
| Prop | Type | Required | Default | Description |
|----------|--------|----------|---------|-----------------------------------------------------------------------------------------------------------------------------------|
| markdown | object | ❎ | `{ html: true }` | How markdown is rendered. See [MarkdownItOptions](https://github.com/markdown-it/markdown-it#init-with-presets-and-options) |
| toc | object | ❎ | `{ listType: 'ul' }` | How table-of-contents is rendered. See [TocOptions](https://github.com/nagaozen/markdown-it-toc-done-right#options) |
| anchor | object | ❎ | - | How anchors of heading is rendered. See [AnchorOptions](https://github.com/valeriangalliat/markdown-it-anchor#usage) |
| highlight | object | ❎ | `{ theme: 'vitesse-dark' }` | How code block is highlighted. See [Highlight Code](#highlight-code) |
### Typescript Support
💪🏻 Want ts-hint when importing markdown files? Add `unplugin-markdown-2-html/markdown` to `tsconfig.json` would make world peace :)
```json
{
"compilerOptions": {
"types": [ "unplugin-markdown-2-html/markdown" ],
},
}
```
### Highlight Code
#### Themes for Code Highlighting(Shiki)
Use the built-in themes of Shiki, or **any theme** you like in the VS Code theme market.
- [Built-in themes](https://github.com/shikijs/shiki/blob/main/docs/themes.md): `'css-variables' | 'dark-plus' | 'dracula-soft' | 'dracula' | 'github-dark-dimmed' | 'github-dark' | 'github-light' | 'hc_light' | 'light-plus' | 'material-theme-darker' | 'material-theme-lighter' | 'material-theme-ocean' | 'material-theme-palenight' | 'material-theme' | 'min-dark' | 'min-light' | 'monokai' | 'nord' | 'one-dark-pro' | 'poimandres' | 'rose-pine-dawn' | 'rose-pine-moon' | 'rose-pine' | 'slack-dark' | 'slack-ochin' | 'solarized-dark' | 'solarized-light' | 'vitesse-dark' | 'vitesse-light'`
- Themes from VS Code Market: `..`.
For example: The [Gentle Clean](https://marketplace.visualstudio.com/items?itemName=kricsleo.gentle-clean) theme provides two sets of theme options: `Gentle Clean Vitesse` and `Gentle Clean Monokai`.
So for option `Gentle Clean Vitesse`, the theme configuration would be `kricsleo.gentle-clean.Gentle Clean Vitesse`. For option `Gentle Clean Monokai`, the theme configuration would be `kricsleo.gentle-clean.Gentle Clean Monokai`. Remote themes are downloaded automaticly.
## License
[MIT](./LICENSE) License © 2023 [Kricsleo](https://github.com/kricsleo)