Marpを使って登壇資料を作る

社内勉強会でしようしたMarpについての資料です。

1. Marpを使って登壇資料を作る 2024-05-29 月末LT会
2. matsumoto ▪▪▪でソフトウェアエンジニアをしています。 ▪▪▪さん, ▪▪▪さん, ▪▪▪さん, ▪▪▪さんらと関わること が多いです。 技術広報もしています ブログや登壇を みなさん と一緒にやっていきたいです 自己紹介 ©2024 estie, inc. 1
3. 1. Marpとは？ 2. Marpの使用例 目次 ©2024 estie, inc. 2
4. 1. Marpとは？
5. Marpの特徴 Markdownをスライドっぽい見た目にしてくれるツール OSS VS Codeの拡張機能がある 1. Marpとは？ ©2024 estie, inc. 4
6. このスライドはMarpで作成しています パワポを見ながらCSSを私が書いているので、見た目が少し変かも しれません。 1. Marpとは？ ©2024 estie, inc. 5
7. 2. Marpの使用例
8. シンタックスハイライトできます！ fn hello_world() { println!("Hello, world!"); } echo "Hello, world!" SELECT * FROM users; name: John Doe age: 30 2. Marpの使用例 ©2024 estie, inc. 7
9. 数式出せます！(KaTeXで動いてます) インライン( )もディスプレイもいけます I ​ = xx ​ y f(x, y) ⋅ ∫ ∫ R 2 dydx f(x) = ​ ​ (ξ) e dξ ∫ −∞ ∞ f ^ 2πiξx 2. Marpの使用例 ax + 2 bc + c ©2024 estie, inc. 8
10. 自前のCSS使えます: CSS こういうのを書く /* @theme estie_dev_lt */ @import 'gaia'; @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro&display=swap'); :root { background-color: white; color: black } section { /* 右上のロゴ */ background-image: url("./estie_logo_horizontal.svg"); background-position: right 30px top 22px; background-repeat: no-repeat; } 2. Marpの使用例 ©2024 estie, inc. 9
11. 自前のCSS使えます: VS Codeの設定 setting.jsonにテーマcssのパスを指定する { "markdown.marp.mathTypesetting": "katex", "markdown.marp.themes": [ "./estie_dev_lt.css" ] } VS Codeが開いているディレクトリからの相対パスを指定する。 （そんな事ある？） 2. Marpの使用例 ©2024 estie, inc. 10
12. 自前のCSS使えます: Markdown側で設定 frontmatterにテーマ名を指定する --- marp: true theme: estie_dev_lt --- 2. Marpの使用例 ©2024 estie, inc. 11
13. スライドのタイプはコメントで指定する <!-- header: "目次" _class: toc --> とか <!-- _class: section_title header: "2. Marpの使用例" --> 2. Marpの使用例 ©2024 estie, inc. 12
14. HTMLタグを使う HTMLタグを使うと左右分割などもできます。 echo "これが" echo "一番" echo "落ち着く" やりたかったのはこういうレイ アウトでした。実家のような 安心感があります。 fn main(){ println!("ほんま"); println!("それ"); println!("な"); } よく使う左右分割コードブロック のレイアウト そこまでするか？という気持ちもあるが、一応できるよ。 2. Marpの使用例 ©2024 estie, inc. 13
15. 左右分割の作り方 ### HTMLタグを使う <!-- _class: split --> <div class="split_content"> <div class="left">hogehoge</div> <div class="right">fugafuga</div> </div> section.split div.split_content { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; } section.split div.left { width: 48%; } section.split div.right { width: 48%; } 2. Marpの使用例 ©2024 estie, inc. 14
16. まとめ
17. 良し悪しあるが、使えそう Markdownでスライドを作れる CSSでestieのスライド風にもできそう 編集できるpptxでは出力できない まとめ ©2024 estie, inc. 16