Vue.jsでマークダウン入力＆表示を実装する (mavon-editor)

Vue.jsでマークダウン入力＆表示ができるページを作る

こんなページを作ります。mavon-editorを使うと簡単にできました。
編集完了後に編集画面ではなく普通のページを表示する方法が意外と見つからなくて苦戦しました。

※追記
以前 marked を使ったページ表示方法を記載していましたが、 marked だと対応していないマークダウン記述が多かったので修正しました。

インストール

npm install mavon-editor

実装

import mavonEditor from 'mavon-editor'
import 'mavon-editor/dist/css/index.css'
import 'mavon-editor/dist/markdown/github-markdown.min.css'
import 'mavon-editor/dist/highlightjs/highlight.min.js'
import 'mavon-editor/dist/katex/katex.min.css'
import 'mavon-editor/dist/katex/katex.min.js'
Vue.use(mavonEditor)
export default {
  // 以下略

こんな感じで埋め込み対象のページで import しつつ、

data: () => ({
  mavonEditor: {
    externalLink: {
      markdown_css: function() {
        return '/static/css/markdown/github-markdown.min.css'
      },
      hljs_js: function() {
        return '/static/js/highlightjs/highlight.min.js'
      },
      katex_css: function() {
        return '/static/css/katex/katex.min.css'
      },
      katex_js: function() {
        return '/static/js/katex/katex.min.js'
      },
    },
    // ツールバーにどのボタンを追加するか
    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,
      code: true,
      table: true,
      fullscreen: true,
      readmodel: true,
      htmlcode: true,
      help: true,
      undo: true,
      redo: true,
      navigation: true,
      alignleft: true,
      aligncenter: true,
      alignright: true,
      subfield: true,
      preview: true,
    },
  },

  // マークダウンの内容を格納する変数
  body: '',

  // 以下、他の変数など
}),

でエディターの設定。

あとは、

<mavon-editor
  language="ja"
  v-model="body"
  :counter="65535"
  :externalLink="mavonEditor.externalLink"
  :toolbars="mavonEditor.toolbars"
></mavon-editor>

でエディターの表示、

<mavon-editor
  language="ja"
  v-model="body"
  :externalLink="mavonEditor.externalLink"
  :subfield="false"
  :editable="false"
  :toolbarsFlag="false"
  :boxShadow="false"
  defaultOpen="preview"
  previewBackground="#fff"
></mavon-editor>

でエディターで入力された内容の表示を行うことができました。
(外側にborderが表示されてしまうので、気になる方はborderを表示しないCSSを追加)