MD文件转换html的方法（loader的应用）

最新推荐文章于 2025-04-03 19:57:53 发布

qq_37523156

最新推荐文章于 2025-04-03 19:57:53 发布

阅读量434

点赞数

文章标签： vue less js npm

本文链接：https://blog.youkuaiyun.com/qq_37523156/article/details/111561359

版权

本文介绍了如何利用vue-markdown-loader将MD文件转换为HTML，详细讲解了安装插件、修改webpack配置和解决代码高亮问题的步骤。在CLI 2.0+ 和 3.0+ 的环境中，通过npm安装并配置vue-markdown-loader，然后在vue.config.js或webpack.base.conf.js中调整设置。在遇到代码不显示高亮的问题时，可以通过引入cdn或下载highlight.js的css来解决。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

MD文件转换html的方法（loader的应用）

来源：小白时间：2020年12月22日11:52:32

采用vue-markdown-loader

提供脚手架CLI/2.+，以及CLI/3.+的方式

难度：简单

1.安装插件vue-markdown-loader

npm install vue-markdown-loader -D

安装npm包vue-markdown-loader -D （-D就是–save-dev）会存在package.json的devDependencies这个里面

2.修改配置webpack

(vue/cli3)脚手架的vue.config.js 如果未存在可以新建


module.exports = {
    chainWebpack:config =>{
        config.module.rule('md')
            .test(/\.md/)
            .use('vue-loader')
            .loader("vue-loader")
            .end()
            .use('vue-markdown-loader')
            .loader('vue-markdown-loader/lib/markdown-compiler')
            .options({ raw: true })
    }
}

(vue/cli2)脚手架的 build/webpack.base.conf.js

module.exports = {
    module:{
        rules:[
            {
                test: /\.md$/,
                loader: 'vue-markdown-loader',
            }
        ]
    }
}

3.使用MD

<template>
    <MD><MD>
</template>

import MD from './md'
export default{
    components:{
        MD
    }
}

4.问题

4.1代码不会高亮

采用插件工具例如：highlight

index.html的 cdn引入

<link rel="stylesheet" href="http://cdn.bootcss.com/highlight.js/8.0/styles/monokai_sublime.min.css">
<script src="http://cdn.bootcss.com/highlight.js/8.0/highlight.min.js"></script>

觉得丑可以把css下载到本地然后修改本地样式即可

采用highlight的loader 请自行百度