忘れないように記録しとこ

カバの樹

「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/marked@0.3.6/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」でマークダウンエディタを導入する方法でした。

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

 

今日はこの辺でー

 

 

  • B!