marp-speee-theme

Speee 用の marp テーマ

使用例

使い方

利用上の注意

Speee 社員以外または株式会社 Speee の企業活動ではない目的でこのテーマを利用する場合は描画結果に株式会社 Speee の企業ロゴが表示されないよう画像ファイルを削除してください。 詳細はライセンスについてを参照

VS Codeの場合

1. 【VS Code + Marp】Markdownから爆速・自由自在なデザインで、プレゼンスライドを作る - Qiitaを参考にVS Codeの設定へ https://raw.githubusercontent.com/speee/marp-speee-theme/main/marp-themes/speee.css を設定
2. example.md をコピーまたは参考にしてmarkdownファイルを作成する

Marp CLIの場合

ローカルにテーマファイルをダウンロードして使用する。

curl -o speee.css https://raw.githubusercontent.com/speee/marp-speee-theme/main/marp-themes/speee.css
marp example.md -o example.pptx --theme-set speee.css --allow-local-files

開発方法

依存物

1. npmとmakeをインストールする
2. make init で必要なパッケージをインストールする

開発手順

1. vscode で marp 拡張をインストール
2. make csswatch で scss が変更されたらすぐ反映されるようにする
3. make marpwatch で css や markdown が変更されたらすぐ反映されるようにする
4. example/example.md を開き、vscode でプレビューしながらマークダウンファイルと SCSS を編集する

設計ノート

コントリビュートしてもらうときは以下を一読した上で機能追加・修正方向を考えてもらうと助かります 💦

フォントは基本的にGoogle Fontを使用する

フォント指定でたくさん指定してfallbackを設定するのはウェブサイトでは有効だけど、marpでは人によってフォントが違う原因になり厄介になりやすい。 またテストでの画像比較も問題が起きやすくなる。 ウェブフォントの重いというデメリットもmarpの場合は気にならないので、ポータビリティに全振りして基本ウェブフォントとする。

このリポジトリはCICDやgitのpre hookによるコントリビュートホスピタリティに全振りしている

だからかなりコントリビュートしやすくなっているはず。なるべくそこは維持していきたい。

関連ドキュメント(Speee社内向け)

• SpeeeVIレギュレーション.pdf (コーポレートカラー仕様)
• 【テンプレ配布】パワポ職人が本気で G スライドのマスタを作ったから見てくれ | speee Kibela

ライセンスについて

本リポジトリに含まれるリソースは Speee 企業ロゴを除いてライセンスに属します。 ただし Speee 企業ロゴのみは株式会社 Speee が独占的な権利を保持するため、 Speee 社員が株式会社 Speee の企業活動の一部として資料を作成する場合以外でロゴを使用したい場合は弊社までお問い合わせください。