Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Demo of write slides and books with VSCode + Markdown

loftkun
February 07, 2022

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

loftkun

February 07, 2022
Tweet

More Decks by loftkun

Other Decks in Technology

Transcript

  1. Markdownでスライドや書籍も
    書いちゃおう!
    2022/02/04 VS Code Meetup #18 - ドキュメント、ブログ、書籍執筆編
    @loftkun ( 甲斐 新悟 )

    View full-size slide

  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版ではアニメーションは静止画像
    となっ
    てしまい
    ます)
    ` `

    View full-size slide

  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 - 🍶 ウィスキー

    View full-size slide

  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でスライドや電子書籍
    を書く様子
    をサンプ
    ルとデモ
    を交え
    てご
    紹介したい
    と思い
    ます!

    View full-size slide

  5. Agenda
    1. Markdownでスライド
    を書こう
    Slidev
    のご
    紹介 ( こ
    の発表スライドもMarkdownで書い
    てSlidevでスライド
    として表示
    してい
    ます )
    サンプ
    ルMarkdown
    を使っ
    たデモ
    2. Markdownで電子書籍( epub, mobi )
    を書こう
    Pandoc
    のご
    紹介
    サンプ
    ルMarkdown
    を使っ
    たデモ

    View full-size slide

  6. 1. Markdownでスライド
    を書こう
    デモも交え
    てお送り
    します

    View full-size slide

  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

    View full-size slide

  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
    を執筆
    していくだけ!
    プレビューにも動的に反映され
    ます
    ` `
    ` `

    View full-size slide

  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

    View full-size slide

  10. 1.4. お
    すすめ
    ポイント1: レイアウトが柔軟
    Gridレイアウトによりコンテンツ
    を柔軟に配置で
    きます
    ここは横幅いっぱい使え
    るよ
    左グリッド 中央グリッド 右グリッド
    ここは横幅いっぱい使え
    るよ
    1 ここは横幅いっぱい使え
    るよ
    2
    3 左グリッド
    4
    5 中央グリッド
    6
    7 右グリッド
    8
    9 ここは横幅いっぱい使え
    るよ

    View full-size slide

  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

    View full-size slide

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


    プレビュー表示がで
    きる
    Markdown
    の編集が即反映され
    ます
    スライド
    のタイト
    ル一覧表示、ジ
    ャンプ
    がで
    きる
    順序
    の変更がで
    きます

    View full-size slide

  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
    ` `
    ` `

    View full-size slide

  14. 2. Markdownで電子書籍( epub, mobi )
    を書こう
    デモも交え
    てお送り
    します

    View full-size slide

  15. 2.1. Pandocについ

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

    pandoc is your swiss-army knife
    Markdownから変換で
    きるフォーマット例
    html
    pdf
    pptx
    epub
    などなど、様々なフォーマットに対応
    してい
    ます
    ` `

    View full-size slide

  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 表紙画像ファイ
    ルのパス

    View full-size slide

  17. 2.3. Kindleでも読め
    ます
    Kindle Previewer
    を使う
    とepub
    をmobi形式に変換で
    き、Kindleでも閲覧で
    きます
    epub
    の閲覧、mobi(Kindleで閲覧可能)へ
    の変換が可能で
    す Kindle Paperwhite で表示
    した例

    View full-size slide

  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
    ` `

    View full-size slide

  19. 3.
    まとめ
    1. Markdownでスライド
    を書こう
    Slidev
    のご
    紹介
    サンプ
    ルMarkdown
    を使っ
    たデモ
    2. Markdownで電子書籍( epub, mobi )
    を書こう
    Pandoc
    のご
    紹介
    サンプ
    ルMarkdown
    を使っ
    たデモ
    VSCode
    のMarkdown
    の編集支援機能も活用
    しつつ、SlidevやPandocなど
    のツー
    ルを組
    み合わせ
    るこ
    とで、
    Markdown
    の活用範囲が広がり
    ます!
    今回
    の発表が、VSCodeでMarkdown記法で様々な文書
    を書く
    際のご参考
    となり
    ましたら幸いで
    す。

    View full-size slide

  20. ご視聴ありが
    とうござい
    まし
    た!

    View full-size slide