Pranaria-Marp

What is Marp?

• Marpとは、Markdownでslideを作ることができるライブラリです。
• HTMLベースのため、htmlタグ、javaScript、WebAssemblyを埋め込むことができます。

Coution

• 今回のプロジェクトは、vscodeを対象に作成しています。(Macで使えない機能があればissueください..)

Source

Zenn の本：Marp 入門〜応用｜ markdown でプレゼン資料を楽に素早く作って発表しようを参考に作成しました。 元のリポジトリはhttps://github.com/cohu-dev/marp-beginner-advanced.gitを参考にしてください。

About script

shellは変更して、

1. レイアウトをtemplateから選択できること
2. 作った時間を出力すること ができるようにしました。

About Library

• google chronium (pdf用。Linux。)
• @marp-team/marp-cli@latest (marpのcliライブラリ。)

Recommend VSCode-Extention

• Paste Image (https://marketplace.visualstudio.com/items?itemName=mushan.vscode-paste-image)
  • 画像貼り付けを効率化するライブラリ
• :emojisense: (https://marketplace.visualstudio.com/items?itemName=bierner.emojisense)
  • 絵文字挿入を効率化するライブラリ
• Markdown All in One (https://marketplace.visualstudio.com/items?itemName=yzhang.markdown-all-in-one)
  • Markdownの書きやすさ向上、表の挿入等の機能を使えるライブラリ
• Markdown Table Prettifier (https://marketplace.visualstudio.com/items?itemName=darkriszty.markdown-table-prettify)
  • 表をエディタ上でフォーマットするライブラリ

About usually stop

• htmlの埋め込みをするためにpackage.jsonに "html": trueを入れる必要があったこと ->必要なかった。
• pdf化するためにchroniumが必要だったこと

About command

• npm run dev: Viewerの表示
• npm run pdf: src下の.mdファイルを全てpdf化(名前を指定できるように直す予定)
• npm run pptx: src下の.mdファイルを全てpptx化(名前を指定できるように直す予定)

About GithubActions

今回はGithubPagesにデプロイしています。 都合に応じて、./github/workflowsのymlを変更してください。

Reference

• https://github.com/marp-team/marp-cli ⚖️公式ドキュメント
• https://zenn.dev/cota_hu/books/marp-beginner-advanced 📘zennの参考記事