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 / 2026-04-20
TMU-CS / Marp slides with citations and annotations

Table of contents

Taishi Nakashima / 2026-04-20
TMU-CS / Marp slides with citations and annotations

Basic usage

Taishi Nakashima / 2026-04-20
TMU-CS / Marp slides with citations and annotations

Markdown basics

Item Syntax Result
Heading # h1, ## h2, ### h3 See the slide structure
Bold **bold** bold [1]
Italic _italic_ italic
Strike ~~strike~~ strike
Mark <mark>highlight</mark> highlight
  • Unordered list
    • Nested unordered list
  1. Ordered list
    1. Nested ordered list

A regular blockquote

  • [1] The accent color comes from the Department of Computer Science at Tokyo Metropolitan University (#006543).
Taishi Nakashima / 2026-04-20
TMU-CS / Marp slides with citations and annotations

Definition card

Eigenvector

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 / 2026-04-20
TMU-CS / Marp slides with citations and annotations

Column layout

Left

  • Background
  • Problem setting
  • Assumptions

Center

  • Method
  • Derivation
  • Parameters
  • Results
  • Discussion
  • Conclusion
Taishi Nakashima / 2026-04-20
TMU-CS / Marp slides with citations and annotations

Media

  • Image: Bubble Sort
  • Animated GIF:
  • Plain audio:
  • Spectrogram audio:
    000.000sLoading spectrogram…
Taishi Nakashima / 2026-04-20
TMU-CS / Marp slides with citations and annotations

Theme-specific directives

Taishi Nakashima / 2026-04-20
TMU-CS / Marp slides with citations and annotations

Deck-level directives

Key Purpose Typical value
sectionPages Insert automatic section pages at the chosen heading level true
sectionPageLevel Choose which heading level starts a new section 2
tocPageMaxLevel Limit how deep <!-- toc --> expands by default 2 or 3
---
sectionPages: true
sectionPageLevel: 2
tocPageMaxLevel: 2
---
Taishi Nakashima / 2026-04-20
TMU-CS / Marp slides with citations and annotations

Inline commands and markers

  • <!-- toc -->: insert a TOC using the deck default depth
  • <!-- toc level=3 -->: override the TOC depth for one page
  • <!-- _class: all-text-center align-center -->: center all text horizontally and place the slide content vertically in the middle
  • [sample.cpp](cpp/sample.cpp): expand a standalone code link into a fenced block
  • ```cpp path="cpp/sample.cpp" fit-height="true": load external code and scale it to the remaining height
  • // [!annotate ...] or # [!annotate ...]: attach code annotations
  • // [!step ...] or # [!step ...]: generate step-by-step emphasis slides
  • % [!annotate ...] at the end of a TeX line: attach math annotations
Taishi Nakashima / 2026-04-20
TMU-CS / Marp slides with citations and annotations

Theme-specific syntax

Taishi Nakashima / 2026-04-20
TMU-CS / Marp slides with citations and annotations

Math annotations

Inline math:

Taishi Nakashima / 2026-04-20
TMU-CS / Marp slides with citations and annotations

External code and highlighting

#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 / 2026-04-20
TMU-CS / Marp slides with citations and annotations

Annotated code

#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-5inputsRepresent the 2x3 matrix A and the 3D vector x as static integer arrays.
L8-10dot productCompute the dot product of matrix[row] and vector as the sum of three terms.
  • Use // [!annotate] in C++ and # [!annotate] in Python
  • Supported styles: highlight, focus, warning, error, info
Taishi Nakashima / 2026-04-20
TMU-CS / Marp slides with citations and annotations

Annotated code in Python

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)
L4inputsRepresent the 2x3 matrix A as a nested list.
L5vectorRepresent the 3D vector x as a one-dimensional list.
L8-10dot productCompute the dot product of each row and the vector as the sum of three terms.
Taishi Nakashima / 2026-04-20
TMU-CS / Marp slides with citations and annotations

Step-based emphasis

#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]] creates slide-by-slide emphasis states
Taishi Nakashima / 2026-04-20
TMU-CS / Marp slides with citations and annotations

Step-based emphasis

#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]] creates slide-by-slide emphasis states
Taishi Nakashima / 2026-04-20
TMU-CS / Marp slides with citations and annotations

Step-based emphasis

#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]] creates slide-by-slide emphasis states
Taishi Nakashima / 2026-04-20
TMU-CS / Marp slides with citations and annotations

Step-based emphasis

#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]] creates slide-by-slide emphasis states
Taishi Nakashima / 2026-04-20
TMU-CS / Marp slides with citations and annotations

Step-based emphasis

#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]] creates slide-by-slide emphasis states
Taishi Nakashima / 2026-04-20
TMU-CS / Marp slides with citations and annotations

Step-based emphasis

#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]] creates slide-by-slide emphasis states
Taishi Nakashima / 2026-04-20
TMU-CS / Marp slides with citations and annotations

Mermaid flowchart

mermaid diagram

Write the diagram as a normal fenced code block; the engine renders it through Kroki. See the official Kroki repository.

Taishi Nakashima / 2026-04-20
TMU-CS / Marp slides with citations and annotations

PlantUML diagram

plantuml diagram

The same pipeline works for other Kroki-supported diagram languages.

Taishi Nakashima / 2026-04-20
TMU-CS / Marp slides with citations and annotations

Graphviz diagram

graphviz diagram

The same pipeline works for other Kroki-supported diagram languages.

Taishi Nakashima / 2026-04-20
TMU-CS / Marp slides with citations and annotations

Inline citations

  • Core Internet Protocol specification [1]
  • A standard C++ textbook [2]
- Core Internet Protocol specification [@postel1981ip]
- A standard C++ textbook [@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 / 2026-04-20
TMU-CS / Marp slides with citations and annotations

Reference slide placeholder

# References

::: {#refs}
:::
Taishi Nakashima / 2026-04-20
TMU-CS / Marp slides with citations and annotations

References

  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 / 2026-04-20
TMU-CS / Marp slides with citations and annotations

Takahashi
Method

Taishi Nakashima / 2026-04-20
TMU-CS / Marp slides with citations and annotations

Focus

Taishi Nakashima / 2026-04-20
TMU-CS / Marp slides with citations and annotations

Huge
Words

Taishi Nakashima / 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 / 2026-04-20

This TOC slide is intentionally placed right after the title slide. Because it is treated as an auxiliary page, it should hide header, footer, and pagination.

This section covers plain Markdown authoring with the theme: headings, emphasis, lists, tables, blockquotes, columns, and common embedded media.

This slide maps common GitHub-flavored Markdown syntax to the rendered theme output. Use it to explain the default typography, table styling, lists, blockquotes, and inline footnotes.

This slide shows the definition-card pattern implemented through a blockquote whose first line is a level-4 heading. It is useful for theorem-like callouts, terminology, and compact concept summaries.

This slide demonstrates the custom `column-layout` class and the three-column balance used by the theme. It is the main reference slide for multi-column authoring.

This slide collects the supported media primitives: static images, animated GIF playback, plain audio, and spectrogram audio. Use it to explain the difference between standard HTML media and the theme-specific wavesurfer integration.

This section introduces the custom front matter directives and inline commands added by this theme package. It separates deck-structure controls from the rendering features demonstrated later.

This slide summarizes the custom front matter directives provided by the theme engine. Use it as the quick reference for automatic section pages and table-of-contents depth control.

This slide explains the inline commands and magic comments interpreted by the custom engine. It is the main authoring reference for TOC insertion, external code expansion, annotations, and step emphasis.

This section focuses on authoring features added by this package: math annotations, code annotations, step expansion, citations, bibliography placeholders, and large-type slides.

This slide demonstrates inline math, display math, and line-level math annotations rendered by the theme. The annotation comments are kept in source and turned into visual callouts during preprocessing.

This slide is the baseline code-highlighting example without external annotations. It shows that fenced code blocks in multiple languages inherit the same Shiki-based color theme.

This slide introduces the annotation syntax on external C++ code and the available highlight states. It is meant to show the source file reference rather than inline code.

This slide mirrors the previous one for Python source files. It highlights that the same annotation model works across languages with comment-prefix differences only.

This is the first step-emphasis slide and introduces the source syntax for progressive code highlighting. Subsequent slides are generated automatically from the same block to reveal each emphasis state in order.

This is the first step-emphasis slide and introduces the source syntax for progressive code highlighting. Subsequent slides are generated automatically from the same block to reveal each emphasis state in order.

This is the first step-emphasis slide and introduces the source syntax for progressive code highlighting. Subsequent slides are generated automatically from the same block to reveal each emphasis state in order.

This is the first step-emphasis slide and introduces the source syntax for progressive code highlighting. Subsequent slides are generated automatically from the same block to reveal each emphasis state in order.

This is the first step-emphasis slide and introduces the source syntax for progressive code highlighting. Subsequent slides are generated automatically from the same block to reveal each emphasis state in order.

This is the first step-emphasis slide and introduces the source syntax for progressive code highlighting. Subsequent slides are generated automatically from the same block to reveal each emphasis state in order.

These slides demonstrate Kroki-backed diagram rendering from normal fenced code blocks. They intentionally avoid raw HTML so the authoring model stays consistent with Markdown-first slides.

This slide shows that the same pipeline works for non-Mermaid diagram syntaxes supported by Kroki.

This slide adds a Graphviz example so the regression deck covers a third Kroki language family.

This slide demonstrates inline citations and the generated per-slide citation footnotes. It is the main example for `[@key]` authoring with the bibliography defined in front matter.

This page documents the placeholder syntax. The actual bibliography is rendered on the final References slide below.

This is the actual bibliography insertion point for the sample deck. The citation preprocessing stage recognizes the empty references slide and injects the rendered bibliography here.

These slides act as Takahashi-method examples. They demonstrate how auto-scaling large headlines behave with the theme.

This slide is a minimal single-word large-type example. It demonstrates the centered layout and scaling for short emphasis slides.

This slide is another fitted two-line headline and completes the large-type sequence. It is useful for checking balance, line breaks, and scaling consistency.

This slide demonstrates the `all-text-center align-center` class combination inherited from the original theme. It centers text horizontally and centers the whole slide content vertically, which is useful for credits and closing slides.