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

```scss
$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


```css
/* @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の場合は、下記でうまくいった。

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

### gaia.scssの変更

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

```diff
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`に変え、色（４色）を変え、フォントを変えた。

コンパイルは

```bash
$ 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の設定をする。

<img src="https://gyazo.com/de8e7d9d071afc3366075370f7ce7f1b.png" width=60%>

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


### mdのサンプル

```markdown
---
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

```

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

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/184128/a065bf9e-e640-02da-a27c-286b50b775ac.gif" width=60%>
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/184128/2b60a2e6-82ba-470d-95e8-b845217f7b15.gif" width=60%>
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/184128/a9e73925-1dba-b0f5-5edc-30f59dcc8437.gif" width=60%>
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/184128/c678d8ef-7ff3-d812-3e1f-e57f50d57808.gif" width=60%>
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/184128/ce53e79c-ae18-26d0-9698-6534438e24a9.gif" width=60%>


## おわりに

### 感想

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

### ついでに

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

<img src="https://raw.githubusercontent.com/hnsol/marp-custom-theme/main/SS_gaia_custom.png" width=60%>
<img src="https://raw.githubusercontent.com/hnsol/marp-custom-theme/main/SS_gaia_gd.png" width=60%>


## 環境

- 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)