最近、Vue.jsとmarked.jsとhighlight.jsを使ってマークダウンエディタを作ったので、使い方等をBlogにまとめておこうと思います🙇 はじめに まずはテンプレートを用意する。 marked.jsを使ってマークダウンテキスト→HTML変換を行う highlight.jsを使ってシンタックスハイライト機能を追加する。 おまけ：マークダウンのデザインを調整する おわりに 参考 はじめに まず作ろうとしているのは、こんな感じです。 普通のコードシンタックスハイライト機能付きのマークダウンエディタというような形です👀 まずはテンプレートを用意する。 まずは、今回のマークダウンエディタ用のテンプレートを用意します。 入力用のテキストエディタ(#editor)とプレビュー用(#preview)の要素を持つ単一ファイルコンポーネントを下記に記載しました。 また、テキストエディタには