Marp Tutorial

Oct 4, 20211 like5,335 views

Rui Watanabe

北村研Notion用

基本的な記法
# Heading tag
item1
item2
item3
Bold, 打消し, emoji
Blockquotes
など．Markdownの基本的な記法をサポート

詳しくは，Markdown記法チートシートを参照
2

Code
Inline

puts 'Marp'
Code block
Python
import numpy as np

print('Hello Marp')

C++
void main(){

printf("Hello Marpn");

return 0;

}

3

数式
レンダラーはKaTeXだが，いつものLaTeX形式で書ける

D(X∥FQ) s.t. f
, q ≥ 0 ∀i, j, k
F ,Q
min ik kj

⎝
⎛a
11
⋮
a
i1
⋮
a
n1
⋯
⋱
⋯
a
1i
a
ii
a
ni
⋯
⋱
⋯
a
1n
⋮
a
in
⋮
a
nn
⎠
⎞
4

Speaker notes
スライド内（ --- --- 間）のコメント文 <!-- --> は全て発表ノートとして認識され，

pptx出力する際や，Marp CLIのプレゼンターモードの時に表示される．
pptx変換やプレゼンターモードはNotionの方で解説
6

Directives
Marpのスライドプロパティを設定する属性

Directiveを <!-- --> で囲むか，一番先頭の --- --- 間に書き込む事で設定可能

また，それぞれの属性の頭にアンダースコア _ を付けることで，指定したページ限定
で有効になる（このスライドのコードを参照）
paginate
theme
header
footer
size

...etc
Doc：https://github.com/marp-team/marpit/blob/main/docs/directives.md
header

画像の挿入
![](画像のパス) で画像を挿入できる．[ ]内でサイズを変えたり，フィルタを掛けたり
できる（ https://marpit.marp.app/image-syntax ）

Marpの問題点として，画像の中央揃えが出来ないので，CSSで実装する必要がある
8

$画像の挿入 style: | img[alt~="center"] { display: block; margin: 0 auto; } [ ]内でcenterと指定することで，中央揃えになる ![center](<img_path>) 9$

Background
正直あまり使わない

![bg](画像のパス) で挿入

複数の画像を縦・横に並べることも可能
10

Background
左右分割も可能

Doc: https://marpit.marp.app/image-
syntax?id=slide-backgrounds
11

fontsizeとfontcolor
時としてフォントのサイズと色を変えたい場合があるが，Marpはネイティブで対応し
ていないので，HTMLのstyleで指定する必要がある．
HTMLタグを使用するための設定
VSCodeの「設定」から，「marp html」を検索し，「Marp: Enable HTML」に
12

fontsizeとfontcolor
HTMLのstyle要素を使用することで，フォントサイズや色を指定可能
<span style="font-size:フォントサイズ">文字</span>

<span style="color:色;">文字</span>

fontsize
small
big
28pt
fontcolor
red
blue
orange
13

以上がMarpの基本的な使い方です．

pptxの出力やMarp Cliの使用方法はNotionに書いてあります．

また，CSSを用いたカスタムテーマの作成方法は別途ナレッジを書く予定です．
14

参考になる記事とか
Marp
Marpit
Marp Cli
GitHub Repo
【VS Code + Marp】Markdownから爆速・自由自在なデザインで、プレゼンスラ
イドを作る
15

本スライドは、弊社の梅本により弊社内の技術勉強会で使用されたものです。近年注目を集めるアーキテクチャーである「Transformer」の解説スライドとなっております。 "Arithmer Seminar" is weekly held, where professionals from within and outside our company give lectures on their respective expertise. The slides are made by the lecturer from outside our company, and shared here with his/her permission. Arithmer株式会社は東京大学大学院数理科学研究科発の数学の会社です。私達は現代数学を応用して、様々な分野のソリューションに、新しい高度AIシステムを導入しています。AIをいかに上手に使って仕事を効率化するか、そして人々の役に立つ結果を生み出すのか、それを考えるのが私たちの仕事です。 Arithmer began at the University of Tokyo Graduate School of Mathematical Sciences. Today, our research of modern mathematics and AI systems has the capability of providing solutions when dealing with tough complex issues. At Arithmer we believe it is our job to realize the functions of AI through improving work efficiency and producing more useful results for society.

【メタサーベイ】基盤モデル / Foundation Modelscvpaper. challenge

DockerコンテナでGitを使うKazuhiro Suga

