Header space

marp-theme-nordic-beamer

Marp theme,

with Beamer-like components,

and Nord-like color scheme

created by @n-ari.

Footer space
Header space

marp-theme-nordic-beamer とは

marp-theme-nordic-beamer とは、Marp の default テーマをベースとし、Beamer で使われるブロック等を導入した、Nord ライクな配色のテーマ・エンジンです。
Marp を拡張し、ブロック等を導入することで、ゼミなどで使いやすくしています。

使い方

$ git clone https://github.com/n-ari/marp-theme-nordic-beamer
$ cd marp-theme-nordic-beamer
$ yarn
$ npx @marp-team/marp-cli --server ./slides

marp.config.js にて Marp を拡張しているため、marp.config.js の存在するディレクトリで marp-cli を実行する必要があります。
クローン時のディレクトリ名は好みに応じて変更してください。

Footer space
marp-theme-nordic-beamer

デモスライド

オイラーの定理とは、フェルマーの小定理の拡張であり、以下の通りである。

定理 1(オイラーの定理).

nn を正の整数とする。aa を nn と互いに素な正の整数とする。このとき、

aφ(n)≡1(modn)a^{\varphi(n)} \equiv 1 \pmod n

が成り立つ。ただしここで、φ(n)\varphi(n) はオイラーのトーシェント関数である†。

注意

オイラーのトーシェント関数 φ(n)\varphi(n) は、ax≡1(modn)a^x\equiv 1\pmod n なる xx として最小のものを与えるわけではない。最小のものを与える関数としてカーマイケル関数 λ(n)\lambda(n) が存在し、これを カーマイケルの定理 と呼ぶ。

†: 特に素数 p,qp,q を用いて n=pqn=pq である時、φ(n)=(p−1)(q−1)\varphi(n) = (p-1)(q-1) である。

デモスライド
ブロック構文

ブロック構文 (markdown-it-container による拡張)

info

インフォブロック ℹ️
Block for Information (info / blue)

:::info
インフォブロック :information_source:
Block for Information (info / blue)
:::

Warning

ワーニングブロック ⚠️
Block for Warning (warn / red)

:::warn:Warning
ワーニングブロック :warning:
Block for Warning (warn / red)
:::
ブロック構文

ブロック構文 (markdown-it-container による拡張)

ブロック

タイトル付きブロック(黒)
Block with Title (block / black)

:::block:ブロック
タイトル付きブロック(黒)
Block with Title (block / black)
:::

ブロック
Block only (block / black)

:::block
ブロック
Block only (block / black)
:::
emoji / markdown-it-plugins

emoji / markdown-it-plugins

本家 Marp 同様、twemoji による emoji が使えます 🎉 😇

また、markdown-it-sup, markdown-it-sub による拡張構文も利用できます。

例えば、[Ag(NH3)2]+ のようなものを TeX\TeX 記法無しで書くことが可能です1。

markdown-it-sup による上付き表記と、markdown-it-container によって定義された :::footnote ブロックの併用により、脚注の表記も可能です2。

  1. これはジアンミン銀(I)イオンです。
  2. markdown-it-footnote は現在挙動を確認中です。
画像

画像

画像はデフォルトで中央寄せです。

class: (default)
画像(左寄せ)

画像(左寄せ)

class: image-left を指定することで画像が左寄せになります。

class: image-left
画像(右寄せ)

画像(右寄せ)

class: image-right を指定することで画像が右寄せになります。

class: image-right
画像(bg)

画像(bg)

![bg fit blur:10px](./image.png) 等によって背景画像を設定できます。

背景画像はスライド全体に広がるため、デフォルトスライドで # h1 を用いる場合は上部が見切れる点に注意してください。

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Footer space

画像(bg right)

![bg right fit](./image.png) 等によって画面の一部を画像で埋めることが出来ます。

foreignObject 外にはみ出る影響で header / footer が正しく描画されないため、<!-- _header: '' --> 等の指定をすることで表示を消すのがおすすめです。

このページでは header を非表示にし、footer を設定しています。

Footer space
Header space

画像(bg left)

![bg left:30% fit](./image.png)

このページでは header / footer をそれぞれ設定しています。

Footer space