Marpでスライドを左右に分割する方法

Marpとは

マークダウン形式でプレゼン資料を作成できるツール。
日本人の方が開発しているらしい。[1]（応援したい）

スライドの左右分割

現状Marpに標準搭載されている機能のみでは実現できないため、CSSを設定し、HTMLを直接記述することで対応します。
CSSの内容については末尾に記載した引用元をご確認ください。[2]

CSS

.split {
  display: table;
  width: 100%;
}
.split-item {
  display: table-cell;
  padding: 0px;
  width: 60%;
}
.split-left {
  position: relative;
}
.split-left__inner {
  height: 100%;
  position: fixed;
  width: 50%;
}
.split-right {
  position: relative;
}
.split-right__inner {
  height: 420px;
}

HTML

<div class="split">
  <div class="split-item split-left">
    <div class="split-left__inner">

- 以下のQUBO形式のベイズ線形回帰モデルを獲得関数としたBBO手法
  $$ \tilde{f}(\vec{\bm{x}}\mid\vec{\bm{\alpha}}) = a_0 + \Sigma_{i}a_i x_i + \Sigma_{i < j} a_{ij} x_i x_j$$
- 離散変数を含むBBOに対するベイズ最適化手法として提案されている

    </div>
  </div>
  <div class="split-item split-right">
    <div class="split-right__inner">
      <img src="../latex/BOCS.jpg">
    </div>
  </div>
</div>

結果

注意

• inner要素としてマークダウンやkatexを利用したい場合は、<div>および</div>の前後は必ず空行を挿入しなければいけないようです。

参考

[1] https://github.com/yhatt
[2] https://webdesignday.jp/inspiration/technique/css/3962/