[javascript]electron-vueでvue-markdownを使ってみた

作成中のアプリケーションで使っているelectron-vueに、vue-markdownを追加して、markdownの表示機能をつけてみました😃

markdownを軽く

markdownについて書いたら長々となるので軽く。。
wiki にはこんな感じに書いてあります。

Markdown（マークダウン）は、文書を記述するための軽量マークアップ言語のひとつである。本来はプレーンテキスト形式で手軽に書いた文書からHTMLを生成するために開発されたものである。

ほとんどの方が知っていると思いますが、文章を作るときに便利な書き方です。
slackやbacklogのwikiなどいろんなところで使えるので、覚えておくと便利ですよね。wordpressでもmarkdownを使って記事を書くことができます👍

vue-markdownはvueでmarkdownを使うときのモジュールです。
textareaを展開してくれて入力した内容をmarkdown形式で反映させてくれます。
公式のgithubはこちらです。

npm install --save vue-markdown

でモジュールを落としてきます。

import VueMarkdown from 'vue-markdown'
export default {
    ・・・
    components: {
       'vue-markdown': VueMarkdown
    },
    ・・・
}

使うvueファイルでimportしてcomponentsに定義しておきます。

 <vue-markdown :source="post_text_model"></vue-markdown>

表示したいところで箇所で、上記のように定義しておけば表示してくれます。
sourceが表示する内容を指定する箇所なので、textareaを作って、v-modelで指定した属性を同じようにつけておけばOKです😤

こんな感じで、textareaに記載した内容が右のエリアに表示されます😄
前回は入れたモジュールを使いませんでしたが、これは必要なので採用したいと思います（笑）

👋