Mathlog記事をローカルで確認するCLIを作ってみた
はじめに
Mathlogの記事はMarkdownで書けます。ただ、数式、囲み枠、ラベル参照、画像などを含めて整えようとすると、投稿前に手元でじっくり確認できる環境があると便利です。
mathlog-cliは、Mathlog向けの記事Markdownを手元でプレビューするためのCLIです。Qiita CLIのようにローカルサーバを起動し、public/配下の記事を一覧しながらブラウザで確認できます。
「まずローカルで書き、見た目を確認し、納得してからMathlogへ投稿する」ための下書き環境として使うことを想定しています。
リポジトリはこちら:
https://github.com/skrtk98/mathlog-cli
mathlog-cliのプレビュー画面
投稿前の下書き環境として使う
mathlog-cliは、Mathlogへ投稿する前のMarkdownをローカルで整えるためのツールです。
実際の投稿や更新はMathlogのWeb画面で行います。その前段階として、本文、数式、マクロ、画像などを手元で確認しておくと、投稿画面では内容を貼り付けて最終確認するだけに近づけられます。
ローカルで何度も保存して表示を見直せるので、長い記事や数式の多い記事ほど試しやすいです。
できること
mathlog-cliの中心は、記事ディレクトリ全体を対象にしたプレビューです。
npm run preview
起動すると、既定では次のURLでプレビューを開けます。
http://localhost:3141/
画面左側には記事一覧、右側には選択した記事のプレビューが表示されます。Markdownファイルを保存するとブラウザ側が自動で更新されるため、エディタとブラウザを並べて気軽に書き進められます。
新しい記事はCLIからも作れます。
npm run new -- my-article
プレビュー画面の「新規記事作成」ボタンから作成することもできます。
Mathlog記法のプレビュー
Mathlogの記事でよく使う記法を、ローカルでもなるべく近い形で確認できます。
$...$や$$...$$による数式\begin{...}\end{...}によるディスプレイ数式&&&def ... &&&のような形式ブロック[[label]]による参照- 相対パスの画像
- 相対パスのMarkdown記事リンク
なお、ファイル先頭のfront matterはMathlog本体の記法ではなく、mathlog-cliが記事一覧やタグ表示のために読むローカル用のメタ情報です。
front matterは次のように書きます。
---
title: "記事タイトル"
tags:
- "Mathlog"
- "Markdown"
private: false
---
titleは記事一覧やプレビュー上部のタイトルに使われます。省略した場合はファイル名が使われます。
tagsはプレビュー上で表示するタグです。複数行で書く形式に加えて、tags: ["Mathlog", "Markdown"]のようなインライン配列でも書けます。
privateをtrueにすると、プレビュー上でprivateバッジが表示されます。これはローカルプレビュー用の表示であり、Mathlog上の公開状態を変更するものではありません。
本文として投稿したいMarkdownは、front matterの後ろに書きます。
たとえば定義ブロックは次のように書けます。
&&&def ローカルプレビュー
記事Markdownを保存しながら、ブラウザで表示を確認できる仕組みをローカルプレビューと呼ぶ。
&&&
表示側ではMathlogの囲み枠に近い形で確認できます。
マクロ設定
Mathlogで登録しているTeXマクロは、記事置き場直下のmathlog.macros.jsonに保存します。
既定の記事置き場はpublic/なので、このリポジトリでは次のファイルが使われます。
public/mathlog.macros.json
このファイルに登録されたマクロは、プレビューのMathJax設定にも渡されます。そのため、たとえば\abs{x}のようなユーザーマクロも記事内で確認できます。
マクロはプレビュー画面右上の「マクロ設定」から編集できます。設定画面は別タブで開くので、記事プレビューを開いたままマクロだけを管理できます。
まとめ
mathlog-cliは、Mathlog記事を書くときの確認作業をローカルに寄せるための小さなCLIです。
記事一覧、自動更新、Mathlog記法のプレビュー、ユーザーマクロ設定をまとめて扱えるので、数式を含む記事でも投稿前に見た目を確認しやすいです。
Mathlogに記事を書いている人は、次の記事の下書きから試してみてください。
