Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Marpを使って登壇資料を作る
Search
Kentaro Matsumoto
September 12, 2024
Technology
0
1.4k
Marpを使って登壇資料を作る
社内勉強会でしようしたMarpについての資料です。
Kentaro Matsumoto
September 12, 2024
Tweet
Share
More Decks by Kentaro Matsumoto
See All by Kentaro Matsumoto
claude_code.pdf
matsu7874
5
7k
Generate a rust client code by OpenAPI Generator
matsu7874
0
540
ざっと理解するRust 2024 Edition
matsu7874
0
1.6k
プリントデバッグを失敗させないテクニック
matsu7874
1
400
社外を巻き込んだ勉強会を定期開催するコツ
matsu7874
0
200
actix-webを使った開発のハマリポイントを避けたい
matsu7874
0
1.1k
our test strategy on actix-web app
matsu7874
0
1.6k
roadmap to rust 2024
matsu7874
0
2.1k
Rust tutorial for Pythonista
matsu7874
2
1.4k
Other Decks in Technology
See All in Technology
ZOZOのAI活用実践〜社内基盤からサービス応用まで〜
zozotech
PRO
0
180
Optuna DashboardにおけるPLaMo2連携機能の紹介 / PFN LLM セミナー
pfn
PRO
1
880
多様な事業ドメインのクリエイターへ 価値を届けるための営みについて
massyuu
1
250
組織観点からIAM Identity CenterとIAMの設計を考える
nrinetcom
PRO
1
180
PLaMoの事後学習を支える技術 / PFN LLMセミナー
pfn
PRO
9
3.8k
Where will it converge?
ibknadedeji
0
180
後進育成のしくじり〜任せるスキルとリーダーシップの両立〜
matsu0228
7
2.4k
職種別ミートアップで社内から盛り上げる アウトプット文化の醸成と関係強化/ #DevRelKaigi
nishiuma
2
140
SREとソフトウェア開発者の合同チームはどのようにS3のコストを削減したか?
muziyoshiz
1
100
研究開発部メンバーの働き⽅ / Sansan R&D Profile
sansan33
PRO
3
20k
非エンジニアのあなたもできる&もうやってる!コンテキストエンジニアリング
findy_eventslides
3
910
20250929_QaaS_vol20
mura_shin
0
110
Featured
See All Featured
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
9
850
GraphQLとの向き合い方2022年版
quramy
49
14k
How to Think Like a Performance Engineer
csswizardry
27
2k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.7k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
The Power of CSS Pseudo Elements
geoffreycrofte
79
6k
Code Review Best Practice
trishagee
72
19k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
Balancing Empowerment & Direction
lara
4
680
Raft: Consensus for Rubyists
vanstee
139
7.1k
Typedesign – Prime Four
hannesfritz
42
2.8k
jQuery: Nuts, Bolts and Bling
dougneiner
64
7.9k
Transcript
Marpを使って登壇資料を作る 2024-05-29 月末LT会
matsumoto ▪▪▪でソフトウェアエンジニアをしています。 ▪▪▪さん, ▪▪▪さん, ▪▪▪さん, ▪▪▪さんらと関わること が多いです。 技術広報もしています ブログや登壇を みなさん
と一緒にやっていきたいです 自己紹介 ©2024 estie, inc. 1
1. Marpとは? 2. Marpの使用例 目次 ©2024 estie, inc. 2
1. Marpとは?
Marpの特徴 Markdownをスライドっぽい見た目にしてくれるツール OSS VS Codeの拡張機能がある 1. Marpとは? ©2024 estie, inc.
4
このスライドはMarpで作成しています パワポを見ながらCSSを私が書いているので、見た目が少し変かも しれません。 1. Marpとは? ©2024 estie, inc. 5
2. Marpの使用例
シンタックスハイライトできます! fn hello_world() { println!("Hello, world!"); } echo "Hello, world!"
SELECT * FROM users; name: John Doe age: 30 2. Marpの使用例 ©2024 estie, inc. 7
数式出せます!(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
自前の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
自前の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
自前のCSS使えます: Markdown側で設定 frontmatterにテーマ名を指定する --- marp: true theme: estie_dev_lt --- 2.
Marpの使用例 ©2024 estie, inc. 11
スライドのタイプはコメントで指定する <!-- header: "目次" _class: toc --> とか <!-- _class:
section_title header: "2. Marpの使用例" --> 2. Marpの使用例 ©2024 estie, inc. 12
HTMLタグを使う HTMLタグを使うと左右分割などもできます。 echo "これが" echo "一番" echo "落ち着く" やりたかったのはこういうレイ アウトでした。実家のような
安心感があります。 fn main(){ println!("ほんま"); println!("それ"); println!("な"); } よく使う左右分割コードブロック のレイアウト そこまでするか?という気持ちもあるが、一応できるよ。 2. Marpの使用例 ©2024 estie, inc. 13
左右分割の作り方 ### 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
まとめ
良し悪しあるが、使えそう Markdownでスライドを作れる CSSでestieのスライド風にもできそう 編集できるpptxでは出力できない まとめ ©2024 estie, inc. 16