ソーシャルゲームのためのデータベース設計Yoshinori Matsunobu

Marp for VS Code で作る PowerPoint スライドIosif Takakura

Rustに触れて私のPythonはどう変わったかShunsukeNakamura17

Swin Transformer (ICCV'21 Best Paper) を完璧に理解する資料Yusuke Uchida

勉強か？趣味か？人生か？―プログラミングコンテストとはTakuya Akiba

入門 Kubeflow ～Kubernetesで機械学習をはじめるために～（NTT Tech Conference #4 講演資料）NTT DATA Technology & Innovation

[DL輪読会]Focal Loss for Dense Object DetectionDeep Learning JP

ナレッジグラフ入門KnowledgeGraph

SSII2022 [SS1] ニューラル3D表現の最新動向〜ニューラルネットでなんでも表せる？？〜SSII

6/9 (木) 14:15～14:45 メイン会場講師：加藤大晴氏（株式会社Preferred Networks）概要：点群/メッシュ/ボクセルなどの従来的な3D表現に代わってニューラルネットによる陰関数で三次元データを表してしまう手法が近年登場し、様々なタスクで目覚ましい成果を挙げ大きな注目を集めている。この表現は、計算コストが高い代わりに柔軟性が高くさまざまなものをシンプルかつコンパクトに表現できることが知られている。本講演では、その基礎、応用、最先端の状況について、代表的な研究を広く紹介する。

【DL輪読会】Llama 2: Open Foundation and Fine-Tuned Chat ModelsDeep Learning JP

PFN のオンプレML基盤の取り組み / オンプレML基盤 on Kubernetes 〜PFN、ヤフー〜Preferred Networks

PFNは，「現実世界を計算可能にする」をVisionとして，膨大な計算量を必要とするシミュレーションや深層学習などの計算ワークロードを実行するためのオンプレML基盤を持っています．この取り組みについて、「使いやすい環境」、「リソースの効率的かつフェアな利用」、「信頼性・運用省力化」の観点から紹介します。本イベント「オンプレML基盤 on Kubernetes 〜PFN、ヤフー〜」では、オンプレミスの Kubernetes クラスタ上に構築された機械学習基盤を持つ PFN とヤフーのエンジニアが自社での取り組みについて語り尽くします！イベントサイト: https://ml-kubernetes.connpass.com/event/239859/

Python 3.9からの新定番zoneinfoを使いこなそうRyuji Tsutsui

Layer Normalization@NIPS+読み会・関西Keigo Nishida

分散システムの限界について知ろうShingo Omura

↓↓↓↓訂正あります。↓↓↓↓ 2018/07/02に株式会社エフコード社内で行われた勉強会のスライドです。訂正版(随時更新中): https://docs.google.com/presentation/d/15HOMfAbtdWwO48njcB8IdkN3kVAMu3wsmZo0O3S-f_4/edit?usp=sharing 専門家による資料・専門家向けの資料ではありません。自分自身で学習し、論文・文献等を読解してまとめた内容となります。間違い等あるかもしれませんが、あれば是非コメント頂ければと思います。【訂正事項】スライド16: 誤：たった一つのプロセスが故障しただけでも有限時間で合意できない正：たった一つのプロセスが故障しうるだけでも有限時間で合意できないスライド20: 誤: 重要: あるschedule σ1, σ2 がdisjoint (nodeが被ってない) なら可換正: 重要: あるschedule σ1, σ2 がdisjoint (processが被ってない) なら可換スライド24, 34 誤: “分散システムについて語らせてくれ” 熊崎宏樹 NTTデータテクノロジーカンファレンス2017 #2 正: “分散システムについて語らせてくれ” 熊崎宏樹 NTT Tech Conference #2

モデル高速化百選Yusuke Uchida

画像センシングシンポジウム (SSII 2019) の企画セッション「深層学習の高速化〜高速チップ、分散学習、軽量モデル〜」の講演資料です。深層学習モデルを高速化する下記6種類の手法の解説です。 - 畳み込みの分解 (Factorization) - 枝刈り (Pruning) - アーキテクチャ探索 (Neural Architecture Search; NAS) - 早期終了、動的計算グラフ (Early Termination, Dynamic Computation Graph) - 蒸留 (Distillation) - 量子化 (Quantization)

RaftPreferred Networks

初心者向けMongoDBのキホン！Tetsutaro Watanabe

BuildKitによる高速でセキュアなイメージビルドAkihiro Suda

メタプログラミングって何だろうKota Mizushima

【DL輪読会】SimCSE: Simple Contrastive Learning of Sentence Embeddings (EMNLP 2021)Deep Learning JP

Pythonの理解を試みる〜バイトコードインタプリタを作成する〜Preferred Networks

研究効率化Tips Ver.2cvpaper. challenge

cvpaper.challengeはコンピュータビジョン分野の今を映し、トレンドを創り出す挑戦です。論文サマリ・アイディア考案・議論・実装・論文投稿に取り組み、凡ゆる知識を共有しています。 http://xpaperchallenge.org/cv/ 本資料はViEW2021チュートリアルセッション「最新研究の始め方」のプレゼン素材です。また、xpaper.challengeの2020年末ワークショップとしてプレゼンした「研究効率化Tips」の拡張版です。本資料では3社12研究室300ページにわたるノウハウの詰め合わせです。 VIEW2021のチュートリアルセッションでは時間の制限があるため、こちらの資料から一部抜粋して発表を行うことになりますが、VIEW2021チュートリアルセッションの方にも足を運んでいただければ幸いです。 VIEW2021チュートリアルセッション：http://view.tc-iaip.org/view/2021/speaker/ts1 ViEW2021参加登録：http://view.tc-iaip.org/view/2021/registration

【メタサーベイ】数式ドリブン教師あり学習cvpaper. challenge

SSII2022 [TS1] Transformerの最前線〜畳込みニューラルネットワークの先へ〜SSII

6/8 (水) 09:45～10:55メイン会場講師：牛久祥孝氏　　（オムロンサイニックエックス株式会社）概要： 2017年に機械翻訳を対象として提案されたTransformerは、従来の畳込みや再帰を排して自己注意機構を活用したニューラルネットワークである。2019年頃からコンピュータビジョン分野でも急速に応用が進んでおり、より柔軟かつ高精度なネットワーク構造としての地位を確立しつつある。本チュートリアルでは、Transformerおよびその周辺のネットワーク構造について、コンピュータビジョンへの応用を中心とした最前線を概説する。

More Related Content

What's hot (20)

勉強か？趣味か？人生か？―プログラミングコンテストとはTakuya Akiba

入門 Kubeflow ～Kubernetesで機械学習をはじめるために～（NTT Tech Conference #4 講演資料）NTT DATA Technology & Innovation

[DL輪読会]Focal Loss for Dense Object DetectionDeep Learning JP

ナレッジグラフ入門KnowledgeGraph

SSII2022 [SS1] ニューラル3D表現の最新動向〜ニューラルネットでなんでも表せる？？〜SSII

【DL輪読会】Llama 2: Open Foundation and Fine-Tuned Chat ModelsDeep Learning JP

PFN のオンプレML基盤の取り組み / オンプレML基盤 on Kubernetes 〜PFN、ヤフー〜Preferred Networks

Python 3.9からの新定番zoneinfoを使いこなそうRyuji Tsutsui

Layer Normalization@NIPS+読み会・関西Keigo Nishida

分散システムの限界について知ろうShingo Omura

モデル高速化百選Yusuke Uchida

RaftPreferred Networks

初心者向けMongoDBのキホン！Tetsutaro Watanabe

BuildKitによる高速でセキュアなイメージビルドAkihiro Suda

メタプログラミングって何だろうKota Mizushima

【DL輪読会】SimCSE: Simple Contrastive Learning of Sentence Embeddings (EMNLP 2021)Deep Learning JP

Pythonの理解を試みる〜バイトコードインタプリタを作成する〜Preferred Networks

研究効率化Tips Ver.2cvpaper. challenge

【メタサーベイ】数式ドリブン教師あり学習cvpaper. challenge

SSII2022 [TS1] Transformerの最前線〜畳込みニューラルネットワークの先へ〜SSII

勉強か？趣味か？人生か？―プログラミングコンテストとはTakuya Akiba

入門 Kubeflow ～Kubernetesで機械学習をはじめるために～（NTT Tech Conference #4 講演資料）NTT DATA Technology & Innovation

[DL輪読会]Focal Loss for Dense Object DetectionDeep Learning JP

ナレッジグラフ入門KnowledgeGraph

SSII2022 [SS1] ニューラル3D表現の最新動向〜ニューラルネットでなんでも表せる？？〜SSII

【DL輪読会】Llama 2: Open Foundation and Fine-Tuned Chat ModelsDeep Learning JP

PFN のオンプレML基盤の取り組み / オンプレML基盤 on Kubernetes 〜PFN、ヤフー〜Preferred Networks

Python 3.9からの新定番zoneinfoを使いこなそうRyuji Tsutsui

Layer Normalization@NIPS+読み会・関西Keigo Nishida

分散システムの限界について知ろうShingo Omura

モデル高速化百選Yusuke Uchida

RaftPreferred Networks

初心者向けMongoDBのキホン！Tetsutaro Watanabe

BuildKitによる高速でセキュアなイメージビルドAkihiro Suda

メタプログラミングって何だろうKota Mizushima

【DL輪読会】SimCSE: Simple Contrastive Learning of Sentence Embeddings (EMNLP 2021)Deep Learning JP

Pythonの理解を試みる〜バイトコードインタプリタを作成する〜Preferred Networks

研究効率化Tips Ver.2cvpaper. challenge

【メタサーベイ】数式ドリブン教師あり学習cvpaper. challenge

SSII2022 [TS1] Transformerの最前線〜畳込みニューラルネットワークの先へ〜SSII

Marp Tutorial

1. Marp入門 2021/10/04 版 1

2. 基本的な記法 # Heading tag item1 item2 item3 Bold, 打消し, emoji Blockquotes など．Markdownの基本的な記法をサポート詳しくは，Markdown記法チートシートを参照 2

3. Code Inline puts 'Marp' Code block Python import numpy as np print('Hello Marp') C++ void main(){ printf("Hello Marpn"); return 0; } 3

4. 数式レンダラーはKaTeXだが，いつものLaTeX形式で書ける D(X∥FQ) s.t. f , q ≥ 0 ∀i, j, k F ,Q min ik kj ⎝ ⎛a 11 ⋮ a i1 ⋮ a n1 ⋯ ⋱ ⋯ a 1i a ii a ni ⋯ ⋱ ⋯ a 1n ⋮ a in ⋮ a nn ⎠ ⎞ 4

5. Marpの機能 5

6. Speaker notes スライド内（ --- --- 間）のコメント文  は全て発表ノートとして認識され， pptx出力する際や，Marp CLIのプレゼンターモードの時に表示される． pptx変換やプレゼンターモードはNotionの方で解説 6

7. Directives Marpのスライドプロパティを設定する属性 Directiveを  で囲むか，一番先頭の --- --- 間に書き込む事で設定可能また，それぞれの属性の頭にアンダースコア _ を付けることで，指定したページ限定で有効になる（このスライドのコードを参照） paginate theme header footer size ...etc Doc：https://github.com/marp-team/marpit/blob/main/docs/directives.md header

8. 画像の挿入 ![](画像のパス) で画像を挿入できる．[ ]内でサイズを変えたり，フィルタを掛けたりできる（ https://marpit.marp.app/image-syntax ） Marpの問題点として，画像の中央揃えが出来ないので，CSSで実装する必要がある 8

9. 画像の挿入 style: | img[alt~="center"] { display: block; margin: 0 auto; } [ ]内でcenterと指定することで，中央揃えになる ![center](<img_path>) 9

10. Background 正直あまり使わない ![bg](画像のパス) で挿入複数の画像を縦・横に並べることも可能 10

11. Background 左右分割も可能 Doc: https://marpit.marp.app/image- syntax?id=slide-backgrounds 11

12. fontsizeとfontcolor 時としてフォントのサイズと色を変えたい場合があるが，Marpはネイティブで対応していないので，HTMLのstyleで指定する必要がある． HTMLタグを使用するための設定 VSCodeの「設定」から，「marp html」を検索し，「Marp: Enable HTML」に 12

13. fontsizeとfontcolor HTMLのstyle要素を使用することで，フォントサイズや色を指定可能 <span style="font-size:フォントサイズ">文字</span> <span style="color:色;">文字</span> fontsize small big 28pt fontcolor red blue orange 13

14. 以上がMarpの基本的な使い方です． pptxの出力やMarp Cliの使用方法はNotionに書いてあります．また，CSSを用いたカスタムテーマの作成方法は別途ナレッジを書く予定です． 14

15. 参考になる記事とか Marp Marpit Marp Cli GitHub Repo 【VS Code + Marp】Markdownから爆速・自由自在なデザインで、プレゼンスライドを作る 15

Marp Tutorial

Recommended

More Related Content

What's hot (20)

Marp Tutorial