vue.jsとmarked.jsを使って簡易なMarkdownエディタを作ってみた！

今回は、７月から学習しているvue.jsを使って実装を行いました。

簡易的なものではあるので、特にcssを当てていません。もし、参考にされる方がみえましたら、好みでcssの変更をお願いします。笑

では、まず実際に出来上がるものがこちらになります↓

続いて全体のコードになります↓

今回一つのファイルに記述してあるので、わかりにくいかもしれないです、、すみません。

では、順番に流れとコードの説明をします。

1.ライブラリの準備

まず今回は、Markdownのライブラリの一つであるmarked.jsを使用します。

CDNのインストールが簡単ですので、vue.jsと合わせてheadの中に記述しています。

2.Vueインスタンスの作成

続いてわかりやすいように先にvue.jsの記述の説明をします。

「el:」にはどの要素と繋げるかを書くので「'#app'」と指定する。

「data:」には、「input」プロパティを用意して値を空にしておく。（ここにユーザーが入力した文章を入れるため）

「computed:」には「convertMarkdown」プロパティを用意する。ここにfunctionを用意して、this.inputの値をMarkdown形式に変換して返すようにしています。（ユーザーが入力した文字列をHTMLに変換して返している）

3.HTML要素の用意とつなぎ方を決める

textarea要素のテキストには、「input」に入るようにしたいので、「v-model = 'input'」と記述する。

div要素には、「convertMarkdown」の値をHTMLで表示させたいので「v-html = 'convertMarkdown」と記述する。

流れは、このような形です。

今回は、学習の一貫として作成してみましたが、Markdown記法は簡単な記号を使用するだけで、手取り早く文章を強調させたり、見出しを作れたりと便利なものだと再確認ができました。ぜひ、みなさんも使って見てください。

あ、でも最初にもお伝えしましたが、cssの適応だけお願いします！！！笑

では、今回は以上になります。

もし記述の内容での誤りや何かご感想ありましたら、お気軽にお待ちしております。

最後まで読んでいただき、誠にありがとうございます。