Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Marp Tips !
ひげ
What is Marp ?
yhatt さん作
MDからスライドを生成してくれるソフト
Electron で書かれてる
GitHub にソースコードが公開されてる
このスライド
Marp の Tips 集
英語であれば yhatt さんのがある
GitHub にも詳しく書いてある
実は自分の記事用の資料
自分で書いたテーマを使ってます
<!-- $theme: olive -->
Markdown 記法
ベースはGithub Flavored Markdown
--- でスライドを区切る
Deckest に寄せてるらしい
## What is [Marp](https://yhatt.github.io/marp/) ?...
テーマの変更
マークダウンの頭に <!-- $theme: aaa -->
<!-- $theme: olive -->
# Marp Tips !
### ひげ
元からあるのは default の gaia の 2 つ
カラースキーマの変更
変更したいスライドの頭に <!-- *templat: aaa -->
<!-- template: invert -->
## What is [Marp](https://yhatt.github.io/marp/) ...
PDF へのエクスポート
ツールバーの file -> Export Slides as PDF
Ctrl + Shift + E でも良い
画像に関するオプション
![70%](hoge.jpg) で拡縮変更
![center](hoge.jpg) でセンタリング
![bg](hoge.jpg) で背景に設定
![fit](hoge.jpg) でサイズを合わせてくれる
![70% ...
数式
$ ... $ や $$ ... $$ で Latex の数式をレンダリング
KaTex を使ってる
なので完全に LaTex 表記をサポートしていない
可能な表記
e = −1
$$ e ^ {i pi} = -1 $$
iπ
サイズに関する設定
<!-- $width: 12in -->
<!-- $height: 6in -->
<!-- $size: 16:9 -->
でサイズを変更できる
デフォルトでは <!-- $size: 4:3 -->
その他
Emoji をサポート
チートシート
==ハイライト== でハイライト
<!-- footer: this is footer --> でフッターを設定
* があるとそのスライドだけ付ける
<!-- page_number: true ...
現状できないこと
プレゼンテーションモード
対応予定?
テーマの作成(カスタム CSS)
現状のテーマのCSSをいじるのはできる
(README 参照)
もっといいのは対応予定?
ついてるエディタのショートカットをいじれない
Thank yhatt !
Marp always supported me.
So, I want to support you,
someday...
FIN
Upcoming SlideShare
Loading in …5
×

Marp Tips

Marp : https://yhatt.github.io/marp/

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all
  • Login to see the comments

Marp Tips

  1. 1. Marp Tips ! ひげ
  2. 2. What is Marp ? yhatt さん作 MDからスライドを生成してくれるソフト Electron で書かれてる GitHub にソースコードが公開されてる
  3. 3. このスライド Marp の Tips 集 英語であれば yhatt さんのがある GitHub にも詳しく書いてある 実は自分の記事用の資料 自分で書いたテーマを使ってます <!-- $theme: olive -->
  4. 4. Markdown 記法 ベースはGithub Flavored Markdown --- でスライドを区切る Deckest に寄せてるらしい ## What is [Marp](https://yhatt.github.io/marp/) ? - [yhatt](https://github.com/yhatt) さん作 - MDからスライドを生成してくれるソフト - [Electron](http://electron.atom.io/) で書かれてる - [GitHub](https://github.com/yhatt/marp)にソースコードが公開されてる --- ## このスライド
  5. 5. テーマの変更 マークダウンの頭に <!-- $theme: aaa --> <!-- $theme: olive --> # Marp Tips ! ### ひげ 元からあるのは default の gaia の 2 つ
  6. 6. カラースキーマの変更 変更したいスライドの頭に <!-- *templat: aaa --> <!-- template: invert --> ## What is [Marp](https://yhatt.github.io/marp/) ? - [yhatt](https://github.com/yhatt) さん作 - MDからスライドを生成してくれるソフト * を外すと以降すべてのスライドに反映される olive には default と invert と gaia の3種
  7. 7. PDF へのエクスポート ツールバーの file -> Export Slides as PDF Ctrl + Shift + E でも良い
  8. 8. 画像に関するオプション ![70%](hoge.jpg) で拡縮変更 ![center](hoge.jpg) でセンタリング ![bg](hoge.jpg) で背景に設定 ![fit](hoge.jpg) でサイズを合わせてくれる ![70% center](hoge.jpg) 空白区切りで複数指定か ![10%](./fig/marp.png) ![30% center](./fig/marp.png)
  9. 9. 数式 $ ... $ や $$ ... $$ で Latex の数式をレンダリング KaTex を使ってる なので完全に LaTex 表記をサポートしていない 可能な表記 e = −1 $$ e ^ {i pi} = -1 $$ iπ
  10. 10. サイズに関する設定 <!-- $width: 12in --> <!-- $height: 6in --> <!-- $size: 16:9 --> でサイズを変更できる デフォルトでは <!-- $size: 4:3 -->
  11. 11. その他 Emoji をサポート チートシート ==ハイライト== でハイライト <!-- footer: this is footer --> でフッターを設定 * があるとそのスライドだけ付ける <!-- page_number: true --> でページ番号を追加 デフォルトは false * があるとそのスライドだけ付ける this is footer 11
  12. 12. 現状できないこと プレゼンテーションモード 対応予定? テーマの作成(カスタム CSS) 現状のテーマのCSSをいじるのはできる (README 参照) もっといいのは対応予定? ついてるエディタのショートカットをいじれない
  13. 13. Thank yhatt ! Marp always supported me. So, I want to support you, someday... FIN

×