mdBookで授業資料を作る

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

主な修正

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

なぜ mdBook ?

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

感想

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