前回の記事で、Marpを使ったスライド作成で段組みレイアウトを簡単に実現する方法を紹介しました。せっかくなのでスニペット機能を使ってさらにラクにしていきたいと思います！
Marpとは？
「Marp」はMarkdown記法で簡単にスライドを作成できる機能です！別記事にまとめているので見てみてください！
スニペットとは？
VS Codeでキーボードの入力から自動でコードを記述してくれる便利機能です。詳しくは別記事に！
Marpで２段組みを実装する
「Marp」は基本的に縦にコンテンツが積み重なるため、横並びを実現するにはデザインをカスタマイズする必要があります。
しかし、カスタマイズにはHTTMLやCSSが必要なため、慣れていない場合イチから自分で実装するのは大変です。
そこで、なるべく簡単になるよう、HTMLとCSSのテンプレを作ってみました！詳しい解説は別記事にまとめています。
まずはこの記事の通り、CSSを保存してください。
ただ、上記の記事だけでは都度コピペする必要があり、何回も使う場合に少し面倒です。
ここからスニペットを使ってもっと簡単に！もっとラクに！していきます。
スニペットの適用
スニペットについて記述する、「markdown.json」を開き、中に以下のコードを追記します。適用についてよくわからない場合は、【VS Code】ユーザースニペットの使い方と例 - 理系のおともの備忘録を参考にしてください。
"flex_fw":{
"prefix": "flex_fw",
"body": [
"<!-- キーワード：sa, sb, fw -->",
"<div class=\"flex $1\">",
" <div style='--fw: $4;'>",
"",
"$2",
" </div>",
" <div style='--fw: $5;'>",
"",
"$3",
" </div>",
"</div>",
"$6",
]
},
これで保存します！
使い方
- Markdownファイルを用意。
- ２段組みにしたい場所で
flex_fwと入力。 - テンプレの記事に従い、
<div class="flex ○○">の○○にsa、sb、fwのいずれかを入力。 - 「Tab」キーを押下し、
$2の場所で２段組みの左側に記述したい内容を記入。 - 「Tab」キーを押下し、
$3の場所で２段組みの右側に記述したい内容を記入。 - 「Tab」キーを押下し、
fwタイプの場合は、左側の横幅サイズの割合を数値で指定。その他のタイプであれば無視。 - 「Tab」キーを押下し、右側について同様に指定するか無視する。
- 「Tab」キーを押下するとに段組みから抜けられる。
たまに「Tab」キーを押しても移動できないときがあります。その場合は手動で移動します...（これはVS Code側の仕様？です。）
これで、一瞬でテンプレを呼び出すことができました！これだけでだいぶ作業が捗ると思います。ぜひ使ってみてください。
