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.7k
Generate a rust client code by OpenAPI Generator
matsu7874
0
500
ざっと理解するRust 2024 Edition
matsu7874
0
1.4k
プリントデバッグを失敗させないテクニック
matsu7874
1
400
社外を巻き込んだ勉強会を定期開催するコツ
matsu7874
0
190
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.3k
Other Decks in Technology
See All in Technology
Intro to Software Startups: Spring 2025
arnabdotorg
0
250
リモートワークで心掛けていること 〜AI活用編〜
naoki85
0
150
プロダクトエンジニアリングで開発の楽しさを拡張する話
barometrica
0
160
MCP認可の現在地と自律型エージェント対応に向けた課題 / MCP Authorization Today and Challenges to Support Autonomous Agents
yokawasa
5
2.3k
✨敗北解法コレクション✨〜Expertだった頃に足りなかった知識と技術〜
nanachi
1
700
【OptimizationNight】数理最適化のラストワンマイルとしてのUIUX
brainpadpr
2
480
마라톤 끝의 단거리 스퍼트: 2025년의 AI
inureyes
PRO
1
740
Amazon Qで2Dゲームを作成してみた
siromi
0
140
専門分化が進む分業下でもユーザーが本当に欲しかったものを追求するプロダクトマネジメント/Focus on real user needs despite deep specialization and division of labor
moriyuya
1
1.3k
Amazon Bedrock AgentCoreのフロントエンドを探す旅 (Next.js編)
kmiya84377
1
140
AIのグローバルトレンド 2025 / ai global trend 2025
kyonmm
PRO
1
140
Instant Apps Eulogy
cyrilmottier
1
110
Featured
See All Featured
Building an army of robots
kneath
306
45k
Six Lessons from altMBA
skipperchong
28
3.9k
The World Runs on Bad Software
bkeepers
PRO
70
11k
Why Our Code Smells
bkeepers
PRO
337
57k
The Cult of Friendly URLs
andyhume
79
6.5k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3k
Docker and Python
trallard
45
3.5k
How to Think Like a Performance Engineer
csswizardry
25
1.8k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.6k
Automating Front-end Workflow
addyosmani
1370
200k
Mobile First: as difficult as doing things right
swwweet
223
9.9k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.8k
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