最近、Vue.jsとmarked.jsとhighlight.jsを使ってマークダウンエディタを作ったので、使い方等をBlogにまとめておこうと思います🙇

はじめに

まず作ろうとしているのは、こんな感じです。

f:id:madogiwa0124:20190103202247p:plain

普通のコードシンタックスハイライト機能付きのマークダウンエディタというような形です👀

まずはテンプレートを用意する。

まずは、今回のマークダウンエディタ用のテンプレートを用意します。入力用のテキストエディタ(#editor)とプレビュー用(#preview)の要素を持つ単一ファイルコンポーネントを下記に記載しました。
また、テキストエディタには入力値をバインドするためにv-modelを記載しています。※スタイルは割愛してます。

<template>
  <form id="post-form">
    <div id="editor">
      <textarea v-model="markdownText">input</textarea>
    </div>
    <div id="preview">
    </div>
  </form>
</template>
<script>
  export default {
    name: 'postForm',
    data: function () {
      return {
        markdownText: ''
      }
    }
  }
</script>

marked.jsを使ってマークダウンテキスト→HTML変換を行う

それでは、marked.jsを使って入力値をHTMLに変換していきます。

https://github.com/markedjs/marked

まずはmarked.jsをインストールしましょう。

$ npm install marked --save

私は上記コマンドで行いましたが、詳しいインストール方法は下記を参考してください。

https://marked.js.org/#/README.md#installation

インストールが終わったらmarked.jsをimportします。

import marked from 'marked';

そして下記のcomputedを追加します。markedの引数に変換したい文字列を渡せば、それに応じたHTMLを返してくれます👀

computed: {
  compiledMarkdown: function () {
    return marked(this.markdownText)
  }
},

あとは#previewにv-html使ってバインドしてあげればOKです🙌

<div id="preview">
  <div v-html="compiledMarkdown"></div>
</div>

最終的にはこんな感じになります、これでエディタに応じたHTMLがバインドされるようになりました！意外と簡単ですね✨

<template>
  <form id="post-form">
    <div id="editor">
      <textarea v-model="markdownText">input</textarea>
    </div>
    <div id="preview">
      <div v-html="compiledMarkdown"></div>
    </div>
  </form>
</template>
<script>
  import marked from 'marked';

  export default {
    name: 'postForm',
    data: function () {
      return {
        markdownText: ''
      }
    },
    computed: {
      compiledMarkdown: function () {
        return marked(this.markdownText)
      }
    },
  }
</script>

highlight.jsを使ってシンタックスハイライト機能を追加する。

次にhighlight.jsを使ってコードシンタックスハイライト機能を追加していきましょう！

https://highlightjs.org/

まずは先程と同様にhighlight.jsをインストールしましょう！

$ npm install highlight.js --save

私は上記コマンドで行いましたが、詳しいインストール方法は下記を参考してください。

https://highlightjs.org/usage/

インストールが終わったらhighlightjsをimportします。

import hljs from 'highlightjs';

まずは、createdの中でhighlight.jsを使うようにmarkedのオプションを変更します。

created: function () {
  marked.setOptions({
    // code要素にdefaultで付くlangage-を削除
    langPrefix: '',
    // highlightjsを使用したハイライト処理を追加
    highlight: function(code, lang) {
      return hljs.highlightAuto(code, [lang]).value
    }
  });
},

最後にハイライトで使うスタイルシートを読み込みます。私は、github-gist.cssにしましたが、他にも色々あるようなのでお好きなスタイルを使ってみてください👀

<style src='highlightjs/styles/github-gist.css'></style>

最終的には、こんな感じになりました！これでハイライト機能が出来ました🙌

<template>
  <form id="post-form">
    <div id="editor">
      <textarea v-model="markdownText">input</textarea>
    </div>
    <div id="preview">
      <div v-html="compiledMarkdown"></div>
    </div>
  </form>
</template>
<script>
  import marked from 'marked';
  import hljs from 'highlightjs';

  export default {
    name: 'postForm',
    created: function () {
      marked.setOptions({
        langPrefix: '',
        highlight: function(code, lang) {
          return hljs.highlightAuto(code, [lang]).value
        }
      });
    },
    computed: {
      compiledMarkdown: function () {
        return marked(this.markdownText)
      }
    },
    data: function () {
      return {
        markdownText: ''
      }
    }
  }
</script>
<style src='highlightjs/styles/github-gist.css'></style>

おまけ：マークダウンのデザインを調整する

マークダウン用のスタイルを設定するのがめんどくさい人は、公開されているマークダウン用のスタイルがあるみたいなので、それを使ってみるのもありかと思いました！

ちなみに私はライセンスフリーの下記を使ってみました👀

github.com

おわりに

ライブラリを使うと結構簡単にマークダウンエディタが作れるんですね👀マークダウンエディタはシンプルかつ、いろいろ自分のアイデアを組み込めるので、勉強には良さそうな気がしました🤔
ここから色々機能を追加して、フロントエンド関係の知識も身に着けていきたいですね💪

参考

qiita.com

Madogiwa Blog

主に技術系の学習メモに使っていきます。

Vue.js + marked.js + highlight.jsを使ってシンタックスハイライト機能付きマークダウンエディタを作ってみたのでMEMO