用showdown预览markdown文件(vue3.0)

前言

需求：针对对后台爬去的markdown数据，页面做展示，无需编辑

使用

安装
```
npm install showdown --save
```

组件中使用

import showdown from "showdown";data() {return {converter: null,suggestionsRepairhtml:'',};},// 使用methods: {// 转换markdown语法为html语法 val为接口获取的markdown字符串transMarkDown(val) {this.suggestionsRepairhtml = this.converter.makeHtml(val);},},mounted(){this.converter = new showdown.Converter();// 支持解析表格this.converter.setOption("tables", true);}

github-markdown-css(markdown文件css插件)

 // 安装npm i github-markdown-css// 组件导入import 'mavon-editor/dist/markdown/github-markdown.min.css';// 使用<div class="markdown-body"><prev-html="suggestionsRepairhtml"/></div>

vue3.0+ts中使用

额外安装
```
npm install @types/showdown
```

使用

<script lang='ts' setup>
import 'mavon-editor/dist/markdown/github-markdown.min.css';
import showdown from 'showdown'
const converter = new showdown.Converter()
converter.setOption('tables', true);
const suggestionsRepairhtml = ref<any>('11')
// data为接口数据
suggestionsRepairhtml.value = converter.makeHtml(data.suggestion || '暂无')
</script>

css样式

<style lang="scss">
ol{list-style-type: decimal !important;margin-block-start: 1em;margin-block-end: 1em;li{list-style-type: decimal !important;margin: 4px 20px;}white-space: nowrap;}
.markdown-body p {margin-top: 0;margin-bottom: 0px;
}
.markdown-body table {display:inline-table;width: 100%;overflow: auto;
}
em{font-weight: 500;color: #ffa300;
}
.markdown-body ol, .markdown-body ul {padding-left: 0em;
}
</style>

用showdown预览markdown文件(vue3.0)相关推荐

Goolge浏览器预览markdown文件
一.下载插件包 :下载地址二.解压插件包三.打开Google浏览器扩展程序方法1: 在浏览器地址栏输入后回车:chrome://extensions/ 方法2: 打开设置,找到扩展程序四.打 ...
IntelliJ IDEA 无法预览Markdown 文件的解决思路 - 无GPU渲染
问题 IDEA plugin Markdown 插件启用的状态下,无法渲染preview 尝试过此博客提供的方法,依然没有解决解决遂决定前往jetbrains youtrack寻找答案,果真给我找 ...
linux 预览md文件_利用Tornado搭建文档预览系统
在平时的工作或学习中,我们经常会接触不同格式的文档类型,比如txt,log,Offices文档,编程代码脚本,图片,视频等.本文将会介绍笔者的一个朴素想法,即把不同格式的文档都放在同一个平台中进行预览 ...
文件预览：使用xlsx预览excel文件
文件预览系列: mavon-editor预览Markdown文件 xlsx预览excel文件注意事项: 多sheet页的情况需要自己手动处理一.安装插件:xlsx // 我目前使用的是0.17.5 ...
Mac配置炫酷终端以及直接预览Markdown和各类代码
1. 下载iTerm2 brew cast install iTerm2 安装完成后,在/bin目录下会多出一个zsh的文件. Mac系统默认使用dash作为终端,可以使用命令修改默认使用zsh: c ...
html如何找寻vue文件,如何预览vue文件
每天写个页面,都要配置脚手架,能不能像以前开发前端页面一样,写一个index.html,然后编写js,css,就可以在浏览器上运行了呢?可是我又不想舍弃vue,那么能不能全局搭建一个脚手架,供我来使用 ...
使用PDF.js实现前端和手机端网页预览PDF文件（可定制，支持本地文件、Base64编码和远程URL跨域方式）
1.插件下载地址:https://mozilla.github.io/pdf.js/ 下载后解压pdfjs-1.10.88-dist.zip文件后得到: 2.把pdfjs-1.10.88-dist放到 ...
ashx获取input file 文件_前端战五渣学前端——FileReader预览本地文件
距离上一篇博客将近一个半月了,这一个多月有点烦躁,静不下心来学习,也不知道为什么,玩的也不算太好,还感冒.可能是天气热了吧,有点点躁动.上周看了<哪吒--魔童降世>还不错,还看了新出的&l ...
原生js预览ofd文件，JavaScript
最近项目需要预览ofd文件,于是上网搜索了一下相关知识,结果大感失望,内容很少而且没有什么用,最后根据一个博客找到了方法和总结,话不多说上代码. <!DOCTYPE html> <h ...
前端在线预览PDF文件
如何在vue项目中预览PDF格式的文件需求:在vue3.x项目中预览pdf文件提供以下三种方案: 1.Vue-pdf:适用于vue2.x版本,vue3.x需要改一些源码(vue2.x项目极力推荐, ...

用showdown预览markdown文件(vue3.0)

前言

使用

vue3.0+ts中使用

css样式

用showdown预览markdown文件(vue3.0)相关推荐

最新文章

热门文章