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
E2Eテスト設計_自動化のリアル___Playwrightでの実践とMCPの試み__AIによるテスト観点作成_.pdf
findy_eventslides
0
120
Escaping_the_Kraken_-_October_2025.pdf
mdalmijn
0
130
Why React!?? Next.jsそしてReactを改めてイチから選ぶ
ypresto
10
4.5k
10年の共創が示す、これからの開発者と企業の関係 ~ Crossroad
soracom
PRO
1
190
KMP の Swift export
kokihirokawa
0
330
AI Agentと MCP Serverで実現する iOSアプリの 自動テスト作成の効率化
spiderplus_cb
0
500
Findy Team+のSOC2取得までの道のり
rvirus0817
0
330
AI時代だからこそ考える、僕らが本当につくりたいスクラムチーム / A Scrum Team we really want to create in this AI era
takaking22
6
3.4k
いまさら聞けない ABテスト入門
skmr2348
1
200
Large Vision Language Modelを用いた 文書画像データ化作業自動化の検証、運用 / shibuya_AI
sansan_randd
0
110
生成AIで「お客様の声」を ストーリーに変える 新潮流「Generative ETL」
ishikawa_satoru
1
310
20201008_ファインディ_品質意識を育てる役目は人かAIか___2_.pdf
findy_eventslides
0
140
Featured
See All Featured
A better future with KSS
kneath
239
17k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
132
19k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
6.1k
Imperfection Machines: The Place of Print at Facebook
scottboms
269
13k
Designing Experiences People Love
moore
142
24k
Intergalactic Javascript Robots from Outer Space
tanoku
273
27k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
45
2.5k
The Cost Of JavaScript in 2023
addyosmani
53
9k
Why You Should Never Use an ORM
jnunemaker
PRO
59
9.6k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.6k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
9
850
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