schedule2019-03-20

コマンドでマークダウンを変換するprocessmd | npm

npmMarkdown

npmにマークダウンファイルをコマンドで変換できるモジュールがあるので紹介します。このブログでも利用しています。

processmd

マークダウンファイルを扱いやすいようにJSONに変換することができます。そして、同時に"summary"として複数のファイルをまとめることもできます。

JSONのパラメータの中に、マークダウン形式の生データとHTMLに変換したデータが入っています。また、日付やタイトルなどパラメータを自由に設定することも可能です。

マークダウンを変換する際にはmarkdown-itを利用しています。オプションにmarkdown-it-highlight

markdown-it-latex を利用しています。これらによって、コードのシンタックスハイライト

また、ymlにも対応しています。

npm、githubに使い方の説明が書いてあります。英語なので、翻訳しつつ自分の使い方も混ぜて説明していきます。

インストール

npmコマンドが使える環境が前提です。

$ npm install --save-dev processmd

markdown-itや関連するモジュールも同時にインストールされます。

processmdコマンドの使い方

CLIでprocessmdのコマンドが使えるようになります。

$ processmd "content/**/*.{yml,md}" --outputDir output

contentディレクトリ内のマークダウン（yml）を一括で変換するときの書き方。出力先のディレクトリにJSONファイルを出力します。

入力と出力ファイルの説明

このサイトの記事をマークダウンで以下のように書いています。

---
id: 1
title: Mac ChromeのデベロッパーツールをF12で開くよう設定する
created_at: 2018-07-04
updated_at: 2019-01-04
isDraft: false
tags: Mac,chrome
top_image: /icons/mac-apple.svg
icon: /icons/mac-apple.svg
---


WindowsからMacに移って、よく使っているショートカットキーの違いに戸惑いました。
MacではChromeのデベロッパーツールを開くショートカットキーは`⌘`+`option`+`i`です。
忘れてしまうので、Macでも`F12`で開けるように設定します。

## デフォルトのショートカットキー

MacではChromeのデベロッパーツールを開くデフォルトのショートカットキーは`⌘`+`option`+`i`です。
その他、Chromeの操作の中でよく使うものを抜粋しました。

最初に---で囲った部分は連想配列としてJSONに持つことができます。その下は普通のマークダウンです。

上記を変換すると下のJSONになります。

{
  "id": 1,
  "title": "Mac ChromeのデベロッパーツールをF12で開くよう設定する",
  "created_at": "2018-07-04T00:00:00.000Z",
  "updated_at": "2019-01-04T00:00:00.000Z",
  "draft": false,
  "tags": "Mac,chrome",
  "top_image": "/icons/mac-apple.svg",
  "bodyContent": "WindowsからMacに移って、よく使っているショートカットキーの違いに戸惑いました。\r\nMacではChromeのデベロッパーツールを開くショートカットキーは`⌘`+`option`+`i`です。\r\n忘れてしまうので、Macでも`F12`で開けるように設定します。\r\n\r\n## デフォルトのショートカットキー\r\n\r\nMacではChromeのデベロッパーツールを開くデフォルトのショートカットキーは`⌘`+`option`+`i`です。\r\nその他、Chromeの操作の中でよく使うものを抜粋しました。",
  "bodyHtml": "<p>WindowsからMacに移って、よく使っているショートカットキーの違いに戸惑いました。\nMacではChromeのデベロッパーツールを開くショートカットキーは<code>⌘</code>+<code>option</code>+<code>i</code>です。\n忘れてしまうので、Macでも<code>F12</code>で開けるように設定します。</p>\n<h2>デフォルトのショートカットキー</h2>\n<p>MacではChromeのデベロッパーツールを開くデフォルトのショートカットキーは<code>⌘</code>+<code>option</code>+<code>i</code>です。\nその他、Chromeの操作の中でよく使うものを抜粋しました。",
  "preview": "",
  "dir": "content/posts/json",
  "base": "1.json",
  "ext": ".json",
  "sourceBase": "1.md",
  "sourceExt": ".md"
}

content/json/1.json

出力の説明

key	説明
bodyContent	ソースのマークダウン
bodyHtml	パースしたHTML
dir	出力先のパス
base	出力のファイル名
ext	出力の拡張子
sourceBase	ソースのファイル名
sourceExt	ソースの拡張子

マークダウンに書いたパラメータも連想配列になっています。また、数値やbool、日付も認識して上手いことやってくれます。

これで、記事がJavaScriptから扱いやすいデータになりました。

進んだ使い方

個別のJSONを作成するだけでなく、summaryとしてまとめることができます。

$ processmd \"content/**/*.{yml,md}\" --stdout --outputDir output > summary.json

content/summary.json

{
  "fileMap": {
    "content/posts/json/1.json": {
      "id": 1,
      "title": "Mac ChromeのデベロッパーツールをF12で開くよう設定する",
      "created_at": "2018-07-04T00:00:00.000Z",
      "updated_at": "2019-01-04T00:00:00.000Z",
      "draft": false,
      "tags": "Mac,chrome",
      "top_image": "/icons/mac-apple.svg",
      "preview": "",
      "dir": "content/posts/json",
      "base": "1.json",
      "ext": ".json",
      "sourceBase": "1.md",
      "sourceExt": ".md"
    },
    （省略）
  },
  "sourceFileArray": [
    "markdown/1.md",
    "markdown/10.md",
    "markdown/100-similar-term.md",
    "markdown/101-mysql-monthly-report.md",
    （省略）
    ]
}

fileMapに各マークダウンのbodyContentとbodyHtmlを除いたパラメータ。 sourceFileArrayにソースのパスの配列が格納されます。

当ブログではsummary.jsonを使って、記事の一覧や個別の記事のページを作っています。

オプション

processmd - npm

もとのページを見てもらうのが一番良いですが、いくつか使ってちゃんと理解しているものを紹介します。

|オプション|デフォルト|説明| |outputDir| './dist' |JSONの出力先| |filenamePrefix| '' |ファイル名に接頭辞を付ける| |renderLatex|true|$$ か、```mathで数式をLaTeX形式で変換できる| |highlightCode|true|コードブロックのシンタックスハイライトを使うか| |preview|0|パラメータに先頭の指定文字数のpreviewを追加する。| |markdownOptions|{}|markdown-itに渡すオプション| |headingIds|false|目次を自動追加する|

使い方は--outputDir content/posts/jsonのようにします。

補足としていくつか注意点を。

headingIdsは日本語に向いていない

はidに##以降の文字を入れます。漢字や日本語は読み方に変換してアルファベット表記する。

この時、漢字は中国語読みで変換するため目次から辿らせることが難しいです。

# markdown
## processmdコマンドの使い方

# html
&lt;h2 id=\&quot;processmdkomandono-shi-i-fang\&quot;&gt;processmdコマンドの使い方&lt;/h2&gt;

参考：Atomのmarkdown-tocでタイトルが日本語の場合に動かない場合の対処

個人的な使い方

個人的には下のコマンドをpackage.jsonに登録してnpm run mdで変換しています。

{

  &quot;scripts&quot;: {
    &quot;dev&quot;: &quot;nuxt&quot;,
    &quot;build&quot;: &quot;nuxt build&quot;,
    &quot;md&quot;: &quot;processmd markdown/*.md --stdout --preview 100 --outputDir content/posts/json &gt; content/summary.json&quot;,
  },
  (省略)
}