vite-plugin-easy-markdown

A vite project plugin to import Markdown file and automaticlly get its abbreviated info for list display.

Setup

npm i -D vite-plugin-easy-markdown

Config Options

I divide transform results into two categories: meta result and complete result. The previous one is for list display, such as title, description, createTime, etc.

1type MetaOptions = contentEnum.TITLE | 
2  contentEnum.CREATE_TIME | 
3  contentEnum.DESCRIPTION | 
4  contentEnum.IMAGE | 
5  contentEnum.ATTRIBUTES |
6  contentEnum.FILE_NAME

The complete result is for display the whole markdown file. For now it's only support HTML.

1type OutputOptions = contentEnum.HTML

Usage

There is an example you could refer in /example fold.

The most simple way is using its default config by not config anything. It will provide everything which is mentioned in Config Options chapter.

1import mdPlugin from 'vite-plugin-easy-markdown'
2
3export default defineConfig({
4  plugins: [ mdPlugin() ],
5})

1# my-title
2
3## Install
4
5[<img src="https://lyfxxxx.github.io/syp.github.io/assets/DSCF6605-1.0b4ce2f0.jpg
6" width="300">](http://sindresorhus.com/github-markdown-css)
7
8
9## Usage
10
11Import the `github-markdown.css` file and add a `markdown-body` class to the container of your rendered Markdown and set a width for it. GitHub uses `980px` width and `45px` padding, and `15px` padding for mobile.

you will get:

1import md from 'assets/test.md'
2
3console.log(md.html) // <h1>my-title</h1>\n<h2>Install</h2>\n<p><a href=\"http://sindresorhus.com/github-markdown-css\">...
4console.log(md.image) // https://lyfxxxx.github.io/syp.github.io/assets/DSCF6605-1.0b4ce2f0.jpg
5console.log(md.description) //   Import the github-markdown.css file and add a markdown-body class to the container of your rendered...

Plugin will automaticlly get those infos by given logic，but you can assign them in front matter，it has higher priorities.

1---
2title: titleInFrontmatter
3description: desc in front matter
4---
5
6# my-title
7
8## Install

9
10[<img src="https://lyfxxxx.github.io/syp.github.io/assets/DSCF6605-1.0b4ce2f0.jpg
11" width="300">](http://sindresorhus.com/github-markdown-css)
12
13
14## Usage
15
16Import the `github-markdown.css` file and add a `markdown-body` class to the container of your rendered Markdown and set a width for it. GitHub uses `980px` width and `45px` padding, and `15px` padding for mobile.

you will get:

1import md from 'assets/test.md'
2
3console.log(md.title) // titleInFrontmatter
4console.log(md.description) //   desc in front matter

Except display the whole meta info, Of course you could customise your output. For example, we may don't need anything but title.

1import mdPlugin, { contentEnum } from 'vite-plugin-easy-markdown'
2
3export default defineConfig({
4  plugins: [ mdPlugin({
5    metaOptions: [contentEnum.TITLE]
6  }) ],
7})

The plugin uses markdown-it as its markdown parser, so you also can add markdown-it config.

1import mdPlugin, { contentEnum } from 'vite-plugin-easy-markdown'
2import hljs from 'highlight.js'
3
4export default defineConfig({
5  plugins: [ mdPlugin({
6    metaOptions: [contentEnum.TITLE],
7    markdownItOptions: {
8      highlight: (str, lang) => {
9        if (lang && hljs.getLanguage(lang)) {
10          try {
11            return hljs.highlight(str, { language: lang }).value
12          } catch (e) {
13            console.log(e)
14          }
15        }
16        return '' // use external default escaping
17      }
18    }
19  }) ],
20})

TypeScript Support

For TS project, you need to add below typedefs to your d.ts file.

1declare module "*.md" {
2  const html: string
3  const attributes: string
4  const title: string
5  const description: string
6  const createTime: string
7  const fileName: string
8  const image: string
9  export default { html, attributes, title, description, createTime, fileName, image };
10}

License

MIT