html-presentations

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

HTML Presentations

HTML演示文稿

Convert a markdown spec file into an HTML presentation using the Poimandres-themed template.

使用Poimandres主题模板将Markdown规范文件转换为HTML演示文稿。

Files

文件

Template:
```
{SKILLBASE}/template/index.html
```
Example spec:
```
{SKILLBASE}/examples/spec.md
```

Build script:

{SKILLBASE}/scripts/create_standalone.sh

模板:
```
{SKILLBASE}/template/index.html
```
示例规范:
```
{SKILLBASE}/examples/spec.md
```

构建脚本:

{SKILLBASE}/scripts/create_standalone.sh

Instructions

使用说明

Read the spec markdown file (e.g.,
```
spec.md
```
)
Read the template at
```
{SKILLBASE}/template/index.html
```
Parse the spec file:
- Split on
```
* * *
```
  to get individual slides
- ```
# Title
```
  = title slide (use
```
<h1>
```
  )
- ```
## Heading
```
  = slide heading (use
```
<h2>
```
  )
- ```
- item
```
  = bullet list (use
```
<ul><li>
```
  )
- ```
**bold**
```
  = emphasis (use
```
<span class="accent">
```
  or
```
<span class="green">
```
  )
- ```
> quote
```
  = blockquote (use
```
<blockquote class="quote">
```
  )
- ```
<img src="...">
```
  = image (keep as-is, add
```
class="shadow"
```
  if appropriate)
- ```
```mermaid ```
```
= mermaid diagram (wrap in
```
  <div class="mermaid-wrapper"><pre class="mermaid">
```
)
- ```

```
  = split images into separate slides (one per slide)
- ```

```
  = other layout hints (e.g.,
```

```
  )
Generate HTML slides:
- Each slide is a
```
<section class="slide">
```
  (add
```
centered
```
  class for title/image slides)
- Preserve the template's head section (styles, scripts, mermaid config)
- Preserve the navigation and script at the bottom
Write output to
```
index.html
```
in the same directory as the spec, offer to
```
open
```
it using Bash for the user
OPTIONAL Create standalone shareable HTML:
- Run the build script to embed all PNG images as base64 data URIs
- Output:
```
FOLDERNAME-standalone.html
```
  (e.g.,
```
2026-01-05-luciq-presentation-standalone.html
```
  )
- Creates a single self-contained file (~2-3MB) that opens in any browser
bash
```
{SKILLBASE}/scripts/create_standalone.sh /path/to/presentation/folder
```

读取规范Markdown文件（例如
```
spec.md
```
）
读取路径为
```
{SKILLBASE}/template/index.html
```
的模板
解析规范文件：
- 按
```
* * *
```
  分割以得到独立幻灯片
- ```
# 标题
```
  = 标题幻灯片（使用
```
<h1>
```
  ）
- ```
## 小标题
```
  = 幻灯片标题（使用
```
<h2>
```
  ）
- ```
- 列表项
```
  = 无序列表（使用
```
<ul><li>
```
  ）
- ```
**粗体**
```
  = 强调内容（使用
```
<span class="accent">
```
  或
```
<span class="green">
```
  ）
- ```
> 引用
```
  = 块级引用（使用
```
<blockquote class="quote">
```
  ）
- ```
<img src="...">
```
  = 图片（保持原样，必要时添加
```
class="shadow"
```
  ）
- ```
```mermaid ```
```
= Mermaid 图表（包裹在
```
  <div class="mermaid-wrapper"><pre class="mermaid">
```
中）
- ```

```
  = 将图片分割为独立幻灯片（每张图片一页）
- ```

```
  = 其他布局提示（例如
```

```
  ）
生成HTML幻灯片：
- 每张幻灯片都是一个
```
<section class="slide">
```
  （标题/图片幻灯片添加
```
centered
```
  类）
- 保留模板的head部分（样式、脚本、Mermaid配置）
- 保留底部的导航和脚本
将输出写入规范文件所在目录的
```
index.html
```
中，并主动提出通过Bash为用户执行
```
open
```
命令打开该文件
（可选）创建可分享的独立HTML文件：
- 运行构建脚本，将所有PNG图片嵌入为base64数据URI
- 输出文件：
```
FOLDERNAME-standalone.html
```
  （例如
```
2026-01-05-luciq-presentation-standalone.html
```
  ）
- 生成单个自包含文件（约2-3MB），可在任何浏览器中打开
bash
```
{SKILLBASE}/scripts/create_standalone.sh /path/to/presentation/folder
```

Slide Type Examples

幻灯片类型示例

Title Slide

标题幻灯片

html

<section class="slide centered">
  <h1>Presentation Title</h1>
  <p class="subtitle">Subtitle here</p>
</section>

html

