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
360
Marpを使って登壇資料を作る
社内勉強会でしようしたMarpについての資料です。
Kentaro Matsumoto
September 12, 2024
Tweet
Share
More Decks by Kentaro Matsumoto
See All by Kentaro Matsumoto
Generate a rust client code by OpenAPI Generator
matsu7874
0
280
ざっと理解するRust 2024 Edition
matsu7874
0
600
プリントデバッグを失敗させないテクニック
matsu7874
1
290
社外を巻き込んだ勉強会を定期開催するコツ
matsu7874
0
160
actix-webを使った開発のハマリポイントを避けたい
matsu7874
0
990
our test strategy on actix-web app
matsu7874
0
1.4k
roadmap to rust 2024
matsu7874
0
2k
Rust tutorial for Pythonista
matsu7874
2
1.2k
Mock testing with mockall
matsu7874
0
330
Other Decks in Technology
See All in Technology
非機能品質を作り込むための実践アーキテクチャ
knih
3
840
CustomCopを使ってMongoidのコーディングルールを整えてみた
jinoketani
0
220
Storage Browser for Amazon S3
miu_crescent
1
130
祝!Iceberg祭開幕!re:Invent 2024データレイク関連アップデート10分総ざらい
kniino
2
250
GitHub Copilot のテクニック集/GitHub Copilot Techniques
rayuron
24
11k
LINEヤフーのフロントエンド組織・体制の紹介【24年12月】
lycorp_recruit_jp
0
530
PHPからGoへのマイグレーション for DMMアフィリエイト
yabakokobayashi
1
160
第3回Snowflake女子会_LT登壇資料(合成データ)_Taro_CCCMK
tarotaro0129
0
180
私なりのAIのご紹介 [2024年版]
qt_luigi
1
120
スタートアップで取り組んでいるAzureとMicrosoft 365のセキュリティ対策/How to Improve Azure and Microsoft 365 Security at Startup
yuj1osm
0
210
多領域インシデントマネジメントへの挑戦:ハードウェアとソフトウェアの融合が生む課題/Challenge to multidisciplinary incident management: Issues created by the fusion of hardware and software
bitkey
PRO
2
100
アップデート紹介:AWS Data Transfer Terminal
stknohg
PRO
0
180
Featured
See All Featured
What's in a price? How to price your products and services
michaelherold
243
12k
Reflections from 52 weeks, 52 projects
jeffersonlam
347
20k
We Have a Design System, Now What?
morganepeng
51
7.3k
Optimising Largest Contentful Paint
csswizardry
33
3k
The Cult of Friendly URLs
andyhume
78
6.1k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
111
49k
Navigating Team Friction
lara
183
15k
The Language of Interfaces
destraynor
154
24k
BBQ
matthewcrist
85
9.4k
How To Stay Up To Date on Web Technology
chriscoyier
789
250k
VelocityConf: Rendering Performance Case Studies
addyosmani
326
24k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
59k
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