Marpで資料を作ってLTへの参加ハードルを下げる

そもそもLTについてどういう認識？題材と資料に関して LTを初めてやる人が気になりそうな点などを調べる人が多い。 5

そもそもLTについてどういう認識？何を使ってLT資料を作る？ツール PPT、Google スライド Keynote Canva etc... ©2023 株式会社ユーティル
髙橋俊介 8

MarpでLT資料を作ろう Marpとは？ Markdown Presentation Ecosystem https://marp.app/ Markdownでプレゼンテーション資料を簡単に作成できるツール。 VScodeの拡張機能として「Marp for VS
Code」があるため今回はこちらを使用。 Yuki Hattoriさんが開発。 https://github.com/sponsors/yhatt ©2023 株式会社ユーティル髙橋俊介 11

MarpでLT資料を作ろう今回用意するもの Visual Studio Code (必須) Marp for VS Code
(必須) Markdown Preview Mermaid（任意） GitHub アカウント（任意） ©2023 株式会社ユーティル髙橋俊介 12

MarpでLT資料を作ろう今回触れること Marpで出来ることの概要今回触れないこと MarkDownやMarp、Mermaidの記法について Marpのテーマファイル作成やGitHub Actionsの設定などの踏み込んだ部分 13

MarpでLT資料を作ろう効率的に使うための準備 VSCodeの設定で markdown.marp.enableHtml で検索して、checkを入れておくことでHTML を認識できるようにしておく。 14

MarpでLT資料を作ろう基本的にMD記法なら何でも書ける【表サンプル】 ID name created_at 1 hogehoge 2023-09-01 00:00:00
2 fugafuga 2023-09-01 19:00:00 ©2023 株式会社ユーティル髙橋俊介 15

MarpでLT資料を作ろう Mermaidも使える料理人フライパン火が通るまで待つお肉を焼く焼き上がり料理人フライパン 16

MarpでLT資料を作ろう特定のページだけスタイル変更したい表示を変えたいページに <style scoped> 要素{ セレクタ: プロパティ; } </style>
を挿入することでscopedとしてCSSも割り当てられる。 ©2023 株式会社ユーティル髙橋俊介 17

MarpでLT資料を作ろう Marpを出力単純に出力するだけであればVSCode上で出力可能。 18

MarpでLT資料を作ろう Marpを出力 VSCodeの設定で markdown.marp.exportType を開けば HTML/CSS PDF PowerPoint ドキュメントと出力形式を選択することも可能。
19

MarpでLT資料を作ろう公開まで自動化したい @marp-team/marp-cliとGitHub Actionsを使って、Mergeすることでスライドとして公開することも可能。 ※ 「Marp-cli GitHub Actions」などで調べると色々な方々が記事にされている。 ©2023
株式会社ユーティル髙橋俊介 20

まとめ LTはMarpを使って資料作成に時間を掛け過ぎない。使い慣れてるMarkDownでサクサク書けるのでお手軽。テーマ用CSSを作って使いまわせるようにしておくことで更に効率化も可能。 GitHubなどで管理しておくと楽になる。履歴管理しやすいのがメリットとして大きい。 GitHub Actions使って公開まで自動化などもできる。 ©2023 株式会社ユーティル
髙橋俊介 21

Marpで資料を作ってLTへの参加ハードルを下げる

Marpで資料を作ってLTへの参加ハードルを下げる

髙橋俊介

Other Decks in Technology

Featured

Transcript