VSCode + MPE で楽に講義資料を作る

10528 ワード
MarkdownPreviewEnhanced Markdown VSCode Markdown テキストリンク

講義資料を楽して作りたい

昨年、某サークルで新入生向けにプログラミングを教えることになりました。当時、「ん〜、時間がない！！！」と思ったことから「いかに楽してイイ感じの講義資料を作るか」を考え始めました。その備忘録を記事にしたいと思います。

ここでは、以下のような講義資料を作ること目標とします。

  • PDFにして配布ができる
  • 印刷して配布ができる
  • あわよくば、記事化できる

また、今回ご紹介する『Markdown Preview Enhanced』は、非常に便利な拡張機能がたくさんあります。ここでは「とにかく楽したい」という考えのもと、多くは説明しません。ですが、興味がある方は公式ドキュメント（英語）を読むことを強くオススメします。

# 1. 環境

参考までに私の環境を載せておきます。

  • Mac OSX または Windows10
  • Visual Studio Code v1.32.3
  • Markdown Preview Enhanced v0.3.12

# 2. Markdown と VSCode

Markdownは、とっても書きやすいHTMLみたいなものです。ここでは詳しい説明は致しません。代わりに参考ページを載せておきます。

Markdownとは · 日本語Markdownユーザー会
Markdown記法 サンプル集 - Qiita

またエディタは『Visual Studio Code』（以下、VSCode）を利用します。私は試していませんが、Atomでも同じように利用できるでしょう。

# 3. Markdown Preview Enhanced

VSCode の拡張機能として『 Markdown Preview Enhanced 』（以下、MPE）を導入します。MPE は Markdown のプレビューや書き出し、ファイルの埋め込みなど、様々な機能を拡張してくれる非常に強力なプラグインです。

Introduction - Markdown Preview Enhanced

VSCodeの「拡張機能」から検索すると出てくるので、インストールしましょう。

# 4. 資料作りに役立つタグ （ただの Markdown）

通常のMarkdownで私がよく使うテンプレートです。「おい、Markdownどこいった？」と思う程度には、HTMLタグを多用します。

日付や著者名

書類を作るときは、日付や著者名などを右寄せにして載せたいことがあります。そのときは素直に<div style="text-align: right;">で括ってあげます。

# 講義名

## 第n回 タイトル - Title -

<div style="text-align: right;">
サークル名
<br>
担当：なまえ
<br>
20XX-XX-XX
</div>

どんどん、HTML タグを使っていきましょう。

改ページ

PDFや印刷するときに、任意の位置で改ページしたいシーンが多々あります。そのときは<div style="page-break-before:always"></div>を使います。

# ページ１

<div style="page-break-before:always"></div>

# ページ２

この１行で改ページができるので、スニペットを定義してもいいかもしれません。

ヘッダーのようなもの

「サークル内だけで共有したい講義資料なので、すべてのページにコメントを載せたい」ということで、先ほどの改ページと組み合わせつつ使います。

<div style="text-align: right; font-size: 8px;">サークル外持出禁止</div>

# ページ１

<div style="page-break-before:always"></div>
<div style="text-align: right; font-size: 8px;">サークル外持出禁止</div>

# ページ２


後に登場する@importと組み合わせれば、ヘッダーの一括編集なんかもできそうです。

# 5. MPE でもっとスマートになる

Import external files @import "file_path"

MPE で一番好きな機能です。
@import "file_path"の構文で、画像やソースファイルなど様々なファイルを埋め込むことができます。

画像だけでなく、ソースコードもそのまま埋め込めるので、いちいちコピペする必要がありません。Markdown も埋め込めちゃうので、ヘッダーなどの共通して使う部分をパーツとして分割して使うこともできそうです。

詳細は公式ドキュメントを読むと良いでしょう。非常にシンプルで強力な機能で、手軽に楽ができます。

File Imports - Markdown Preview Enhanced