<section class="slide centered">
  <h1>Presentation Title</h1>
  <p class="subtitle">Subtitle here</p>
</section>

Bullet Points

项目符号列表

html

<section class="slide">
  <h2>Slide Title</h2>
  <ul>
    <li>Point with <span class="accent">emphasis</span></li>
    <li>Another point</li>
  </ul>
</section>

html

<section class="slide">
  <h2>Slide Title</h2>
  <ul>
    <li>Point with <span class="accent">emphasis</span></li>
    <li>Another point</li>
  </ul>
</section>

Big Quote

大段引用

html

<section class="slide centered">
  <blockquote class="quote">
    "The quote text here"
  </blockquote>
</section>

html

<section class="slide centered">
  <blockquote class="quote">
    "The quote text here"
  </blockquote>
</section>

Mermaid Diagram

Mermaid图表

html

<section class="slide centered">
  <h2>Diagram Title</h2>
  <div class="mermaid-wrapper">
    <pre class="mermaid">
graph LR
    A[Start] --> B[End]
    </pre>
  </div>
</section>

html

<section class="slide centered">
  <h2>Diagram Title</h2>
  <div class="mermaid-wrapper">
    <pre class="mermaid">
graph LR
    A[Start] --> B[End]
    </pre>
  </div>
</section>

Image

图片

html

<section class="slide centered">
  <h2>Image Title</h2>
  <img src="./image.png" alt="Description" class="shadow" />
</section>

html

<section class="slide centered">
  <h2>Image Title</h2>
  <img src="./image.png" alt="Description" class="shadow" />
</section>

Image Gallery (2 images side by side)

图片画廊（两张图片并排）

html

<section class="slide">
  <h2>Gallery Title</h2>
  <div class="columns">
    <div class="column">
      <p class="muted">Caption 1</p>
      <img src="./image1.png" alt="Image 1" />
    </div>
    <div class="column">
      <p class="muted">Caption 2</p>
      <img src="./image2.png" alt="Image 2" />
    </div>
  </div>
</section>

html

<section class="slide">
  <h2>Gallery Title</h2>
  <div class="columns">
    <div class="column">
      <p class="muted">Caption 1</p>
      <img src="./image1.png" alt="Image 1" />
    </div>
    <div class="column">
      <p class="muted">Caption 2</p>
      <img src="./image2.png" alt="Image 2" />
    </div>
  </div>
</section>

Vertical Image Gallery (one image per slide)

垂直图片画廊（每张图片一页）

When spec contains

<!-- image gallery - VERTICAL -->

, split each image into its own slide:

html

<section class="slide centered">
  <h2>Section Title</h2>
  <p class="muted">Caption 1</p>
  <img src="./image1.png" alt="Image 1" class="shadow" style="max-height: 55vh;" />
</section>

<section class="slide centered">
  <h2>Section Title</h2>
  <p class="muted">Caption 2</p>
  <img src="./image2.png" alt="Image 2" class="shadow" style="max-height: 55vh;" />
</section>

当规范文件包含

<!-- image gallery - VERTICAL -->

时，将每张图片分割为独立的幻灯片：

html

<section class="slide centered">
  <h2>Section Title</h2>
  <p class="muted">Caption 1</p>
  <img src="./image1.png" alt="Image 1" class="shadow" style="max-height: 55vh;" />
</section>

<section class="slide centered">
  <h2>Section Title</h2>
  <p class="muted">Caption 2</p>
  <img src="./image2.png" alt="Image 2" class="shadow" style="max-height: 55vh;" />
</section>

Available CSS Classes

可用CSS类

Slide Classes

幻灯片类

```
.slide
```
- base slide
```
.slide.centered
```
- center content
```
.slide.top
```
- align to top

```
.slide
```
- 基础幻灯片
```
.slide.centered
```
- 内容居中
```
.slide.top
```
- 顶部对齐

Color Classes

颜色类

