Contents
はじめに
Marp for VSCode の自作テーマ作成記録です．
基本的なやり方は “参考” に記載されている記事を見てください．
参考:
成果物
成果物は次の通りです．ご参考までにどうぞ．
- marpthemetypememo.css
typememoスタイルシート - example.pdf
typememoスライド具体例
自作テーマ設定
vscode の設定ファイル hogehoge.code-workspace か .vscode/settings.json
に次のような設定を記載する必要があります．
// in typememo.code-workspace
"settings": {
"markdown.marp.themes": [
"./tools/res/marp_theme_typememo.css"
]
},上の例は typememo.code-workspace に //tools/res/marp_theme_typememo.css
を marp のテーマとして追加する設定を書いたものです．
適宜ご自身の開発環境に合わせて設定してください．
自作テーマ開発
marpthemetypememo.css というテーマを作ってみました．
カラーテーマは #232129 をベースカラーにしました． @原色大辞典さん，どうもありがとうございます！
PDF 版を見ていただけるとわかりやすいかと思います．
以下では，実装方法のエッセンスだけご紹介したいと思います．
シャドーイングしたいテーマをインポートする
まずはシャドーイングしたいテーマをインポートします．
筆者は gaia テーマが好きなので default テーマや uncover テーマは使っていません．
@import 'gaia';ソースコードを参照しながらシャドーイングする
インポートしたらあとは各テーマのソースコード (e.g. gaia.scss ) を参考にして変更したい箇所をシャドーイングしていきます．
例えば，各スライドは <section> タグで囲われているので，全スライドのフォントを変えたい場合は，
section {
font-family: "Helvetica Neue", "monospace";
}のように書けば良いです．
あとはそれぞれの要素をお好きなようにシャドーイングしていけば良いです．
おわりに
marp for vscode の自作テーマ開発記録の紹介でした．
難しいことは特になく css の知識を少し持っていればカスタマイズできるのですごく良いなと思いました．
@yhatt さん，この場を借りて御礼申し上げます．
最後までお読みいただきありがとうございました．
お手紙 お待ちしております！
愛用品
- Xiser Pro Trainer
１日中踏み続けられる強靭なステッパーでおすすめです． - HHKB Professional 墨
x HHKB キートップセット 白
ボディは墨色キートップは白色なのでめちゃめちゃ目に優しいのでおすすめです． - Apple Magic Mouse 2
トラックパッドは指が攣りそうになりますけどマウスはその心配が無いのでおすすめです． - Apple MacMini
ミニマルでパワフルなデスクトップ PC なので個人的に大好きなのでおすすめです． - iiyama Display 27inch FullHD
鮮明すぎない画面で目も疲れにくいですし何より高さ調節できるのが最高なのでおすすめです． - KINTO UNITEA 550ml
500ml の大容量でこの綺麗なデザインは他にみたことがないのでおすすめです．