また、{}で attribute を指定できます。{width=50%}のような画像のサイズ指定が手軽にできるので、面倒なリサイズも必要ありません。

Table of Contents [TOC]

Table of Contents はいわゆる目次を Header Tag （# タイトル など） から自動で生成してくれる機能です。[TOC] の５文字で目次が書けちゃいます。

ファイル冒頭に設定を記述することで、表記する範囲をカスタマイズすることも可能です。

---
toc:
  depth_from: 1
  depth_to: 6
  ordered: false
---

とくに記事化するときなんかは楽ですね。

Diagrams

MPE は Flow Charts や PlantUML といった Markdown とは異なる「図形を書くコンポーネント」に対応しています。

Diagrams - Markdown Preview Enhanced

いやー、神ですね。

ただし、それぞれの記法に勉強コストがかかるため、私は「書きなれる機会があれば使う」くらいの心持ちでいます。

# ６. 書き出し

MPE には Pandoc や PhantomJS のような非常に様々な書き出しコンポーネントに対応しています。それぞれのコンポーネントは、必要に応じでインストールや設定が必要です。通常は、多少面倒でもこれらのコンポーネントを利用したほうがお得でしょう。

しかし、ここでは究極に手抜きをします。

  1. MPE で開く
  2. 右クリックから「Open In Browser」を選択
  3. ブラウザで開いたら、印刷をする
  4. 印刷からPDFに書き出す

これです。

スマートな方法とは言い難いですが、エラーが出ることはないので甘んじて使っています。参考程度にどうぞ。

また、サンプルで使った Markdown もここに貼っておきます。

---
toc:
  depth_from: 3
  depth_to: 5
  ordered: false
---
<!-- ヘッダー -->
<div style="text-align: right; font-size: 8px;">サークル外持出禁止</div>

# 講義名

## 第n回 タイトル - Title -

<div style="text-align: right;">
サークル名
<br>
担当：なまえ
<br>
20XX-XX-XX
</div>

## Index

[TOC]

### ページ１

拙者親方と申すは、御立会の内に御存知の御方も御座りましょうが、
御江戸を発って二十里上方、相州小田原一色町を御過ぎなされて、
青物町を上りへ御出でなさるれば、欄干橋虎屋藤右衛門、只今では剃髪致して圓斎と名乗りまする。

<!-- 改行 -->
<div style="page-break-before:always"></div>

<!-- ヘッダー -->
<div style="text-align: right; font-size: 8px;">サークル外持出禁止</div>

### ページ２

元朝より大晦日まで御手に入れまする此の薬は、
昔、珍の国の唐人外郎と云う人、我が朝へ来たり。
帝へ参内の折から此の薬を深く込め置き、用うる時は一粒ずつ冠の隙間より取り出だす。
依ってその名を帝より「透頂香」と賜る。
即ち文字には頂き・透く・香と書いて透頂香と申す。

<!-- 改行 -->
<div style="page-break-before:always"></div>

<!-- ヘッダー -->
<div style="text-align: right; font-size: 8px;">サークル外持出禁止</div>

### ページ３

只今では此の薬、殊の外、世上に広まり、方々に偽看板を出だし、
イヤ小田原の、灰俵の、さん俵の、炭俵のと色々に申せども、
平仮名を以って「ういろう」と記せしは親方圓斎ばかり。
もしや御立会の内に、熱海か塔ノ沢へ湯治に御出でなさるるか、
又は伊勢御参宮の折からは、必ず門違いなされまするな。

まとめ

「楽をする」ことに注目しつつ、私なりの講義資料の作り方をご紹介させていただきました。VSCode や Markdown 、そして MPE はまだまだ素晴らしい機能を持っています。状況に応じて最適な「楽」は異なると思うので、ベストな楽環境を考えてみてはいかがでしょうか。もし「こういう楽もあるよ」といった情報がありましたら、コメントなどに投げて頂けると嬉しいです。

少しでも皆さんの「楽」につながったら嬉しいです。よき「楽ライフ」を！