前言
需求:针对对后台爬去的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"> <pre v-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>