週末ログ | マークダウンでスライドが作れる！GitPitchを触る

はじめに

いつも心は虹色に！ nikkieです。
8/20の週にLTが控えているので、週末はGitPitchでスライドを作っていました。
わかったことを備忘録として残します。

GitPitchとは

マークダウンでスライドが作れるサービスです。
GitHubなどのリポジトリにPITCHME.mdというファイルを置き、
ユーザ名やリポジトリ名をURIに含めてGitPitchにブラウザでアクセスします。
すると、PITCHME.mdをもとにスライドがレンダリングされます。
reveal.jsなるものを使っているそうです。

以下の記事でイメージが掴めます。

久しぶりにWikiを見に行ったところ、体裁の整ったDocumentが用意されていました。
GitPitch Documentation :: GitPitch Docs

LTするときはほとんどGitPitchなのですが、
これまでレイアウトは工夫せずに済ませて来ました。
CSSを勉強しているので、今回は積極的にスタイルを試してみました。

お品書き

画像をいい感じに扱う
アイコンの扱い
その他Tips

画像をいい感じに扱う

これまでに知っていたこと

![altテキスト](ルートからのパス)でインラインに埋め込める
ページの区切り記号に続けて+++image=<ルートからのパス>とすることで背景に埋め込める

今回知ったこと: Snap レイアウト

サンプルコード¹ （@ulについては²へ）

@snap[north]
<h4>Present Step-by-Step</h4>
@snapend

@snap[west]

@ul
- There are
- Many reasons
- To @fa[heart]
- [GitPitch](https://gitpitch.com)
- Presentations
@ulend

@snapend

@snap[east]

![](assets/images/daftpunkocat.gif)

@snapend

snapレイアウトを使うと、
画像を左側、説明を右側に配置するスライドが実現できるようです。
snapレイアウトが自在に組めれば、
パワポやキーノートから卒業できる気がします。

アイコンの扱い

@fa[icon-name]というシンタックスでFont Awesomeのアイコンが埋め込めます。
Font Awesome Icons :: GitPitch Docs

先のサンプルコード中に色も変えつつアイコンを使っていた例があり、
参考になりました。
@color[black](@fa[git fa-4x])
これまではspanタグでクラス指定して色をつけていました。

その他Tips

マークダウンなのでp要素やblockquote要素内での改行は半角スペース2つでした。(はてなブログと同じ)
backgroundプロパティの設定
- Size Background Scaling :: GitPitch Docs
- Opacity Background Opacity :: GitPitch Docs
- Positioning Background Positioning :: GitPitch Docs
デフォルトのスタイルの上書き(今回は>による引用を上書き)
- >によるマークダウンは.reveal blockquoteというクラス指定になる。
- .reveal blockquoteのスタイルをカスタムCSSで上書き可能。
- また、次を参考に引用部分にbox-shadowを設定サルワカ【CSS】box-shadowで影をつける方法とサンプル集 ³

宿題事項

classを設定したspanを使って、一部のa要素のfont-familyを変えようとしたが、上書きできなかった
- うまくいかなかった例：.serif-font { font-family: serif; } <span class="serif-font">[a要素タイトル](a要素リンク)</span>
- CSSの優先度の問題？
- フォント変更は1箇所だけなので、spanのstyle属性で直接指定して一旦解決