MarpのCSSをカスタマイズした(gaia.scssをいじってコンパイル)


はじめに

パワポじゃなくて、Markdownからスライドをつくりたいと思っていた。reveal.jsをふくめていろいろ調べたり使ってみた。いまのところ、Marpがいい感じ。アウトプットのデザインも悪くない!すばらしい!!!

Qiitaをはじめ、解説ページもけっこうある。

【VS Code + Marp】Markdownから爆速・自由自在なデザインで、プレゼンスライドを作る - Qiita
https://qiita.com/tomo_makes/items/aafae4021986553ae1d8
 → かなり詳しく書いてくださっている!!!

 Marp Basic Example
https://speakerdeck.com/yhatt/marp-basic-example
 → 作者の服部さんによるスライド

Marpを使ってmarkdownでスライド資料を作成する
https://dev.classmethod.jp/articles/make-slides-from-markdown-with-marp/

vscode上でマークダウンを使ってスライドを作る。(Marp, Reveal.js)
https://ossyaritoori.hatenablog.com/entry/2020/05/20/vscode上でマークダウンを使ってスライドを作る。(M

Marp(Markdown Presentaiton)の文法まとめ(147LGMT)
https://qiita.com/pocket8137/items/27ede821e59c12a1b222

なんといっても公式マニュアル。Image Syntaxはここがいちばん詳しい
https://marpit.marp.app
マークダウンはこちらを
https://marpit.marp.app/markdown

標準で入っているテンプレートgaiaも素晴らしい。

gaiaというテーマがあって、その下のクラスに下記がある

カテゴリ クラス 起きること
色変更 invert スライドの文字色と背景色が反転
gaia アクセントカラースライド
揃え変更 lead 中央揃え(タイトル用)

ということがわかれば、すごく使いやすくて感謝感激。

ただ、色をすこーし変えたかったのだけれど、どうすればよいかわからずめっちゃ悩んだ。

できなくて困ったこと

オフィシャルのドキュメントには
https://marpit.marp.app/theme-css

$bg-color: #f80;
$text-color: #fff;

@import-theme 'base';

section {
  background: $bg-color;
  color: $text-color;
}

というように、@import-themeして、変数$を変えればいい感じに書いてあるのだけれど、これがうまく行かない。(何か勘違いしているのかもしれないけど)

後日談:作者の服部さんから「scss variablesは使えない」と返事をいただいた。わたしのドキュメントの誤読。ということでこの記事で書いているように、scssをコンパイルして使うのがよさげ。
How can I use @import-theme? #73
https://github.com/marp-team/marp/discussions/73

/* @theme customized */

@import 'base';

section {
  background-color: #f80;
  color: #fff;
}

というのもあるけど、変更範囲が多すぎて、ちょっと手がつけられない感じ。

あまり、CSSのカスタムのしかたが詳しいページがなくて、困った……。

そういえば公式ディスカッションページがあって、ここは作者の服部さんも
コメントを下さる様子。英語だけど。
過去のQ&Aが見られてとても助かる。
htps://github.com/marp-team/marp/discussions
ここを読んでも解決できなかったんだなあ。

やったこと(概要)

  • gaia.scssを入手
  • sassをインストール(scssをコンパイルしてcssにする)
  • gaia.scssを変更し、gaia_custom.cssを生成
  • VS Codeで設定

やったこと(もう少し詳しく)

前準備

gaia.scssの入手 → 
https://github.com/marp-team/marp-core/blob/26f2402d443d26af387adb0ee86cafa1149beb34/themes/gaia.scss

sassのインストール →
sass・scssとは?導入方法や使い方を解説する【Win/Mac対応】
https://miya-system-works.com/blog/detail/112

macOSの場合は、下記でうまくいった。

$ sudo gem install sass -n /usr/local/bin/

gaia.scssの変更

差分だけ表示すると下記の通り。

4c4
<  * @theme gaia
---
>  * @theme gaia_custom
11,14c11,14
< $color-light: #fff8e1;
< $color-dark: #455a64;
< $color-primary: #0288d1;
< $color-secondary: #81d4fa;
---
> $color-light: #FDF7E2;
> $color-dark: #274761;
> $color-primary: #205160;
> $color-secondary: #A3C6E5;
217,219c217,221
<   font-size: 35px;
<   font-family: 'Lato', 'Avenir Next', 'Avenir', 'Trebuchet MS', 'Segoe UI',
<     sans-serif;
---
>   // font-size: 35px;
>   // font-family: 'Lato', 'Avenir Next', 'Avenir', 'Trebuchet MS', 'Segoe UI',
>     // sans-serif;
>   font-family: "Hiragino Kaku Gothic ProN", sans-serif;
>   font-size: 32px;

見てのとおりだが、theme名称をgaia_customに変え、色(4色)を変え、フォントを変えた。

コンパイルは

$ sass gaia_custom.scss:gaia_custom.css

補足

めっちゃ細かいことで、省略したけれど、下記の行はsassが通らないので、scssのときにはコメントアウトしておいて、コンパイル後のcssでコメントアウトを戻した。

/* @import '~highlight.js/styles/sunburst'; */

VS Codeでの設定

【VS Code + Marp】Markdownから爆速・自由自在なデザインで、プレゼンスライドを作る
https://qiita.com/tomo_makes/items/aafae4021986553ae1d8
にもあるとおりだが、VS Codeの設定をする。

今回の場合だとVS Codeの設定Marp: Themesに「gaia_custom.css」を追加した。そして、該当フォルダにgaia_custom.cssをコピー。

mdのサンプル

---
marp: true
theme: gaia_custom
size: 4:3
paginate: true

---
<!-- _class: lead invert -->
<!-- _paginate: false -->

# marp custom css<br>テスト用スライド

<br>

2021-02-04版

---

### もくじ

1. 背景(再掲)
2. 残検討事項
3. やりたいこと(再掲)
4. できている/これから
    - フォーム生成
    - メールで案内
    - 集計と共有
5. マニュアル(仮骨子)

---

<!-- _class: gaia -->

### 残検討事項

- クイズの回答後、どういうFBがあると、回答者のためになるか?
    - → FB頻度や方法と密接に関係する

- スクリプトで<mark>自動化を実現</mark>しているが、よいか?

---

### 進捗概要

| 項目               | 進捗率 | 前回比 |
| :----------------- | :----: | :----: |
| フォーム作成       | 75%    | +05%   |
| メールで案内       | 50%    | +50%   |
| (回答/結果記録) | -      |        |
| 集計し共有         | 20%    | +20%   |

→集計と共有の方法は要検討(FBの目的と関連)

---

<!-- _class: lead invert -->
<!-- _paginate: false -->

END

↓ こんなスライドになる ↓





おわりに

感想

これで「テキスト(Markdown)→スライド」のワークフローができそうで、めっちゃ幸せ。

ついでに

GitHubにコンパイル済みのcssをあげておいた。ご参考まで。
https://github.com/hnsol/marp-custom-theme


環境

  • Marp for VS Code 0.17.0
  • VS Code バージョン: 1.52.1 コミット: ea3859d4ba2f3e577a159bc91e3074c5d85c0523
  • macOS BigSur 11.1
  • MacBook Pro (13-inch, 2020, Four Thunderbolt 3 Ports)