在vue中使用marked解析markdown文件

1、安装marked

npm install marked

2、在Vue中引用

<template><div><div v-html="output" class="html_output"></div></div>
</template>
<script>
import { marked } from "marked"; // 局部导入marked包export default {name: "test",data() {return {};},computed: {},watch: {},methods: {readFile: function () {let me = this;let url = "/static/test.md"; // 读取本地.md文件this.axios({ url: url, baseURL: "" }).then((response) => {if (response.data) {me.output = marked(response.data); // 解析markdown文件到div显示}}).catch(function (err) {me.output = marked( // 找不到文件则显示一个默认错误，相当于404'<h1 class="h1-text">Sorry, this page is under construction</h1>');});},},mounted: function () {this.readFile();},
};
</script><style>
.h1-text {text-align: center;margin-top: 10px;
}.html_output {line-height: 2 !important;font-family: "Lato", sans-serif;
}
</style>

在vue中使用marked解析markdown文件相关推荐

vue使用marked解析markdown文本遇到的坑及解决方法
vue使用marked解析markdown文本遇到的坑及解决方法 1. 前言最近在搭建自己的博客网站 https://lyuanzhi.com,不免遇到了要把markdown文本转化为html代码的 ...
解析Markdown文件生成React组件文档
前言最近做的项目使用了微前端框架single-spa. 对于这类微前端框架而言,通常有个utility应用,也就是公共应用,里面是各个子应用之间可以共用的一些公共组件或者方法. 对于一个团队而言,项 ...
在vue中把数据导出Excel文件
在vue中把数据导出Excel文件第一次尝试写文章在vue中把数据导出成Excel格式的文件,话不多,上代码: 第一步我们要先安装几个集成的插件 npm install -S file-saver ...
在vue中引入外部的css文件
在vue中引入外部的css文件在项目的src文件下,新建一个style文件夹,存放css文件. 1. 全局引入将外部的css文件放到style文件下,引入外部文件只需在main.js文件中 imp ...
解决vue中使用v-html解析后table表格的线不见了
vue中使用 v-html 解析富文本 1.在编辑器中输入什么就显示什么 2.使用v-html解析后有问题可以看看☞☞ 官网地址需要注意的是:从编辑器中获取的 html 代码是不包含任何样式的纯 ...
vue中使用CodeMirror解析yaml语言
vue中使用CodeMirror解析yaml语言一.CodeMirror插件使用 1.CodeMirror插件安装二.CodeMirror基本配置三.CodeMirror具体使用 1.首先创建一 ...
ant design vue 中Upload组件如何自定义文件列表的样式
ant design vue 中Upload组件如何自定义文件列表的样式问题历程 UploadList 组件源码 h() 方法实现注问题技术:vue.ant design vue 在开发项 ...
Vue中怎么加载pdf文件
Vue预览pdf文件,我觉得pdfh5方式比较简洁,还有vue-pdf也可以,但是如果文件内容较多的话,vue-pdf就需要做分页处理,就麻烦了:接下来,想分享下我使用pdfh5的代码逻辑.如下:(注 ...
vue中axios利用blob实现文件浏览器下载
背景在vue中,使用axios向后台请求数据,但只接收返回的response并不能实现浏览器下载,所以需要借助于blob实现文件的浏览器下载,分为两种情况,一种是get请求,使用params,另一种 ...
Vue中通过配置eslintrc.js文件来解决编译时出现的no-trailing-spaces、no-undef等错误
错误信息: D:\work\vue\workbench\src\views\login\index.vue12:10 warning 'Options' is defined but never us ...

在vue中使用marked解析markdown文件

1、安装marked

2、在Vue中引用

在vue中使用marked解析markdown文件相关推荐

最新文章

热门文章