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.
type MetaOptions = contentEnum.TITLE |
contentEnum.CREATE_TIME |
contentEnum.DESCRIPTION |
contentEnum.IMAGE |
contentEnum.ATTRIBUTES |
contentEnum.FILE_NAME
The complete result is for display the whole markdown file. For now it's only support HTML.
type 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.
import mdPlugin from 'vite-plugin-easy-markdown'
export default defineConfig({
plugins: [ mdPlugin() ],
})
# my-title
## Install
[<img src="https://lyfxxxx.github.io/syp.github.io/assets/DSCF6605-1.0b4ce2f0.jpg
" width="300">](http://sindresorhus.com/github-markdown-css)
## Usage
Import 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:
import md from 'assets/test.md'
console.log(md.html) // <h1>my-title</h1>\n<h2>Install</h2>\n<p><a href=\"http://sindresorhus.com/github-markdown-css\">...
console.log(md.image) // https://lyfxxxx.github.io/syp.github.io/assets/DSCF6605-1.0b4ce2f0.jpg
console.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.
---
title: titleInFrontmatter
description: desc in front matter
---
# my-title
## Install
[<img src="https://lyfxxxx.github.io/syp.github.io/assets/DSCF6605-1.0b4ce2f0.jpg
" width="300">](http://sindresorhus.com/github-markdown-css)
## Usage
Import 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:
import md from 'assets/test.md'
console.log(md.title) // titleInFrontmatter
console.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.
import mdPlugin, { contentEnum } from 'vite-plugin-easy-markdown'
export default defineConfig({
plugins: [ mdPlugin({
metaOptions: [contentEnum.TITLE]
}) ],
})
The plugin uses markdown-it as its markdown parser, so you also can add markdown-it config.
import mdPlugin, { contentEnum } from 'vite-plugin-easy-markdown'
import hljs from 'highlight.js'
export default defineConfig({
plugins: [ mdPlugin({
metaOptions: [contentEnum.TITLE],
markdownItOptions: {
highlight: (str, lang) => {
if (lang && hljs.getLanguage(lang)) {
try {
return hljs.highlight(str, { language: lang }).value
} catch (e) {
console.log(e)
}
}
return '' // use external default escaping
}
}
}) ],
})
TypeScript Support
For TS project, you need to add below typedefs to your d.ts file.
declare module "*.md" {
const html: string
const attributes: string
const title: string
const description: string
const createTime: string
const fileName: string
const image: string
export default { html, attributes, title, description, createTime, fileName, image };
}
License
MIT
