nord-marp-theme

Nord theme for Marp.

h1

h2

h3

h4

h5

h6

Heading & Body (h2-h3)

Section heading

Body text under h2. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Subsection heading

Body text under h3. Used to verify that the body color does not overpower h3-h6 headings on a dark background.

Heading & Body (h4-h6)

Detail heading

Body text under h4.

Minor heading

Body text under h5. Used to verify that h5 is still visually distinguishable from body text on a dark Nord background.

Smallest heading

Body text under h6. Used to verify that h6 does not become smaller than body text after dropping Marp's default theme.

Paragraph

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.

This is bold text.

This is italic text.

日本語の自動改行処理

バランスの取れた長い日本語の見出しで折り返しを確認するためのテストケース

日本語の文章を含むスライドでは、ブラウザのデフォルトの改行ルールで処理すると文節の途中や助詞の前後で不自然な位置に改行が入ることがある。このテーマでは word-break: auto-phrase を heading と paragraph に適用しており、Chromium が文節単位で改行位置を推定して自然な折り返しを実現する。

text-wrap: balance は heading 用に、text-wrap: pretty は paragraph 用に併用される。

Inline elements

A paragraph that mixes a hyperlink, some inline code, bold, italic, strikethrough, and a keyboard shortcut Ctrl + C.

Another line: see the Nord docs and run deno task build after editing the theme.

Footnote (slide 1)

A paragraph with a footnote reference^[1]. Multiple footnotes^[2] can be placed in the same paragraph.

Longer labels^[3] are also supported, so verify that reference markers function as links.

Footnote (slide 2)

A separate slide can define its own footnotes^[4] independently.

Across multiple slides, each slide's footnotes stay scoped^[5] to that slide.

Blockquote

blockquote.

Nested blockquote.

List

• Lorem ipsum dolor sit amet
• Consectetur adipiscing elit
  • Integer molestie lorem at massa

1. Lorem ipsum dolor sit amet
2. Consectetur adipiscing elit
3. Integer molestie lorem at massa

Task list & horizontal rule

• Completed task
• Another completed item
• Pending task
• Item that is still open
  • Nested completed sub-task
  • Nested pending sub-task

Content above the horizontal rule.

Content below the horizontal rule (<hr>) within a single slide.

Table

Image

Generated by Gemini

Code

This is inline code .

const sayHello = (name) => {
  console.log(`Hello ${name}`.);
}

sayHello("John");

Math (KaTeX)

Inline math: and .

Display math:

Highlighting with Shiki

// marp.config.mjs

import { defineConfig } from "@marp-team/marp-cli";
import Shiki from "@shikijs/markdown-it";

export default defineConfig({
  engine: async ({ marp }) => {
    marp.use(await Shiki({ theme: "nord" }));

    return marp;
  },
});

Shiki: line highlight ({N,M-K})

Write line numbers like {2,4-5} after the language tag in a fence to apply the .highlighted class to those lines (transformerMetaHighlight).

const a = 1;
const b = 2; // this line is highlighted
const c = 3;
const d = 4; // from here
const e = 5; // ...to here

Shiki: word highlight (/word/)

Write a word like /sayHello/ after the language tag in a fence to wrap every occurrence in .highlighted-word (transformerMetaWordHighlight).

const sayHello = (name) => {
  console.log(`Hello ${name}`);
};

sayHello("John");

Shiki: line focus ([!code focus])

Add a // [!code focus] comment in the code to mark that line with .focused; the rest of the lines are dimmed via the .has-focused decoration (opacity + blur). (transformerNotationFocus)

const a = 1;
const b = 2;
const c = a + b;
console.log(c);

Github-style alerts

// marp.config.mjs

import { defineConfig } from "@marp-team/marp-cli";
import MarkdownItGitHubAlerts from "markdown-it-github-alerts";

export default defineConfig({
  engine: async ({ marp }) => {
    marp.use(MarkdownItGitHubAlerts);

    return marp;
  },
});

Mermaid - Flowchart

Mermaid - Sequence

Mermaid - State

Mermaid - Class