Vue CLI Plugin Markdown Loader

这是一款基于 Vue Cli 4 的插件，它让你可以直接将 markdown 当做 Vue 的组件来使用。 vue-cli-plugin-markdown-loader 基于 markdown-it 实现，并且内置了 markdown-it-emoji 和 markdown-it-container 插件。样式上集成了 github-markdown-css 的语法样式以及 highlight.js 的代码风格样式。

快速安装

vue add markdown-loader

基本使用

< template >
    Markdown <
    /template>

    <
    script >
    import Markdown from "@/assets/markdown.md";

export default {
    components: {
        Markdown
    }
}; <
/script>

代码块样式

必选样式 github-markdown-css

// Vue的入口main.js
import 'github-markdown-css'

因为markdown的基本样式都依靠 github-markdown-css 渲染，所以这是必须引入的样式

可选样式 highlight.js代码风格

// Vue的入口main.js
import 'highlight.js/styles/atom-one-dark.css'
// 注意：如果使用了highlight.js的atom-one-dark代码风格，请引入下方的atom-one-dark.fixed.css,修复因为与github-markdown-css样式冲突带来的问题。
import 'vue-cli-plugin-markdown-loader/atom-one-dark.fixed.css'

配置

// vue.config.js

module.exports = {
    pluginOptions: {
        'markdown-loader': {
            // 渲染的组件的根节点标签
            wrapperTag: 'div',
            // 渲染的组件的根节点class
            wrapperClassName: 'markdown-body',
            // 是否使用缓存，默认为true
            useCache: false,
            // 块设置
            container: {
                // demo块
                demo: {
                    // 块名字
                    spoiler: 'demo',
                    // 渲染的标签名
                    tag: 'demo-box'
                },
                // 自定义的块
                customBlocks: [
					{
                        spoiler: 'tip',
                        tag: 'div'
                    },
                    {
                        spoiler: 'success',
                        tag: 'div'
                    },
                    {
                        spoiler: 'warning',
                        tag: 'div'
                    },
                    {
                        spoiler: 'error',
                        tag: 'div'
                    }
                ]
            }
        }
    }
}

注意

如果你在 md 文件中使用了<script>标签，并且开启了Eslint，需要在项目根目录配置.eslintignore文件来忽略Eslint对md文件的检查。

下面是.eslintignore文件的配置：

**/*.md

示例

VueTabRouter 官方文档基于 vue-cli-plugin-markdown-loader 实现，可以参考该文档 markdown 样式。

引用

markdown-it

markdown-it-container

markdown-it-emoji

github-markdown-css

highlight.js