TMU-CS / Marp slides with citations and annotations

TMU-CS

Marp slides with citations and annotations

Taishi Nakashima

Tokyo Metropolitan University

2026-04-20

Taishi Nakashima, Tokyo Metropolitan University / 2026-04-20
TMU-CS / Marp slides with citations and annotations

見出し

h1 header

h2 header

h3 header

Taishi Nakashima, Tokyo Metropolitan University / 2026-04-20
TMU-CS / Marp slides with citations and annotations

基本文法

項目 文法 結果
見出し # h1, ## h2, ### h3 前ページ参照
太字 **太字** 太字 [1]
斜体 _斜体_ 斜体
取り消し線 ~~取り消し線~~ 取り消し線
マーカー <mark>ハイライト</mark> ハイライト
引用 行頭で > 右側参照
  • 番号なしリスト
    • 番号なしリストの入れ子
  1. 番号付きリスト
    1. 番号付きリストの入れ子

引用の例

Taishi Nakashima, Tokyo Metropolitan University / 2026-04-20
TMU-CS / Marp slides with citations and annotations

マルチカラム

左カラム

  • 概要
  • 背景
  • 問題設定

中央カラム

  • 目的
  • 手法
  • 導出

右カラム

  • 実験条件
  • 実験結果
  • まとめ
Taishi Nakashima, Tokyo Metropolitan University / 2026-04-20
TMU-CS / Marp slides with citations and annotations

メディア

  • 画像: Bubble Sort
  • アニメ:
  • 音声:
  • 音声（スペクトログラム）:
    000.000sLoading spectrogram…
Taishi Nakashima, Tokyo Metropolitan University / 2026-04-20
TMU-CS / Marp slides with citations and annotations

数式

インライン数式:

ディスプレイ数式:

Eigen vector

Let be a vector space and a linear transformation. A nonzero vector is called an eigenvector of if there exists a scalar such that .
The scalar is called the corresponding eigenvalue.

Taishi Nakashima, Tokyo Metropolitan University / 2026-04-20
TMU-CS / Marp slides with citations and annotations

コードブロック

  • shiki によるシンタックスハイライト
  • 外部ファイルの読み込みも対応
    • [sample.cpp](cpp/sample.cpp)
#include <iostream>
int main() {
    for (int i = 0; i < 5; ++i) { std::cout << i << std::endl; }
    return 0;
}
for i in range(5):
    print(i)
Taishi Nakashima, Tokyo Metropolitan University / 2026-04-20
TMU-CS / Marp slides with citations and annotations

注釈付きコード

#include <iostream>

int main() {
  const int matrix[2][3] = {{1, 2, 3}, {4, 5, 6}};
  const int vector[3] = {7, 8, 9};

  for (int row = 0; row < 2; ++row) {
    const int sum = matrix[row][0] * vector[0]
      + matrix[row][1] * vector[1]
      + matrix[row][2] * vector[2];
    std::cout << sum << '\n';
  }
}
L4-5inputsint 型の 2x3 行列 A と 3 次元ベクトル x を静的配列で表現する
L8-10dot productmatrix[row] と vector の内積を 3 項の和として計算する
  • C++ では // [!annotate]、Python では # [!annotate] により注釈を追加可能
    • highlight, focus, warning, error, info を指定可能
Taishi Nakashima, Tokyo Metropolitan University / 2026-04-20
TMU-CS / Marp slides with citations and annotations

注釈付きコード2

matrix = [
    [1, 2, 3],  
    [4, 5, 6],
]
vector = [7, 8, 9]  

for row in matrix:  
    total = row[0] * vector[0]  
    total += row[1] * vector[1]
    total += row[2] * vector[2]  
    print(total)
L4inputs2x3 行列 A を入れ子のリストで表現する
L5vector3 次元ベクトル x を一次元リストで表現する
L8-10dot product各行 row と vector の内積を 3 項の和として計算する
Taishi Nakashima, Tokyo Metropolitan University / 2026-04-20
TMU-CS / Marp slides with citations and annotations

ステップ強調コード

#include <iostream>

