将md文件转化为html样式，在页面中进行渲染

安装 vue-markdown-loader
主要是为了将markdown文件解析并编译成html文件

npm install vue-markdown-loader  -D

安装 vue-loader 、vue-template-compiler

将文件渲染成vue组件

npm install vue-loader  -D
npm install vue-template-compiler  -D

安装 github-markdown-css、highlight.js

美化样式、高亮代码

npm install github-markdown-css  -D
npm install highlight.js  -D

在vue.config.js中配置webpack

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})}
}

在main.js中引入样式文件

// markdown样式
import 'github-markdown-css'
// 代码高亮
import 'highlight.js/styles/github.css'

在vue组件中使用

将md文件作为组件导入，注意：class的值必须包含 markdown-body ，否则样式无法生效！

<template><demo-md class="markdown-body"></demo-md>
</template><script>
// 导入md文件 ，并注册为组件
import DemoMd from './demo.md';
export default {components: {DemoMd}
}
</script>

将md文件转化为html样式，在页面中进行渲染相关推荐

php实现wav转mp3,php实现将wav文件转换成图像文件并在页面中显示的方法
本文实例讲述了php实现将wav文件转换成图像文件并在页面中显示的方法.分享给大家供大家参考.具体分析如下: 需求:将wav文件转换成png文件并且显示出来. Wav_To_Png.php: func ...
只在当前页面生效的css样式,修改页面中的一个样式仅在当前页面生效
问题描述校验的提示框出现在其他位置怎么修改问题出现的环境背景及自己尝试过哪些方法尝试直接修改样式会修改掉全局的样式怎么让这个样式仅在当前页面生效相关代码 // 请把代码文本粘贴到下方( ...
[PHP]进阶教程：将wav文件转换成图像文件并在页面中显示
需求:将wav文件转换成png文件并且显示出来. Wav_To_Png.php: <?Phpfunction wav_graph($file, $f=0, $w=0){global $DATA_ ...
html控制多个音频audio css,vue中audio自定义样式（页面中包含多个audio）
前言一开始看到UI设计稿,我内心是十分抗拒的.觉得用原生audio的样式就可以了,也不是特别丑,毕竟时间给的不多,自定义样式还要改逻辑啥的.在网上搜索了一番有没有合适的插件,没有看到心动的.最后还是 ...
一个html文件创造多个页面,使页眉和页脚文件包含在多个html页面中。
侃侃尔雅你可以用jQuery.将此代码放入index.html click here for google现在,当你访问index.html,您应该能够单击链接标记.
如何将md文件转换为html
方式一:使用i5ting_toc插件需要先安装npm(安装node.js后会自带npm),然后才能安装i5ting插件 npm install i5ting_toc -g 执行命令行生成html文件 ...
Idea使用系统应用打开md文件
起因编辑项目中MD文件时,习惯性的在IDEA中双击,使用IDE自带的编辑器打开,效果有点差强人意. 目标希望能够使用系统编辑器打开,比如Typora 实现打开IDEA菜单,File -> ...
bootstrap所需的js/css文件本地的jsp页面中的引入
断网使用bootstrap bootstrap需要的文件如下: jsp页面中引入: <link href="<%=request.getContextPath() %>/s ...
html导入.md文件并渲染,vue 导入.md文件（markdown转HTML）
前言刚接到这个需求的时候,觉得很简单(的确很简单)但是这玩意的坑真的也让人无奈. 网上找了很多的资料,都没有写出痛点(这就很难过了).通过实践并且在我们项目中平稳运行,想分享给后面的人我的博客上也 ...

将md文件转化为html样式，在页面中进行渲染

将md文件转化为html样式，在页面中进行渲染

在main.js中引入样式文件

在vue组件中使用

将md文件转化为html样式，在页面中进行渲染相关推荐

最新文章

热门文章