{ "componentChunkName": "component---src-templates-blog-post-js", "path": "/2022-08-24_marp-cli/", "result": {"data":{"site":{"siteMetadata":{"title":"365"}},"markdownRemark":{"id":"6c25f7c2-e272-52de-a91d-6fb4d4c8e321","excerpt":"最近 marp で資料を作る機会は増え marp-cli を使っているので簡単なまとめ マークダウンで資料作れるのは非常に便利で量産もできる Marp for VS Code を使えば VSCode でプレビューや書き出しもできるので入れておくと便利 インストール homebrew なら下記で OK 書き方 Front…","html":"

最近 marp で資料を作る機会は増え marp-cli を使っているので簡単なまとめ
\nマークダウンで資料作れるのは非常に便利で量産もできる

\n

Marp for VS Code を使えば VSCode でプレビューや書き出しもできるので入れておくと便利

\n

インストール

\n

homebrew なら下記で OK

\n
$ brew install marp-cli\n$ marp -v\n@marp-team/marp-cli v2.1.2 (w/ @marp-team/marp-core v3.3.2)
\n

書き方

\n

Front Matter

\n

まずは Front Matter を書いて、 marp を使う旨やデザインのテーマなどを決める

\n
---\nmarp: true\ntheme: default\nclass: invert\npaginate: true\n---
\n\n

内容

\n

見出しが文字となり、罫線がページ区切りとなる

\n
\n# marp で LT 資料爆速作成 🏃💨\n## めっちゃ便利\n\n---\n\n# みなさんマークダウン好きですか？\n# 自分は大好きです\n
\n

こんな書き出すとこんな感じになる

\n

\n \n \n \n \n

\n

\n \n \n \n \n

\n

画像

\n

マークダウンと同じ要領で読み込めば OK
\nただし細かい画像の制御はできないが、簡単な操作は画像タイトルに書けばできる

\n
\n# Sample Image\n\n![sample image](./images/sample_image.png)\n\n---\n\n# Sample Image\n\n![width:512](./images/sample_image.png)\n
\n

\n \n \n \n \n

\n

\n \n \n \n \n

\n

PDF に書き出し

\n

発表時やチャットで共有するために書き出しをする

\n
$ marp --pdf /path/to/index.md\n$ ls /path/to/\nindex.md        index.pdf
\n

もし画像を読み込んでいる場合は --allow-local-files オプションが必要なので忘れずに
\n(v1.4.1 の時は使わずに読み込めていた気がするが、公式の README にはオプションが存在していたので気の所為だった？)

\n
$ marp --pdf --allow-local-files /path/to/index.md
\n

ドキュメント

\n

他にもいろいろできるので下記を参照

\n\n

helloworld リポジトリにも触ったの push してます

\n","frontmatter":{"title":"marp-cli をいろいろ触る","date":"2022/08/24","description":null}},"previous":{"fields":{"slug":"/2022-07-24_vpn_gate/"},"frontmatter":{"title":"IP アドレスでアクセス制限された Web ページがあったので VPN で接続してアクセスをする"}},"next":{"fields":{"slug":"/2022-09-01_change_git-init-default-branch/"},"frontmatter":{"title":"git init 時のデフォルトブランチを変更する"}}},"pageContext":{"id":"6c25f7c2-e272-52de-a91d-6fb4d4c8e321","previousPostId":"3c22e390-f029-51ec-ad2c-bb189f439309","nextPostId":"d0751a99-1256-5fed-a5a3-be9422eb6889"}}, "staticQueryHashes": ["2841359383","3257411868"]}