VuejsでMarkdownを使うときの最強な組み合わせ

Vueフレームワークを利用したウェブアプリケーションでMarkdownを扱いたいときのおすすめのライブラリと一緒に追加すると良い感じになるライブラリをまとめて紹介します。

とりあえず試したい！というひとは
それぞれのgithub(リンクあり)のLiveDemoなどを利用してみると良い感じです。

あと一番下にまとめたjsファイルを貼ってあります。

使用環境

• VueCLI3

Markdown-it

かなりド定番でなんと言っても、超手軽に扱え拡張性が高いライブラリです。

npm install markdown-it --save

使用方法としては、インストール後ターゲットとなるVueファイルでライブラリを読み込み

import markdownIt from "markdown-it";

定義して変換対象のテキストを変換する。

export default {
  data() {
    md: new markdownIt({
        highlight: function(code, lang) {
            return hljs.highlightAuto(code, [lang]).value;
        },
        html: true,
        linkify: true,
        breaks: true,
        typographer: true
    })
    .use(katex, { throwOnError: false, errorColor: " #cc0000" })
    .use(emoji)
    .use(checkbox)
    .use(sanitizer)
    .use(resizeImg, { autofill: true })
    .use(sub)
    .use(ins)
    .use(mark)
    .use(footnote)
    .use(deflist)
    .use(abbr)
    .use(container, "info")
    .use(container, "success")
    .use(container, "warning")
    .use(container, "danger");

    return {
      markdownIt: md,
      sourceText: String
    }
  },
  computed: {
    compileMarkdown: function() {
      return this.markdownIt.render(this.sourceText);
    }
  }
}

といった感じにめっちゃ簡単にかけます。

インスタンス化しているときに指定しているオプションは、

• html : ソースの中のHTMLタグを有効化する
• linkify : ソースのプレーンテキストで書かれたURLをリンク化する
• breaks : ソース中の改行文字を改行タグにする
• typographer : 記号をうまくやってくれる
• highlight : マークダウン後のコードのシンタックスハイライト(次のライブラリで説明)

さらにuseで指定しているのがこれから紹介していくライブラリになります。

あとは、Githubなどのマークダウン用のCSSを読み込ませたらサクッと完成です。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/github-markdown-css/3.0.1/github-markdown.min.css">

Markdownとして機能はするのですが、まだまだ充実していないので他のライブラリを適用します。

highlight.js

先程紹介したmarkdown-it内のオプションとして設定されていた、シンタックスハイライトをやってくれるライブラリです。

npm install highlight.js --save

使い方は、読み込んで

import hljs from "highlight.js";

先程のようにオプションで指定します。

highlight: function(code, lang) {
  return hljs.highlightAuto(code, [lang]).value;
}

そして、CSSを読み込ませます。
私の場合はxcodeをよく使うので、このテーマにしました。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/styles/xcode.min.css">

テーマ自体は他にもたくさんあるので自分好みのものを見つけてみてください！

markdown-it-sanitizer

サニタイザです。公開するサイトの場合はXSS対策は必須です。

npm install markdown-it-sanitizer --save

使い方は簡単。読み込んで

import sanitizer from "markdown-it-sanitizer";

インスタンスの後ろにこんな感じでつけます。

md.use(sanitizer);

markdown-it-emoji

意外と必須ないと不便 :thinking_face なのが絵文字です。

npm install markdown-it-emoji --save

あとはmarkdown-it-sanitizerと同じ実装方法です。

@iktakahiro/markdown-it-katex

LatexやMathJaxのように数式をきれいに表示してくれるやつです。ただMathJaxのほうが使われているような感じもしますが、より高速なのでこちらを使います。

あとmarkdown-it-katexというライブラリもnpmでインストールできるのですが、2年以上最新バージョンが出ておらずうまく動作もしなかったので、@iktakahiro/markdown-it-katexこちらを使わせてもらいます。

npm install @iktakahiro/markdown-it-katex --save

こちらも上のライブラリと同じ実装方法なんですが、ひとつだけCSSを読み込む必要があります。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.10.0/katex.min.css">

私の場合はオプションとしてKatexのスクリプトが不正とかのときに赤く色を変えるようにしています。

.use(katex, { throwOnError: false, errorColor: " #cc0000" })

markdown-it-imsize

マークダウン内で読み込まれた画像のサイズを良い感じ調整できるライブラリです。

npm install markdown-it-imsize --save

使い方的には今までと同じです。

私の場合は、オプションでwidthやheightにピッタリハマるようにしています。

.use(resizeImg, { autofill: true })

ここからはさらなる機能拡張!

markdown-it-checkbox

単純にcheckboxです。あったら便利くらいのものなのですが、一応追加しておきます。

npm install markdown-it-checkbox --save

