Imported from AudioCC-Lab/audiocc_deck_html (AGENTS.md). Install upstream with npx skills add AudioCC-Lab/audiocc_deck_html. Copyright stays with the author.

AGENTS.md — SJTU AudioCC Lab Slide Template

Auto-loaded by Codex CLI. Read this first, then read BRIEF.md for the current deck state.

1. Project structure

slides.md       ← all slide content (edit this)
index.html      ← renderer: KaTeX pre-render + remark.js config
BRIEF.md        ← current deck state: slide count, figures, rules (keep updated)
assets/figs/    ← all figures (PNG/SVG)
style/          ← CSS: style.css, multicolumn.css, callout.css, blockquote.css, table.css, toc.css

Only edit slides.md and BRIEF.md in normal use. Touch index.html only to update TOTAL_SLIDES.

2. Math rendering — the critical rule

index.html pre-renders all KaTeX on the raw markdown string before remark.create(). This is essential: remark.js's markdown parser would otherwise mangle raw LaTeX (_ → italic, * → emphasis).

Never use <img> PNG images for equations — inline KaTeX is always preferred.

If a formula fails to render: wrap in $$...$$ instead of $...$.

3. Slide syntax

---

# Slide Title

.left-column[
Left content. Inline math: $E = mc^2$
]

.right-column[
.figure[
![:scale 70%](assets/figs/foo.png)
.caption[Caption text]
]
]

???
Speaker notes (shown only in presenter mode)

---

• Slide separator: --- on its own line
• Speaker notes: after ???, before the next ---
• Incremental reveals: -- on its own line

4. Layout classes

5. Special slide classes

class: cover      # Title / Thank-you slide
class: section    # Section divider (dark blue bg, gold h1)
class: references # Small-font reference list

6. Utility CSS classes

Size: .tiny .scriptsize .footnotesize .small .midsize .normalsize .large .huge Color: .red .blue .gray .white .darkred .darkblue .orange Style: .bold .italic .center .right .left

Callout boxes:

![:callout note](Content)
![:callout warn](Warning)
![:callout tip](Tip)
![:callout info](Info)
![:callout question](Question)

Utility boxes:

<div class="box">Blue left-border box</div>
<div class="box box-orange">Orange variant</div>
<div class="box box-green">Green variant</div>

7. Figures

.figure[
![:scale 60%](assets/figs/filename.png)
.caption[Caption text]
]

All figure files live in assets/figs/. Always confirm a file exists before referencing it.

8. index.html — what to update

• var TOTAL_SLIDES = N; — update when slide count changes (0 = auto-count)
• PPTX palette: header #003D72 · gold #F0BD47 · footer-blue #0073CF · footer-orange #E37221

9. Workflow

1. Read BRIEF.md to understand the current deck state before making any changes.
2. Edit slides.md incrementally — do not rewrite slides the user hasn't asked to change.
3. Write formulas as $$...$$ (display) or $...$ (inline). Verify KaTeX syntax before saving.
4. Confirm figure files exist in assets/figs/ before adding ![:scale] references.
5. After adding or removing slides, update TOTAL_SLIDES in index.html and the state in BRIEF.md.
6. Keep BRIEF.md in sync with the actual state of slides.md after every session.