用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">
       <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>