int main() {
  const int matrix[2][3] = {{1, 2, 3}, {4, 5, 6}};
  const int vector[3] = {7, 8, 9};

  for (int row = 0; row < 2; ++row) {
    const int sum = matrix[row][0] * vector[0]
      + matrix[row][1] * vector[1]
      + matrix[row][2] * vector[2];
    std::cout << sum << '\n';
  }
}
  • // [!step <number> <action>[:N]] でその行を各ステップで順番に強調可能
Taishi Nakashima, Tokyo Metropolitan University / 2026-04-20
TMU-CS / Marp slides with citations and annotations

ステップ強調コード

#include <iostream>

int main() {
  const int matrix[2][3] = {{1, 2, 3}, {4, 5, 6}};
  const int vector[3] = {7, 8, 9};

  for (int row = 0; row < 2; ++row) {
    const int sum = matrix[row][0] * vector[0]
      + matrix[row][1] * vector[1]
      + matrix[row][2] * vector[2];
    std::cout << sum << '\n';
  }
}
  • // [!step <number> <action>[:N]] でその行を各ステップで順番に強調可能
Taishi Nakashima, Tokyo Metropolitan University / 2026-04-20
TMU-CS / Marp slides with citations and annotations

ステップ強調コード

#include <iostream>

int main() {
  const int matrix[2][3] = {{1, 2, 3}, {4, 5, 6}};
  const int vector[3] = {7, 8, 9};

  for (int row = 0; row < 2; ++row) {
    const int sum = matrix[row][0] * vector[0]
      + matrix[row][1] * vector[1]
      + matrix[row][2] * vector[2];
    std::cout << sum << '\n';
  }
}
  • // [!step <number> <action>[:N]] でその行を各ステップで順番に強調可能
Taishi Nakashima, Tokyo Metropolitan University / 2026-04-20
TMU-CS / Marp slides with citations and annotations

ステップ強調コード

#include <iostream>

int main() {
  const int matrix[2][3] = {{1, 2, 3}, {4, 5, 6}};
  const int vector[3] = {7, 8, 9};

  for (int row = 0; row < 2; ++row) {
    const int sum = matrix[row][0] * vector[0]
      + matrix[row][1] * vector[1]
      + matrix[row][2] * vector[2];
    std::cout << sum << '\n';
  }
}
  • // [!step <number> <action>[:N]] でその行を各ステップで順番に強調可能
Taishi Nakashima, Tokyo Metropolitan University / 2026-04-20
TMU-CS / Marp slides with citations and annotations

ステップ強調コード

#include <iostream>

int main() {
  const int matrix[2][3] = {{1, 2, 3}, {4, 5, 6}};
  const int vector[3] = {7, 8, 9};

  for (int row = 0; row < 2; ++row) {
    const int sum = matrix[row][0] * vector[0]
      + matrix[row][1] * vector[1]
      + matrix[row][2] * vector[2];
    std::cout << sum << '\n';
  }
}
  • // [!step <number> <action>[:N]] でその行を各ステップで順番に強調可能
Taishi Nakashima, Tokyo Metropolitan University / 2026-04-20
TMU-CS / Marp slides with citations and annotations

ステップ強調コード

#include <iostream>

int main() {
  const int matrix[2][3] = {{1, 2, 3}, {4, 5, 6}};
  const int vector[3] = {7, 8, 9};

  for (int row = 0; row < 2; ++row) {
    const int sum = matrix[row][0] * vector[0]
      + matrix[row][1] * vector[1]
      + matrix[row][2] * vector[2];
    std::cout << sum << '\n';
  }
}
  • // [!step <number> <action>[:N]] でその行を各ステップで順番に強調可能
Taishi Nakashima, Tokyo Metropolitan University / 2026-04-20
TMU-CS / Marp slides with citations and annotations

引用

  • IP の基本仕様 [1]
  • C++ の定番の参考書 [2]
- IP の基本仕様 [@postel1981ip]
- C++ の定番の参考書 [@stroustrup2022tour]
  • [1] J. Postel, “Internet Protocol,” RFC Editor, STD 5, RFC 791, Sep. 1981. doi: 10.17487/RFC0791. [DOI] [URL]
  • [2] B. Stroustrup, A Tour of C++, 3rd ed. Boston: Addison-Wesley, 2022. [URL]