あとはmarkdown-it-sanitizerと同じ実装方法です。

markdown-it-sub

Subscriptを良い感じに表現してくれるライブラリです。

例えば、
H2O
と書きたいときにこのライブラリを通せば、

と良い感じに出力してくれます。

npm install markdown-it-sub --save

あとはmarkdown-it-sanitizerと同じ実装方法です。

markdown-it-container

名前の通り文章をBOXでくくってくれます。
具体的にはこんな感じです。

npm install markdown-it-container --save

タグを指定する必要があるので、実装する方法としては

.use(container, "info")
.use(container, "success")
.use(container, "warning")
.use(container, "danger")

こんな感じにそれぞれのタグを設定して、それに対応するCSSを読み込ませる必要があり
ます。

以下のCSSを当てれば画像のような色合いと大きさで表示されます。

CSS

.success {
  margin: 10px 0;
  padding: 10px 10px;
  border-radius: 5px;
  color: #3A6F3A;
  background-color: #DAEDD2;
}

.info {
  margin: 10px 0;
  padding: 10px 10px;
  border-radius: 5px;
  color: #2B6584;
  background-color: #D3EAF6;
}

.warning {
  margin: 10px 0;
  padding: 10px 10px;
  border-radius: 5px;
  color: #AF9C75;
  background-color: #FCF7DF;
}

.danger {
  margin: 10px 0;
  padding: 10px 10px;
  border-radius: 5px;
  color: #9F3B3A;
  background-color: #F0D9D9;
}

SCSS

@mixin base {
  margin: 10px 0;
  padding: 10px 10px;
  border-radius: 5px;
}

.success {
  @include base();
  color: #3A6F3A;
  background-color: #DAEDD2;
}

.info {
  @include base();
  color: #2B6584;
  background-color: #D3EAF6;
}

.warning {
  @include base();
  color: #AF9C75;
  background-color: #FCF7DF;
}

.danger {
  @include base();
  color: #9F3B3A;
  background-color: #F0D9D9;
}

markdown-it-ins

文字にアンダーライン引いてくれます。

npm install markdown-it-ins --save

あとはmarkdown-it-sanitizerと同じ実装方法です。

markdown-it-mark

黄色のマーキングをしてくれます。
強調したい部分などわかりやすくなります。

npm install markdown-it-mark --save

あとはmarkdown-it-sanitizerと同じ実装方法です。

markdown-it-footnote

いわゆる参照を生成されたHTMLの一番下につけてくれます。

npm install markdown-it-footnote --save

あとはmarkdown-it-sanitizerと同じ実装方法です。

markdown-it-deflist

なにか用語等の定義をしたいときに使ういわゆる<dl>タグになります。

例えば

Term 1

:   Definition 1
with lazy continuation.

Term 2 with *inline markup*

:   Definition 2

        { some code, part of Definition 2 }

    Third paragraph of definition 2.

こう記述するとこうなります

npm install markdown-it-deflist --save

あとはmarkdown-it-sanitizerと同じ実装方法です。

markdown-it-abbr

略語を使用する場合に正式名称をマウスオーバーで表示できるようになります。

例えば
*[HTML]: Hyper Text Markup Language
とするとこうすることができます

npm install markdown-it-abbr --save

あとはmarkdown-it-sanitizerと同じ実装方法です。

まとめ

ここまででライブラリの紹介は終わりです。
最後に、今までのライブラリをまとめて使えるようにした。jsファイル置いておきます。
ライブラリをインストール後このソースファイルをimportをすれば簡単にMarkdownが手に入ります。
それぞれCSSの適用が必要なやつがあるので、詳しくは上の記事を見てください。

import markdownIt from "markdown-it";
import container from "markdown-it-container";

export default {
  md: new markdownIt({
    highlight: function(code, lang) {
      return hljs.highlightAuto(code, [lang]).value;
    },
    html: true,
    linkify: true,
    breaks: true,
    typographer: true
  })
 .use(require("@iktakahiro/markdown-it-katex"), {
  throwOnError: false,
  errorColor: " #cc0000"
});
  .use(require("markdown-it-emoji"));
  .use(require("markdown-it-checkbox"));
  .use(require("markdown-it-sanitizer"));
  .use(require("markdown-it-imsize"));
  .use(require("markdown-it-sub"));
  .use(require("markdown-it-ins"));
  .use(require("markdown-it-mark"));
  .use(require("markdown-it-footnote"));
  .use(require("markdown-it-deflist"));
  .use(require("markdown-it-abbr"));
  .use(container, "info");
  .use(container, "success");
  .use(container, "warning");
  .use(container, "danger");
  compileMarkdown: function(mdText) {
    return this..render(mdText);
  }
};

では良いMarkdownライフを！！！