mdBookで授業資料を作る

• mdBook で授業資料を作りたいなと思って、デフォルトのテーマファイルを少し修正した
• プレゼンモードやクイズなど、必要な機能はできたと思う

主な修正

• メインフォントは Noto Sans JP と Noto Sans Mono
• メニューのアイコンを Lucide.dev の svg 形式で置き換えた
• ここ を参考に日本語（漢字を含む文字列）の検索に対応させた
• プレゼンモードを作った
  • index.hbs内のテーマセレクターにnoteとslideを準備
  • スタイルシート（variables.css）に各モード用の設定を書いた
  • slideは、フォントを大きく、コンテンツ幅を広げて、いろいろ調整
• お手軽クイズを実現した
  • メニューに check-toggle ボタンを追加して、クリックしたらdiv.pageにcheckedというクラスが toggle する
  • checkedがオンのとき、checkbox にチェックが入ったものが強調される
• もんたメソッドを実現した
  • もんたメソッドは、文章の一部を隠しながらプレゼンをおこなうこと
  • 取り消し線 ~~hoge~~ （<del> 要素）は「もんたボックス」にして、文字が隠れるようにする
  • checkedがオンのとき、もんたボックスの文字が見える
• プリントモードのときに、左のリスト部分がページ内リンクに飛ぶようにした
• MathJax をやめて、描画速度が速い KaTeX を使うようにした

なぜ mdBook ？

• 今期、 Scrapboxで授業資料を作ってみた が、いくつか課題もあった
  • とくに受講生から多かった訴えが「読み込みが遅い」こと
  • 次に、受講生が自分で資料を PDF 化する方法がなかったこと
  • 受講生側で「クイズ」の回答を手軽に確認する手段がないことも不便だった
• LiaScript 、 Docsify など、Markdown 形式でドキュメントを作れるものをいろいろと試してみたけれど、いまいち
• もっともシンプルで、いじりやすそうだったのが mdBook だった

感想

• mdBook は基本的には静的サイトジェネレータなので、 Handlebars 形式で書かれたテンプレート（index.hbs）を書き換えれば、いろいろできて、面白い
• ツールは整ってきたので、コンテンツを作らないとね