Taishi Nakashima, Tokyo Metropolitan University / 2026-04-20
TMU-CS / Marp slides with citations and annotations

参考文献

# 参考文献

::: {#refs}
:::
  1. J. Postel, “Internet Protocol,” RFC Editor, STD 5, RFC 791, Sep. 1981. doi: 10.17487/RFC0791. [DOI] [URL]
  2. B. Stroustrup, A Tour of C++, 3rd ed. Boston: Addison-Wesley, 2022. [URL]
Taishi Nakashima, Tokyo Metropolitan University / 2026-04-20
TMU-CS / Marp slides with citations and annotations

高橋
メソッド

Taishi Nakashima, Tokyo Metropolitan University / 2026-04-20
TMU-CS / Marp slides with citations and annotations

特徴

Taishi Nakashima, Tokyo Metropolitan University / 2026-04-20
TMU-CS / Marp slides with citations and annotations

巨大な
文字

Taishi Nakashima, Tokyo Metropolitan University / 2026-04-20
TMU-CS / Marp slides with citations and annotations

Implemented by OpenAI Codex with prompts from Taishi Nakashima.
Codes are available on GitHub!

Taishi Nakashima, Tokyo Metropolitan University / 2026-04-20

見出しの説明

Markdown の見た目と出力の対応が最も分かりやすい導入ページです。

このページでは画像の埋め込みを説明します。 Marp では画像記法に `h:` を付けると、高さを指定して表示サイズを揃えられます。 ここでは外部 URL の JPEG 画像を高さ 200px で表示しています。 このページではアニメーション画像の埋め込みを説明します。 GIF でも同じ `h:` 記法で高さを揃えられるので、静止画と同じ基準でレイアウトできます。 外部 URL と高さ指定だけで差し替えられる点を案内してください。 音声は raw HTML の `audio` 要素で再生でき，`controls` を付けると標準 UI が表示されます。 wavesurfer.js を使ったスペクトログラム表示にも対応しています。

このページでは通常の数式記法を説明します。 本文中のインライン数式は `$...$`、独立した式は `$$...$$` です。 Marp の `math: mathjax` を有効にすると、この記法が MathJax で描画されます。 行末の `% [!annotate ...]` が、その行全体をハイライト対象にし、note box と connector を自動配置します。 通常の display math に最小限のコメントを足すだけで使える点を強調してください。 blockquote の 1 行目に `####` 見出しを書くと、見出し帯つきの定義カードとして表示されます。 用語の定義や短い概念説明を本文から分離したいときに使えます。

コードブロック シンタックスハイライト 外部コード読み込み alternative: ``` path="cpp/sample.cpp" fit-height="true" でも外部コードを読み込める

このページではコードハイライト拡張を説明します。 外部ファイル内の `// [!code ...]` / `// [!annotate ...]` や `# [!code ...]` / `# [!annotate ...]` が、強調表示や補足説明に変換されます。 この例では行列とベクトルの積を計算する処理に対して、C++ と Python の両方で `highlight`、`focus`、`warning`、`error`、`info` を使っています。 alternative: ``` path="cpp/sample-highlight.cpp" fit-height="true" や ``` path="python/sample-highlight.py" fit-height="true" も利用できます。

このページでは文献引用の例として、RFC 791 と『A Tour of C++』を参照しています。 `[@key]` を書くと本文中の引用が整形され、同じスライドの脚注と末尾の参考文献一覧へ反映されます。 技術仕様書や書籍のように異なる種類の文献を同じ流れで扱えることを案内してください。

このページは参考文献一覧の差し込み位置です。 `# References` 見出しと `::: {#refs}` ブロックを書いておくと、引用した文献が末尾に自動展開されます。 speaker note では bibliography と csl の front matter 設定もあわせて案内してください。

このページでは `all-text-center align-center` による中央配置を説明します。 `all-text-center` でスライド内テキストを中央揃えにし、`align-center` で内容全体を上下中央に寄せています。 画像も本文の一部として中央配置され、プロフィールや短いタイトル付き画像スライドに使えます。