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.3k
Marpを使って登壇資料を作る
社内勉強会でしようしたMarpについての資料です。
Kentaro Matsumoto
September 12, 2024
Tweet
Share
More Decks by Kentaro Matsumoto
See All by Kentaro Matsumoto
claude_code.pdf
matsu7874
5
6.8k
Generate a rust client code by OpenAPI Generator
matsu7874
0
520
ざっと理解するRust 2024 Edition
matsu7874
0
1.5k
プリントデバッグを失敗させないテクニック
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
ヘブンバーンズレッドにおける、世界観を活かしたミニゲーム企画の作り方
gree_tech
PRO
0
390
Grafana MCPサーバーによるAIエージェント経由でのGrafanaダッシュボード動的生成
hamadakoji
1
880
Jaws-ug名古屋_LT資料_20250829
azoo2024
3
200
新規案件の立ち上げ専門チームから見たAI駆動開発の始め方
shuyakinjo
0
620
Vault meets Kubernetes
mochizuki875
0
150
AI時代に非連続な成長を実現するエンジニアリング戦略
sansantech
PRO
3
870
現場が抱える様々な問題は “組織設計上” の問題によって生じていることがある / Team-oriented Organization Design 20250827
mtx2s
7
68k
「守る」から「進化させる」セキュリティへ ~AWS re:Inforce 2025参加報告~ / AWS re:Inforce 2025 Participation Report
yuj1osm
1
180
『FailNet~やらかし共有SNS~』エレベーターピッチ
yokomachi
1
190
Browser
recruitengineers
PRO
6
2k
ヘブンバーンズレッドのレンダリングパイプライン刷新
gree_tech
PRO
0
400
Oracle Cloud Infrastructure:2025年8月度サービス・アップデート
oracle4engineer
PRO
0
160
Featured
See All Featured
Building a Modern Day E-commerce SEO Strategy
aleyda
43
7.5k
The Invisible Side of Design
smashingmag
301
51k
A designer walks into a library…
pauljervisheath
207
24k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
61k
Fireside Chat
paigeccino
39
3.6k
Why Our Code Smells
bkeepers
PRO
339
57k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
Become a Pro
speakerdeck
PRO
29
5.5k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
358
30k
The Pragmatic Product Professional
lauravandoore
36
6.8k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Making Projects Easy
brettharned
117
6.4k
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