2022/02/04 VS Code Meetup #18 - ドキュメント、ブログ、書籍執筆編
@loftkun ( 甲斐 新悟 )
このスライドは、2022/02/04開催の VS Code Meetup #18 - ドキュメント、ブログ、書籍執筆編 にて、私@loftkun のセッションMarkdownでスライドや書籍も書いちゃおう!
で使用したものです
❗ PDF( Speaker Deck / slideshare )版をご覧の方へ : ぜひSPA版をご覧ください :
SPA版ではSlidevツールバー(画面下部に表示されます)や、Webアプリとしての機能( YouTube埋め込みやGIFアニメの再生 )を体験いただけます。(PDF版ではアニメーションは静止画像となってしまいます)
2022/02/04 VS Code Meetup #18 - ドキュメント、ブログ、書籍執筆編
@loftkun ( 甲斐 新悟 )
このスライドは、2022/02/04開催の VS Code Meetup #18 - ドキュメント、ブログ、書籍執筆編 にて、私@loftkun のセッションMarkdownでスライドや書籍も書いちゃおう!
で使用したものです
❗ PDF( Speaker Deck / slideshare )版をご覧の方へ : ぜひSPA版をご覧ください :
SPA版ではSlidevツールバー(画面下部に表示されます)や、Webアプリとしての機能( YouTube埋め込みやGIFアニメの再生 )を体験いただけます。(PDF版ではアニメーションは静止画像となってしまいます)
今日の発表に関連するアウトプットとして、以下の登壇やQiita記事があります。
VSCodeでMarkdownを効率よく書く方法や、Markdownでスライドや電子書籍を書く手順をご紹介しています。
Slidevのご紹介 ( この発表スライドもMarkdownで書いてSlidevでスライドとして表示しています )
サンプルMarkdownを使ったデモ
Pandocのご紹介
サンプルMarkdownを使ったデモ
デモも交えてお送りします
Markdownでスライドを記述できるエンジニア向けプレゼンテーションツールです
$ 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
Node.js >=14.0
)localhost:3030
)Markdown | github.com/loftkun/slidev-example | slides.md をご参照ください |
Live Demo (SPA) | loftkun-slidev-example.netlify | Netlify にデプロイしたSPAです |
Gridレイアウトによりコンテンツを柔軟に配置できます
ここは横幅いっぱい使えるよ
<div class="grid grid-cols-[33%,33%,33%] gap-4"><div>
左グリッド
</div><div>
中央グリッド
</div><div>
右グリッド
</div></div>
ここは横幅いっぱい使えるよ
ソースコードやコマンドの実行結果などのコードブロックを綺麗に表示できます
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")
特徴
slides.md
がスライドとして表示されるslides.md
を 書き換える ( サンプルMarkdownを使用 )デモも交えてお送りします
Pandoc は 様々なドキュメントのフォーマット変換ができるコンバーターです
pandoc is your swiss-army knife
Markdownから変換できるフォーマット例
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 | 表紙画像ファイルのパス |
Kindle Previewer を使うとepubをmobi形式に変換でき、Kindleでも閲覧できます
epubの閲覧、mobi(Kindleで閲覧可能)への変換が可能です
Kindle Paperwhite で表示した例
book.md
) の内容確認VSCodeのMarkdownの編集支援機能も活用しつつ、SlidevやPandocなどのツールを組み合わせることで、Markdownの活用範囲が広がります!
今回の発表が、VSCodeでMarkdown記法で様々な文書を書く際のご参考となりましたら幸いです。