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)
Author And Source
この問題について(MarpのCSSをカスタマイズした(gaia.scssをいじってコンパイル)), 我々は、より多くの情報をここで見つけました https://qiita.com/hann-solo/items/54682c59c7076d826902著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .