Vue3 ライブラリ「vue3-markdown-it」を使用してmarkdownを表示する

Vue3 ライブラリ「vue3-markdown-it」を使用してmarkdownを表示する

ライブラリ「vue3-markdown-it」を使用して、markdownを表示することが可能です。ここでは、vue3-markdown-itを利用するための手順と簡単な使い方を記述してます。

環境

  • OS  windows10 64bit
  • vue 3.0.0
  • node v14.6.0
  • yarn 1.22.10
  • @vue/cli 4.5.9

Vue3環境構築

vue-cliを使用して構築してます。

vue3-markdown-itインストール

yarnを使用して、インストールします。

yarnがインストールされていない場合は、以下のコマンドでインストール可能です。

vue3-markdown-it使い方

src配下のApp.vueを下記のように編集します。

起動

起動します。

ブラウザから http://プライベートIP or localhost:8080にアクセスすると、markdownが表示されていることが確認できます。