Slide 1
Slide 1 text
Marpを使って登壇資料を作る
2024-05-29 月末LT会
Slide 2
Slide 2 text
matsumoto
■■■でソフトウェアエンジニアをしています。
■■■さん, ■■■さん, ■■■さん, ■■■さんらと関わること
が多いです。
技術広報もしています
ブログや登壇を みなさん と一緒にやっていきたいです
自己紹介
©2024 estie, inc.
1
Slide 3
Slide 3 text
1. Marpとは？
2. Marpの使用例
目次
©2024 estie, inc.
2
Slide 4
Slide 4 text
1. Marpとは？
Slide 5
Slide 5 text
Marpの特徴
Markdownをスライドっぽい見た目にしてくれるツール
OSS
VS Codeの拡張機能がある
1. Marpとは？
©2024 estie, inc.
4
Slide 6
Slide 6 text
このスライドはMarpで作成しています
パワポを見ながらCSSを私が書いているので、見た目が少し変かも
しれません。
1. Marpとは？
©2024 estie, inc.
5
Slide 7
Slide 7 text
2. Marpの使用例
Slide 8
Slide 8 text
シンタックスハイライトできます！
fn hello_world() {
println!("Hello, world!");
}
echo "Hello, world!"
SELECT * FROM users;
name: John Doe
age: 30
2. Marpの使用例
©2024 estie, inc.
7
Slide 9
Slide 9 text
数式出せます！(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
Slide 10
Slide 10 text
自前の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
Slide 11
Slide 11 text
自前の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
Slide 12
Slide 12 text
自前のCSS使えます: Markdown側で設定
frontmatterにテーマ名を指定する
---
marp: true
theme: estie_dev_lt
---
2. Marpの使用例
©2024 estie, inc.
11
Slide 13
Slide 13 text
スライドのタイプはコメントで指定する
とか
2. Marpの使用例
©2024 estie, inc.
12
Slide 14
Slide 14 text
HTMLタグを使う
HTMLタグを使うと左右分割などもできます。
echo "これが"
echo "一番"
echo "落ち着く"
やりたかったのはこういうレイ
アウトでした。実家のような
安心感があります。
fn main(){
println!("ほんま");
println!("それ");
println!("な");
}
よく使う左右分割コードブロック
のレイアウト
そこまでするか？という気持ちもあるが、一応できるよ。
2. Marpの使用例
©2024 estie, inc.
13
Slide 15
Slide 15 text
左右分割の作り方
### HTMLタグを使う
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
hogehoge
fugafuga
Slide 16
Slide 16 text
まとめ
Slide 17
Slide 17 text
良し悪しあるが、使えそう
Markdownでスライドを作れる
CSSでestieのスライド風にもできそう
編集できるpptxでは出力できない
まとめ
©2024 estie, inc.
16