はじめに

このスライドは、2022/02/04開催の VS Code Meetup #18 - ドキュメント、ブログ、書籍執筆編 にて、私@loftkun のセッションMarkdownでスライドや書籍も書いちゃおう！で使用したものです

❗ PDF( Speaker Deck / slideshare )版をご覧の方へ : ぜひSPA版をご覧ください :

SPA版ではSlidevツールバー(画面下部に表示されます)や、Webアプリとしての機能( YouTube埋め込みやGIFアニメの再生 )を体験いただけます。(PDF版ではアニメーションは静止画像となってしまいます)

$ whoami

# loftkun

- IT Specialist at IBM ( ex Yahoo! )
  - Linux OS ( RHEL, etc ), OSS ( OpenShift, etc )
- Python lecturer at Kyushu University Lab ( in 2021 )

- Staff of VS Code Conference Japan 2021

- 🎹 Piano ( YouTuber )
- ☗ 観る将＆指す将
- 🍶 ウィスキー

ご参考

今日の発表に関連するアウトプットとして、以下の登壇やQiita記事があります。
VSCodeでMarkdownを効率よく書く方法や、Markdownでスライドや電子書籍を書く手順をご紹介しています。

Agenda

1. Markdownでスライドを書こう

• Slidevのご紹介 ( この発表スライドもMarkdownで書いてSlidevでスライドとして表示しています )

• サンプルMarkdownを使ったデモ

2. Markdownで電子書籍( epub, mobi )を書こう

• Pandocのご紹介

• サンプルMarkdownを使ったデモ

1.1. Slidevとは

Markdownでスライドを記述できるエンジニア向けプレゼンテーションツールです

1.2. Slidevの導入

$ npm init slidev@latest

  ●■▲
  Slidev Creator  v0.27.15

✔ Project name: … demo
✔ Package name: … demo
  Scaffolding project in demo ...
  Done.

✔ Install and start it now? … yes
✔ Choose the agent › npm

  ●■▲
  Slidev  v0.27.15

  theme   @slidev/theme-seriph
  entry   /home/loft/slidev-demo/slides.md

  slide show      > http://localhost:3030/
  presenter mode  > http://localhost:3030/presenter
  remote control  > pass --remote to enable

  shortcuts       > restart | open | edit

1.3. サンプルMarkdownとLive Demo

1.4. おすすめポイント1: レイアウトが柔軟

Gridレイアウトによりコンテンツを柔軟に配置できます

ここは横幅いっぱい使えるよ
<div class="grid grid-cols-[33%,33%,33%] gap-4"><div>
左グリッド
</div><div>
中央グリッド
</div><div>
右グリッド
</div></div>
ここは横幅いっぱい使えるよ

1.5. おすすめポイント2: コードブロックのシンタックスハイライトと行番号表示ができる

ソースコードやコマンドの実行結果などのコードブロックを綺麗に表示できます

Pythonソースコードの表示例 :

import os
test_path = os.path.join("data", "data-01.txt")

f = open(test_path, "a", encoding="utf-8")
f.write("this is new append line\n")
f.close()

import os
test_path = os.path.join("data", "data-01.txt")

with open(test_path, "a", encoding="utf-8") as f:
    f.write("this is new append line\n")

特徴

• 行番号の表示ができるため、行番号での意思疎通できて便利です
• 着目して欲しい行を強調できます ( 上記の例では 4行目以降 )
• 画像ではなくテキストなので、文字列のコピーや検索も可能です
• 上記のように、Gridレイアウトを使うことで左右で比較、のような表現も可能です

1.6. おすすめポイント3: 拡張機能もあります ( antfu.slidev )

1.7 デモ : Markdownでスライドを書こう

2.1. Pandocについて

• Pandoc は 様々なドキュメントのフォーマット変換ができるコンバーターです

  • pandoc is your swiss-army knife

• Markdownから変換できるフォーマット例

  • html
  • pdf
  • pptx
  • epub
  • などなど、様々なフォーマットに対応しています

2.2. サンプル

Markdownからepubに変換するコマンドの例 :

$ pandoc --from markdown --to epub3 book.md --output book.epub --toc --epub-cover-image=img/cover.png

2.3. Kindleでも読めます

Kindle Previewer を使うとepubをmobi形式に変換でき、Kindleでも閲覧できます

epubの閲覧、mobi(Kindleで閲覧可能)への変換が可能です

Kindle Paperwhite で表示した例

2.4. デモ : Markdownで電子書籍を書こう

3. まとめ

1. Markdownでスライドを書こう

• Slidevのご紹介
• サンプルMarkdownを使ったデモ

2. Markdownで電子書籍( epub, mobi )を書こう

• Pandocのご紹介
• サンプルMarkdownを使ったデモ

VSCodeのMarkdownの編集支援機能も活用しつつ、SlidevやPandocなどのツールを組み合わせることで、Markdownの活用範囲が広がります！

今回の発表が、VSCodeでMarkdown記法で様々な文書を書く際のご参考となりましたら幸いです。