Demo of write slides and books with VSCode + Markdown

2022/02/04
VS Code Meetup #18 - ドキュメント、ブログ、書籍執筆編 - connpass
https://vscode.connpass.com/event/236710/

できるだけ以下のSPA版を御覧ください、SlidevのツールバーやYouTubeやGIFアニメーションを見ていただけます。
https://loftkun-slidev-vscode-meetup-18.netlify.app

Transcript

1. Markdownでスライドや書籍も 書いちゃおう！ 2022/02/04 VS Code Meetup #18 - ドキュメント、ブログ、書籍執筆編 @loftkun ( 甲斐 新悟 )
2. はじめに こ のスライドは、2022/02/04開催 の VS Code Meetup #18 - ドキュメント、ブログ、書籍執筆編 に て、私 @loftkun のセッション Markdownでスライドや書籍も書いちゃおう！ で使用 したも ので す 本資料(SPA版) https://loftkun-slidev-vscode-conference-japan- 2021.netlify.app/ YouTubeアーカイブ VS Code Meetup VS Code Meetup … … https://www.youtube.com/embed/e5-1SVKKHv4? start=3060 ❗ PDF( Speaker Deck / slideshare )版 をご覧 の方へ : ぜひSPA版 をご覧ください : SPA版ではSlidevツー ルバー(画面下部に表示され ます)や、Webアプリ としての機能( YouTube埋め込 みやGIF アニメ の再生 ) を体験い ただけ ます。(PDF版ではアニメーションは静止画像 となっ てしまい ます) ` `
3. $ whoami 1 # loftkun 2 3 - IT Specialist at IBM ( ex Yahoo! ) 4 - Linux OS ( RHEL, etc ), OSS ( OpenShift, etc ) 5 - Python lecturer at Kyushu University Lab ( in 2021 ) 6 7 - Staff of VS Code Conference Japan 2021 8 9 - 🎹 Piano ( YouTuber ) 10 - ☗ 観 る将＆指 す将 11 - 🍶 ウィスキー
4. ご参考 今日 の発表に関連 するアウトプット として、以下 の登壇やQiita記事があり ます。 VSCodeでMarkdown を効率よく書く方法や、Markdownでスライドや電子書籍 を書く手順 をご 紹介してい ま す。 VS Code Conference Japan 2021 で の発表 Track B - VS Code Conference Ja Track B - VS Code Conference Ja… … Qiita | Visual Studio Code Advent Calendar 2021 こちら の記事はQiitaトレンド1位になり ました！ 今日は、実 際にMarkdownでスライドや電子書籍 を書く様子 をサンプ ルとデモ を交え てご 紹介したい と思い ます！
5. Agenda 1. Markdownでスライド を書こう Slidev のご 紹介 ( こ の発表スライドもMarkdownで書い てSlidevでスライド として表示 してい ます ) サンプ ルMarkdown を使っ たデモ 2. Markdownで電子書籍( epub, mobi ) を書こう Pandoc のご 紹介 サンプ ルMarkdown を使っ たデモ
6. 1. Markdownでスライド を書こう デモも交え てお送り します
7. 1.1. Slidev とは Markdownでスライド を記述で きるエンジニア向けプレゼンテーションツー ルで す ロフトくん @loftkun Markdownでスライド を執筆で き る Slidev の紹介と、導入する際の ポイント を書い てみました。 qiita.com Slidev を導入してMarkdownで 美 しいスライド を書こう - Qiita 5:26 PM · Aug 7, 2021 Read the full conversation on Twitter
8. 1.2. Slidev の導入 1 $ npm init slidev@latest 2 3 •▪▲ 4 Slidev Creator v0.27.15 5 6 ✔ Project name: … demo 7 ✔ Package name: … demo 8 Scaffolding project in demo ... 9 Done. 10 11 ✔ Install and start it now? … yes 12 ✔ Choose the agent › npm 13 14 •▪▲ 15 Slidev v0.27.15 16 17 theme @slidev/theme-seriph 18 entry /home/loft/slidev-demo/slides.md 19 20 slide show > http://localhost:3030/ 21 presenter mode > http://localhost:3030/presenter 22 remote control > pass --remote to enable 23 24 shortcuts > restart | open | edit これだけでOK ( 要 Node.js >=14.0 ) ブラウザで閲覧で きます( localhost:3030 ) あ とは slides.md を執筆 していくだけ！ プレビューにも動的に反映され ます ` ` ` `
9. 1.3. サンプ ルMarkdown とLive Demo Markdown github.com/loftkun/slidev-example slides.md をご参照ください Live Demo (SPA) loftkun-slidev-example.netlify Netlify にデプロイ したSPAで す ロフトくん @loftkun Markdownでスライド を執筆で き る Slidev の紹介と、導入する際の ポイント を書い てみました。 qiita.com Slidev を導入してMarkdownで 美 しいスライド を書こう - Qiita 5:26 PM · Aug 7, 2021
10. 1.4. お すすめ ポイント1: レイアウトが柔軟 Gridレイアウトによりコンテンツ を柔軟に配置で きます ここは横幅いっぱい使え るよ 左グリッド 中央グリッド 右グリッド ここは横幅いっぱい使え るよ 1 ここは横幅いっぱい使え るよ 2 <div class="grid grid-cols-[33%,33%,33%] gap-4"><div> 3 左グリッド 4 </div><div> 5 中央グリッド 6 </div><div> 7 右グリッド 8 </div></div> 9 ここは横幅いっぱい使え るよ
11. 1.5. お すすめ ポイント2: コードブロック のシンタックスハイライト と行番号表示 がで きる ソースコードやコマンド の実行結果など のコードブロック を綺麗に表示で きます Pythonソースコード の表示例 : before 4 f = open(test_path, "a", encoding="utf-8") 5 f.write("this is new append line\n") 6 f.close() after 4 with open(test_path, "a", encoding="utf-8") as f: 5 f.write("this is new append line\n") 特徴 行番号 の表示がで きるため、行番号で の意思疎通で きて便利で す 着目 して欲 しい行 を強調で きます ( 上記 の例では 4行目以降 ) 画像ではなくテキストな ので、文字列 のコピーや検索も可能で す 上記 のように、Gridレイアウト を使うこ とで左右で比較、 のような表現も可能で す 1 import os 2 test_path = os.path.join("data", "data-01.txt") 3 1 import os 2 test_path = os.path.join("data", "data-01.txt") 3
12. 1.6. お すすめ ポイント3: 拡張機能もあり ます ( antfu.slidev ) プレビュー表示がで きる Markdown の編集が即反映され ます スライド のタイト ル一覧表示、ジ ャンプ がで きる 順序 の変更がで きます
13. 1.7 デモ : Markdownでスライド を書こう インストー ル default の slides.md がスライド として表示され る slides.md を 書 き換え る ( サンプ ルMarkdown を使用 ) Markdown の記述内容 とスライド の表示 を確認 する VS Code Meetup #18 - ドキュメン VS Code Meetup #18 - ドキュメン… … アーカイブ : https://www.youtube.com/embed/e5- 1SVKKHv4?start=3485 ` ` ` `
14. 2. Markdownで電子書籍( epub, mobi ) を書こう デモも交え てお送り します
15. 2.1. Pandocについ て Pandoc は 様々なドキュメント のフォーマット変換がで きるコンバーターで す pandoc is your swiss-army knife Markdownから変換で きるフォーマット例 html pdf pptx epub などなど、様々なフォーマットに対応 してい ます ` `
16. 2.2. サンプ ル github.com/loftkun/markdown-to-ebook book.md Markdownファイ ル ebook/book.epub epubファイ ル Markdownからepubに変換 するコマンド の例 : $ pandoc --from markdown --to epub3 book.md --output book.epub --toc --epub-cover-image=img/cover.png from 変換元 のフォーマット to 変換先 のフォーマット output 出力ファイ ルのパス toc 目次出力 を有効化 epub-cover-image 表紙画像ファイ ルのパス
17. 2.3. Kindleでも読め ます Kindle Previewer を使う とepub をmobi形式に変換で き、Kindleでも閲覧で きます epub の閲覧、mobi(Kindleで閲覧可能)へ の変換が可能で す Kindle Paperwhite で表示 した例
18. 2.4. デモ : Markdownで電子書籍 を書こう サンプ ルリ ポジトリ をclone Markdownファイ ル( book.md ) の内容確認 epubに変換、閲覧 mobiに変換、閲覧 VS Code Meetup #18 - ドキュメン VS Code Meetup #18 - ドキュメン… … アーカイブ : https://www.youtube.com/embed/e5- 1SVKKHv4?start=4240 ` `
19. 3. まとめ 1. Markdownでスライド を書こう Slidev のご 紹介 サンプ ルMarkdown を使っ たデモ 2. Markdownで電子書籍( epub, mobi ) を書こう Pandoc のご 紹介 サンプ ルMarkdown を使っ たデモ VSCode のMarkdown の編集支援機能も活用 しつつ、SlidevやPandocなど のツー ルを組 み合わせ るこ とで、 Markdown の活用範囲が広がり ます！ 今回 の発表が、VSCodeでMarkdown記法で様々な文書 を書く 際のご参考 となり ましたら幸いで す。
20. ご視聴ありが とうござい まし た！