<追記> markdown pdfで数式が正しく変換されない場合

2022年12月1日現在、私の環境では、 $ $ で囲った数式部分がプレビューだと正しく表示されるのに、pdf化するとそのまま`$'が表示されるという不具合が発生しました。

あまり良い解決方法とは言えないのですが、こちらに解決方法が載っていますので、不具合に見舞われた方はご覧ください。

前編はこちらから

今回は、少しステップアップした使い方をお伝えします。

markdown使いこなし~中級編~

表

wordでも表がかけますが、個人的にはmarkdownの方が書きやすくて好きです。

|ラベル|ラベル|ラベル|
|:--:|:--:|:--:|
|パラメーター|パラメーター|パラメーター|
|パラメーター|パラメーター|パラメーター|

こんな感じに書きます。

例えば、

|   |word|latex|markdown|
|:--:|:--:|:--:|:--:|
|親しみやすさ|〇|×|△|
|書きやすさ|〇|△|〇|
|拡張性|×|△|〇|

こんな風に書けば

	word	latex	markdown
親しみやすさ	〇	×	△
書きやすさ	〇	△	〇
拡張性	×	△	〇

このようになります。

数式

理系の人なら必ず書く数式ですね。
数式はLaTeX記法に対応しています。
詳しい記法は書きたい文字 LaTeXとググってください。

こんな感じに書けます。

$$ E_{\pi}(r_{t+2}+r_{t+3}+...|s_t=s) = \sum_{a < A} \pi (s,a) \sum_{s' < S}P(s'|s,a) \sum_{a' < A} \pi (s',a') \sum_{s'' < S}P(s''|s',a')rV_\pi(s') $$

$ E_{\pi}(r_{t+2}+r_{t+3}+...|s_t=s) = \sum_{a < A} \pi (s,a) \sum_{s' < S}P(s'|s,a) \sum_{a' < A} \pi (s',a') \sum_{s'' < S}P(s''|s',a')rV_\pi(s') $

数式のコードの最初と最後を$で囲うのですが、

$ 数式のコード $ だと左揃え
$ \frac{2}{3} $
$$ 数式のコード $$だと　中央揃え
$$ \frac{2}{3} $$

簡易的な図

前編で入れた？拡張機能である、Draw.io Integrationを使ってみましょう。

先ほど作ったmarkdownと同じ場所に好きな名前.drawio.svgというファイルを作成します。
私はなんとなく、hello.drawio.svgというファイルを作りました。
.drawio.svgという拡張子のファイルを開くと自動的にdrawioが立ち上がります。

あとは、パワポ作るときみたいな感じです。
左側の図形を、真ん中の作業エリアにペタペタして、右側のエリアで色を塗ったりフォント変えたりします。遊んでいくうちに慣れると思います。
より詳細な使い方は、「drawio　使い方」でググってください。

完成したら、画像と同様にしてパスを指定して貼り付けましょう。
注意点として、vscodeのダークテーマを使っていると、drawioを貼り付けるとこうなります。

めちゃ見づらいので、drawioの背景色を白くしましょう。
それか、線を白く設定するかどっちかですね。

pdf化の方法

前編で入れた？markdown-pdfを使います。
やり方は簡単です。
pdf化したいmarkdownファイルを開いたら、右クリックしてMarkdown pdf:Export(PDF)を選ぶだけです。
数秒で同じディレクトリにpdfファイルが出来上がっています。

ちなみに、ここで改ページしたいと思うところに

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

というコードを入れると自動的に改ページされます。

さらなるmarkdown記法

他にもいろいろmarkdownでできることがあります。
「markdown書き方」でググったり、このページを覗いたりしてみてください。

markdown使いこなし~上級編~

もっとデザインを変えたい。

例えば、画像を中央揃えしたいとかもっとスタイルを整えたいという場合があるでしょう。
そのような場合はhtmlのコードを書けば解決できます。
例えば画像を2つ並べて、中央揃えしたい場合、


<center style="display: flex; justify-content: space-between;">
	<div>
		<img style="width: 300px; height: auto; margin: 10px;" src="https://onl.tw/3hxx3rz" />
		<p>画像1. 現場猫1</p>
	</div>
	<div>
		<img style="width: 300px; height: auto; margin: 10px;" src="https://onl.tw/3hxx3rz" />
		<p>画像2. 現場猫2</p>
	</div>
</center>

こんな感じに書けます。

htmlとcssが書けるので、どんなデザインでも対応できます！

スマホからファイルの閲覧と編集

Iphoneアプリにこんなものがあります。

このアプリgoogle driveなどのインポートにも対応しているので、google driveなどにファイルを保存しておけば、どこからでもファイルを閲覧と編集ができます。

Androidは調べたことがないですが、似たようなものはあると思います。

ササッとドキュメントをurlで共有

授業ノート送ってくれない？って言われたときに、写真にして送るのも、LINEでファイルを送るのもなんかスマートじゃないですよね。

URLにして送っちゃいましょう。

一番簡単なのが、Qiitaに会員登録して限定共有記事として投稿後、そのURLを送るのがとっつきやすいですね。

後はgithub pagesでしょうか？
非エンジニアの方は少し敷居が高いですが、ディレクトリで管理できるのがデカイです。
使えるならこっちをオススメします。

スライドを作る

私はあんまり活用していないですが、markdownでスライドを作る拡張機能も存在します。

爆速で記述するツール

先生が記述する数式をlatex記法書いていくと、必ず置いていかれます。
だって、分数かくだけで\frac{2}{3}って書かなきゃですからね。記述量がえげつないので、私の授業ノートはこんな感じです。

なので、一つチート的なツールを使いましょう。

github copilotです。

AI(GPT-4)がコードを自動的に補完してくれるツールなのですが、数式の頭部分を書けば、書きたかった式に近い式をかなりの確率で予想してくれます。

画像の中の薄灰色の文字がAIの予想です。

こんなすごい拡張機能、実は大学生は無料で使えます。

とはいえ、授業の板書の数式を教授の書く速さと同じスピードでlatex記法で書いていくのは、結構ムズイです。

まとめ

Markdownは授業ノートとしても使える。
でも、数式を高速で書くのはムズイから授業中はIpadに手書きがいいかも。
Ipad欲しいなあ。