vue中使用markdown

參考資料：https://github.com/hinesboy/mavonEditor
https://www.jianshu.com/p/aca26ec75ec3
示例：

<template>
    <div>
      <!--markdown編輯-->
      <no-ssr>
        <mavon-editor :toolbars="toolbars" v-model="value"/>
      </no-ssr>
      <!--markdown展示-->
      <!--在 mavon-editor 標簽中添加class="md" 和在上一層嵌套<no-ssr>都可以達到解析markdown語法的效果 -->
      <mavon-editor class="md" previewBackground="white" :toolbarsFlag="false" defaultOpen='preview' :subfield="false"
                    :editable="false" :scrollStyle="true" :toolbars="toolbars" :value="value"/>
    </div>
</template>

<script>
  export default {
    name: 'login',
    data () {
      return {
        value: '',
        toolbars: {
          bold: true, // 粗體
          italic: true, // 斜體
          header: true, // 標題
          underline: true, // 下划線
          strikethrough: true, // 中划線
          mark: true, // 標記
          superscript: true, // 上角標
          subscript: true, // 下角標
          quote: true, // 引用
          ol: true, // 有序列表
          ul: true, // 無序列表
          link: true, // 鏈接
          imagelink: true, // 圖片鏈接
          code: true, // code
          table: true, // 表格
          fullscreen: true, // 全屏編輯
          readmodel: true, // 沉浸式閱讀
          htmlcode: true, // 展示html源碼
          help: true, // 幫助
          /* 1.3.5 */
          undo: true, // 上一步
          redo: true, // 下一步
          trash: true, // 清空
          save: true, // 保存（觸發events中的save事件）
          /* 1.4.2 */
          navigation: true, // 導航目錄
          /* 2.1.8 */
          alignleft: true, // 左對齊
          aligncenter: true, // 居中
          alignright: true, // 右對齊
          /* 2.2.1 */
          subfield: true, // 單雙欄模式
          preview: true, // 預覽
        }
      }
    },
}
</script>