「vue-markdown」でマークダウンエディタを実装する

vue-markdownとは

 

Vue.jsのための強力で高速なマークダウンエディタです。

以下の構文がサポートされています

•   自動目次
• テーブル＆クラスのカスタマイズ
• * SyntaxHighlighter
•   定義リスト
•  取り消し線
• GFMタスクリスト
• 略語
• 上付き
• 添字
•  脚注
• インサート
•   絵文字
• マーク

 

インストール

以下のnpm、yarn、CDNのどれか一つを使ってインストールします。

npm

npm install --save vue-markdown

yarn

yarn add vue-markdown --save

CDN

<script src="https://unpkg.com/[email protected]/lib/marked.js"></script>
<script src="https://unpkg.com/vue-md-editor/dist/vue-editor.min.js"></script>

 

gitリポジトリは以下から取得できます。

https://github.com/miaolz123/vue-markdown

 

導入手順

1. ライブラリの取り込み

webpack等の場合

import VueMarkdown from 'vue-markdown'
new Vue({
  components: {
    VueMarkdown
  }
})

WEBページの場合

取り込みの必要はありません。

2. テンプレートを準備

<div id="app">
  <vue-editor></vue-editor>
</div>

 

デモ

>>専用ページで確認する

 

まとめ

「vue-markdown」でマークダウンエディタを導入する方法でした。

管理人的には、導入するのに少し癖があるように感じました。
今後の開発に期待です。

 

今日はこの辺でー