Tips2021.04.02

マークダウンをJSON化してNuxt.jsで表示するためのライブラリ

このブログはマークダウンファイルをjson化して記事をデータ化したものを、Nuxt.jsで表示しています。

今回は記事をマークダウンで書いてブログを自作するときに便利なライブラリを3つ紹介します。

目次

マークダウンをHTMLに変換
マークダウンをJSのオブェクトに変換
1. データを持たせたマークダウンファイルを作る
2. マークダウンファイルをオブジェクトに変換
ショートコード
1. ショートコードを定義する
2. ショートコードを使う
まとめ

マークダウンをHTMLに変換

マークダウンをHTMLに変換するためにはmarkedを使います。

[markedjs/marked: A markdown parser and compiler. Built for speed.](https://github.com/markedjs/marked)

markedを使うことでマークダウンの文字列をHTMLの文字列として取得できます。

1
2
3
4
const html = marked('# Hello World')

// htmlの内容
<h1>Hello World</h1>

マークダウンをJSのオブェクトに変換

マークダウンに下記のようにすることでファイル内でデータを定義できます。

この定義したデータをJSのオブジェクトに変換するのにparse-mdを利用しています。

[rpearce/parse-md: Parse Markdown file's metadata from its content](https://github.com/rpearce/parse-md#readme)

類似するライブラリは他にもあるので、同じことができればparse-mdでなくても大丈夫です。

データを持たせたマークダウンファイルを作る

マークダウンファイルの情報をJSで扱うことができため、加工してjsonファイルを生成します。
たとえば下記のようなマークダウンファイルがあるとします。

1
2
3
4
5
---
title: Hello World
---

こんにちは！

ファイルの先頭部分がデータを定義している箇所です。

マークダウンファイルをオブジェクトに変換

parse-mdは文字列を渡すだけでデータとコンテンツの内容を分けてオブジェクトに変換できます。

1
2
3
4
5
6
7
8
9
10
11
import 'parse-md'

const data = parseMD(マークダウンの内容の文字列)

// dataの内容
{
  metadata: {
    title: 'Hello World'
  },
  content: 'こんにちは！'
}

マークダウンファイルを文字列にする方法はfsで読み込むなどしましょう。

1
2
3
import fs from 'fs'

fs.readFileSync('path/to/hello.md', 'utf8') // マークダウンファイルを文字列で取得

ショートコード

WordPressやHugoなどで特定のフォーマットの文字列を書くと定義したHTMLに変換できる仕組みがあります。

以前Vueでショートコードの対応が厳しいという記事を書きましたが、shortcode-metasというライブラリを使ってショートコードの仕組みが実現できます。

[metaplatform/meta-shortcodes: Shortcode parser with support of arguments and attributes.](https://github.com/metaplatform/meta-shortcodes)

開発が続いているようなライブラリではありませんが、依存しているライブラリのバージョンによって動かなくなるといった類のライブラリではないため、心配なく使っています。

僕は合わせてtwig-loaderを使って、テンプレート部分だけ切り出すようにしました。

※markdown-itを使う方法も紹介しています。

[Nuxt.jsのマークダウンでショートコードを使う方法](./nuxt-markdown-shortcode)

ショートコードを定義する

下記のようにjsとtwigでショートコードを定義します。

1
2
3
4
5
6
7
8
9
import shortcodes from 'shortcode-metas'
const parser = shortcodes()
const template from './template.twig' // twig-loaderで読み込み

parser.add('message', (opts, content) => {
  return template({
    message: opts[0]
  })
})

template.twig

1
<div>Message: {{ messages }}</div>

ショートコードを使う

定義したショートコードを使うにはマークダウン内で下記のように記述します。

1
{% message 'Hello' %}

最後にmarkdownファイルの内容をparserのparseというメソッドに渡すことで、template.twigで定義したHTMLをコンパイルして文字列で取得でいるようになります。

1
parser.parse(markdownのデータ)

まとめ

マークダウンをjson化できてしまえば、表示には自分の好きなフレームワークを使ってブログを作成できます。

Nuxt.jsで使うとファイルは静的に書き出して、jsonで全記事のデータを保持しておけばサーバーでスクリプトを動かすことなくSPAブログが作れて楽しいです！