Koki's personal blog

Koki's personal blog

Another fine, responsive site template by HTML5 UP.

doctocで目次を自動生成しつつ文字色を設定するスクリプト

この記事では、doctocで目次を自動生成しつつ文字色を設定するスクリプトを紹介します。

Koki

2 分で読めます

この記事では、doctocで目次を自動生成しつつ文字色を設定するスクリプトを紹介します。

この記事の内容です。

対象読者

  • doctocで目次を自動生成しつつ、リンク文字列に色をしたい方

環境

  • WSL2 (Ubuntu 22.04)
  • Node.js (v18.1.0)

前提条件

  • Node.jsインストール済み
  • doctocインストール済み

スクリプトについて

コードは以下の通りです。
ご自由にお使いください + カスタマイズしてください。
使用方法は、本スクリプトを任意のディレクトリへ配置した後に

node doctoc-ext.js [マークダウンファイルのパス]

を実行するだけです。 [マークダウンファイルのパス] には任意の値を指定してください。マークダウンファイルのパスは半角スペース区切りで複数指定できるようにしています。

本スクリプトの内容です。
本スクリプトでは、コマンドライン引数にて渡されたファイルに対し以下の処理を行っています。

  1. doctocを使用し目次の生成
  2. 生成された目次に対し、正規表現を使用しfontタグを設定

余談

私の場合、本記事で紹介したスクリプトはHugoブログの記事に対し使用しているのですが、「何故、GitHub Actionsなどで自動化しないのか?」について。
理由としては以下の2つがあります。

  1. 以下のページなどを参照した感じ、文字色を変更できなさそう。
    →文字色が明らかにリンクだと分かるものにできないと、微妙な感じになるためこれは必須だと考えている。
READMEの目次の生成を自動化するGitHub Actions | Technote
READMEなどの目次を自動生成する GitHub Actions です。 導入手順 目次の位置を指定する 目次を入れたいマークダウンファイル内に以下のようなコメントを追加します。 例: WORKFLOWを設定 例: オプ.....
technote.space
No Image
  1. デプロイ前にローカル環境で自分が思っている通りに目次を設定できているかを確認したい。
    →デプロイ時に自動で目次を生成するようにしてしまうと、ミスがあった際に再デプロイで必要になり、これは微妙だと考えている。

上記からスクリプトを作成し実行することで対応しているのですが、ここらへんをいい感じに解決できるソリューションがあれば嬉しいなーと思いつつ、途中で考えているのをやめた状態です。

以上、余談でした。

最近の投稿

カテゴリー