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를 추가)