markdown で行こう!
TRANSCRIPT
![Page 2: Markdown で行こう!](https://reader031.vdocuments.net/reader031/viewer/2022013120/58ed94fa1a28ab7f1b8b459b/html5/thumbnails/2.jpg)
1 ⾃⼰紹介
2 作成したもの
3 今回の目標
4 メリット
5 補⾜
6 使うもの
7 Pandoc
8 Pandoc のメリット
9 Markdown から HTML変換
10 次回
2 / 14
![Page 3: Markdown で行こう!](https://reader031.vdocuments.net/reader031/viewer/2022013120/58ed94fa1a28ab7f1b8b459b/html5/thumbnails/3.jpg)
テキストファイル処理に興味があり、AWK や Shell などで雑多なプログラミングをしています。
⽇本 GNU AWK ユーザー会会⻑、USP 友の会幹事
Twitter: @hi̲saito
Facebook: /hirofumi.saito.33
auk (ペンギン) のアイコンを⾒かけたら私です。
3 / 14
![Page 4: Markdown で行こう!](https://reader031.vdocuments.net/reader031/viewer/2022013120/58ed94fa1a28ab7f1b8b459b/html5/thumbnails/4.jpg)
⾃分の満⾜のために作成しているので公開しているものはありませんが、以下のようなものを作成しています。
サーバーから iPhone へのプッシュ通知
コンテンツブロッカー Proxy
Markdown から社内⽂書の作成
今回は Markdown から⽂書を作成していきます。
4 / 14
![Page 5: Markdown で行こう!](https://reader031.vdocuments.net/reader031/viewer/2022013120/58ed94fa1a28ab7f1b8b459b/html5/thumbnails/5.jpg)
MS Office や LibreOffice を使わずに Markdown から実⽤に耐える⽂書 (HTML) を作成していきます。
HTML っぽくない体裁 … CSS3 で対応
図表番号や相互参照 … スクリプトで対応
ヘッダーやフッター … Vibliostyle.js1
単なる変換作業だけでなく周辺技術も学んでいきます。
5 / 14
![Page 6: Markdown で行こう!](https://reader031.vdocuments.net/reader031/viewer/2022013120/58ed94fa1a28ab7f1b8b459b/html5/thumbnails/6.jpg)
HTML そのものを印刷に耐えられる体裁にすることには以下のようなメリットがあります。
Markdown の流⾏
Web ページと印刷物の共通化
局所的な体裁の禁⽌
印刷して読みやすいものは Web でも読みやすいのです。
6 / 14
![Page 7: Markdown で行こう!](https://reader031.vdocuments.net/reader031/viewer/2022013120/58ed94fa1a28ab7f1b8b459b/html5/thumbnails/7.jpg)
このスライドも Markdown でできていて、スライド⽤も印刷⽤も同じ Markdown のソースから作られています。
余計な⼿間の削減
⽂書管理の簡略
スマホでも作成可能
iOS なら Writebox が無料で便利です。
7 / 14
![Page 8: Markdown で行こう!](https://reader031.vdocuments.net/reader031/viewer/2022013120/58ed94fa1a28ab7f1b8b459b/html5/thumbnails/8.jpg)
ここでは以下のものを使います。ここに挙げたものは Windos,MacOS, Linux で同じように使えます。
Pandoc
Web ブラウザ (Chrome or Firefox)
AWK … 得意な⾔語で構いません
他に⾃分の使いやすいエディタがあると便利です。
8 / 14
![Page 9: Markdown で行こう!](https://reader031.vdocuments.net/reader031/viewer/2022013120/58ed94fa1a28ab7f1b8b459b/html5/thumbnails/9.jpg)
Pandoc をインストールします。ここでは Windows を前提にしていますが、MacOS や Linux でもパッケージが⽤意されています。
Pandoc2
Pandoc - Installing3
インストーラーが⽤意されているので簡単です。
9 / 14
![Page 10: Markdown で行こう!](https://reader031.vdocuments.net/reader031/viewer/2022013120/58ed94fa1a28ab7f1b8b459b/html5/thumbnails/10.jpg)
Pandoc 以外にも Markdown を HTML に変換するツールはありますが、Pandoc は以下の点で優れています。
Markdown や HTML 以外の多くの⼊出⼒フォーマットに対応
Windows, MacOS, Linux に対応
雛型を指定することができる
⽂書フォーマット変換ソフトを持っておくと便利です。
10 / 14
![Page 11: Markdown で行こう!](https://reader031.vdocuments.net/reader031/viewer/2022013120/58ed94fa1a28ab7f1b8b459b/html5/thumbnails/11.jpg)
11 / 14
![Page 12: Markdown で行こう!](https://reader031.vdocuments.net/reader031/viewer/2022013120/58ed94fa1a28ab7f1b8b459b/html5/thumbnails/12.jpg)
Windows のコマンドプロンプトを起動して以下のように実⾏することで HTML が⽣成できます。
Code 9-1: Pandoc の実⾏
$ pandoc foo.md -o foo.html
しかも⾼速に変換します。
12 / 14
![Page 13: Markdown で行こう!](https://reader031.vdocuments.net/reader031/viewer/2022013120/58ed94fa1a28ab7f1b8b459b/html5/thumbnails/13.jpg)
次回は Markdown と Pandoc について深掘りします。
Markdown の書式
Pandoc を使った変換
Markdown で⾜りない部分
乞うご期待。
13 / 14
![Page 14: Markdown で行こう!](https://reader031.vdocuments.net/reader031/viewer/2022013120/58ed94fa1a28ab7f1b8b459b/html5/thumbnails/14.jpg)
Vibliostyle.js: http://vivliostyle.co.jp/wp/project/1.
Pandoc: http://pandoc.org/2.
Pandoc - Installing: http://pandoc.org/installing.html3.
14 / 14