```
.accent
```
- light blue (#ADD7FF)
```
.green
```
- mint green (#5DE4c7)
```
.yellow
```
- soft yellow (#fffac2)
```
.pink
```
- pink (#d0679d)
```
.cyan
```
- cyan (#89ddff)
```
.muted
```
- dim gray

```
.accent
```
- 浅蓝色 (#ADD7FF)
```
.green
```
- 薄荷绿 (#5DE4c7)
```
.yellow
```
- 柔黄色 (#fffac2)
```
.pink
```
- 粉色 (#d0679d)
```
.cyan
```
- 青色 (#89ddff)
```
.muted
```
- 暗灰色

Layout Classes

布局类

```
.columns
```
- two-column grid
```
.split
```
- image + text side by side
```
.gallery
```
- flex gallery for multiple images

```
.columns
```
- 双列网格
```
.split
```
- 图片+文本并排
```
.gallery
```
- 多图片弹性画廊

Element Classes

元素类

```
.subtitle
```
- smaller subtitle text
```
.small
```
- smaller text
```
.quote
```
- styled blockquote
```
.big-number
```
- large stat/number
```
.badge
```
- tag/badge element
```
.reveal
```
- progressive reveal item (use with
```
data-progressive
```
)

```
.subtitle
```
- 较小的副标题文本
```
.small
```
- 较小的文本
```
.quote
```
- 带样式的块引用
```
.big-number
```
- 大型统计数字/数值
```
.badge
```
- 标签/徽章元素
```
.reveal
```
- 渐进式显示项（配合
```
data-progressive
```
使用）

Progressive Reveal

渐进式显示

Add

data-progressive

to a slide to reveal content one item at a time on advance.

How it works:

Slide starts with title visible, all
```
<li>
```
and
```
.reveal
```
elements hidden
Each advance (→, Space, or Next button) reveals the next item
When all items are visible, next advance goes to the next slide
Going back shows previous slide with all items visible

Note: Progressive slides use

padding-top: 15vh

instead of vertical centering to prevent layout shift as items reveal.

为幻灯片添加

data-progressive

属性，可在翻页时逐项显示内容。

工作原理：

幻灯片初始状态显示标题，所有
```
<li>
```
和
```
.reveal
```
元素隐藏
每次翻页（→、空格键或下一页按钮）显示下一项
所有项显示完毕后，再次翻页将进入下一张幻灯片
向后翻页时，上一张幻灯片的所有项均为显示状态

注意： 渐进式幻灯片使用

padding-top: 15vh

而非垂直居中，以防止内容显示时发生布局偏移。

Progressive Bullet Points

渐进式项目符号列表

html

<section class="slide" data-progressive>
  <h2>Key Points</h2>
  <ul>
    <li>First point (revealed on first advance)</li>
    <li>Second point (revealed on second advance)</li>
    <li>Third point (revealed on third advance)</li>
  </ul>
</section>

html

<section class="slide" data-progressive>
  <h2>Key Points</h2>
  <ul>
    <li>First point (revealed on first advance)</li>
    <li>Second point (revealed on second advance)</li>
    <li>Third point (revealed on third advance)</li>
  </ul>
</section>

Progressive Custom Elements

渐进式自定义元素

Use

.reveal

class for non-list items:

html

<section class="slide centered" data-progressive>
  <h2>Before & After</h2>
  <div class="reveal">
    <p class="muted">Before</p>
    <div class="mermaid-wrapper">
      <pre class="mermaid">graph LR; A-->B</pre>
    </div>
  </div>
  <div class="reveal">
    <p class="muted">After</p>
    <div class="mermaid-wrapper">
      <pre class="mermaid">graph LR; A-->B-->C-->D</pre>
    </div>
  </div>
  <p class="reveal muted">Summary text revealed last</p>
</section>

非列表项可使用

.reveal

类：

html

<section class="slide centered" data-progressive>
  <h2>Before & After</h2>
  <div class="reveal">
    <p class="muted">Before</p>
    <div class="mermaid-wrapper">
      <pre class="mermaid">graph LR; A-->B</pre>
    </div>
  </div>
  <div class="reveal">
    <p class="muted">After</p>
    <div class="mermaid-wrapper">
      <pre class="mermaid">graph LR; A-->B-->C-->D</pre>
    </div>
  </div>
  <p class="reveal muted">Summary text revealed last</p>
</section>

Progressive Image Gallery

渐进式图片画廊

html

<section class="slide centered" data-progressive>
  <h2>Feature Walkthrough</h2>
  <div style="display: flex; gap: 30px; justify-content: center;">
    <div class="reveal" style="text-align: center;">
      <p class="muted">Step 1</p>
      <img src="./step1.png" class="shadow" />
    </div>
    <div class="reveal" style="text-align: center;">
      <p class="muted">Step 2</p>
      <img src="./step2.png" class="shadow" />
    </div>
    <div class="reveal" style="text-align: center;">
      <p class="muted">Step 3</p>
      <img src="./step3.png" class="shadow" />
    </div>
  </div>
</section>

html

<section class="slide centered" data-progressive>
  <h2>Feature Walkthrough</h2>
  <div style="display: flex; gap: 30px; justify-content: center;">
    <div class="reveal" style="text-align: center;">
      <p class="muted">Step 1</p>
      <img src="./step1.png" class="shadow" />
    </div>
    <div class="reveal" style="text-align: center;">
      <p class="muted">Step 2</p>
      <img src="./step2.png" class="shadow" />
    </div>
    <div class="reveal" style="text-align: center;">
      <p class="muted">Step 3</p>
      <img src="./step3.png" class="shadow" />
    </div>
  </div>
</section>