### Install hotslice using uv package manager

Source: https://github.com/pid1/hotslice/blob/main/README.md

These commands demonstrate how to install hotslice using the 'uv' package manager. The first command adds hotslice as a dependency to a project, while the second installs it as a standalone tool.

```bash
uv add hotslice
```

```bash
uv tool install git+https://github.com/pid1/hotslice
```

--------------------------------

### Install and build slides with hotslice

Source: https://github.com/pid1/hotslice/blob/main/examples/demo.md

Commands to install the hotslice package using uv and generate an HTML presentation from a Markdown file.

```bash
uv add hotslice
hotslice build slides.md
open slides.html
```

--------------------------------

### Install hotslice via one-liner script (macOS/Linux)

Source: https://github.com/pid1/hotslice/blob/main/README.md

This command downloads and executes an installation script for hotslice. It handles dependency installation (like uv) and places the hotslice executable in a user-accessible location. It also sets up configuration directories and a default configuration file.

```bash
curl -fsSL https://raw.githubusercontent.com/pid1/hotslice/main/install.sh | bash
```

--------------------------------

### Development Environment Setup and Commands

Source: https://github.com/pid1/hotslice/blob/main/AGENTS.md

Commands to initialize the development environment and perform common tasks like building, linting, and testing. These scripts should be used instead of direct tool calls to ensure consistency.

```bash
devenv shell
setup
dev
```

--------------------------------

### Theme Directory Structure Example

Source: https://github.com/pid1/hotslice/blob/main/examples/hotslice.html

This example illustrates the expected directory structure for a custom theme in the hotslice project. It includes required CSS files (`theme.css`) and optional JavaScript (`theme.js`) and metadata (`theme.toml`) files. This structure allows for customization of the presentation's appearance and behavior.

```text
themes/my-theme/
  theme.css       ← required
  theme.js        ← optional (runs after deck JS)
  theme.toml      ← optional (metadata)
```

--------------------------------

### Install hotslice with uv

Source: https://github.com/pid1/hotslice/blob/main/examples/hotslice.html

This command installs the hotslice package using the 'uv' package manager. 'uv' is a fast Python package installer and resolver.

```bash
uv add hotslice
```

--------------------------------

### Slide Authoring Markdown Format

Source: https://github.com/pid1/hotslice/blob/main/AGENTS.md

Example of the Markdown structure for hotslice presentations, including TOML frontmatter for configuration and the use of '---' as a slide separator.

```markdown
+++
title = "My Presentation"
theme = "light"
+++

# Title Slide

Subtitle or description here.

---

## Second Slide

Content goes here.

---

## Third Slide

More content.
```

--------------------------------

### Markdown slide structure with frontmatter

Source: https://github.com/pid1/hotslice/blob/main/README.md

This example shows the basic structure of a Markdown file intended for hotslice. It includes TOML frontmatter for metadata like title and theme, followed by slide content separated by '---'. Code blocks are supported with syntax highlighting.

```markdown
+++
title = "My Talk"
theme = "dark"
+++

# Welcome

This is the title slide.

---

## Second Slide

- Point one
- Point two

---

## Code Example

```python
print("hello from hotslice")
```
```

--------------------------------

### Define TOML frontmatter for slides

Source: https://github.com/pid1/hotslice/blob/main/examples/demo.md

Example of the TOML frontmatter structure used at the top of Markdown files to configure presentation metadata like title and theme.

```toml
+++
title = "My Talk"
theme = "dark"
+++
```

--------------------------------

### Customize presentation themes with CSS

Source: https://github.com/pid1/hotslice/blob/main/examples/demo.md

Example of overriding CSS custom properties within a theme's theme.css file to modify the presentation's visual appearance.

```css
:root {
	--slide-bg: #0f172a;
	--slide-fg: #e2e8f0;
	--accent: #38bdf8;
}
```

--------------------------------

### Building Presentations via CLI

Source: https://github.com/pid1/hotslice/blob/main/AGENTS.md

Command-line interface usage for compiling Markdown files into HTML presentations, with options for custom output paths and theme selection.

```bash
hotslice build slides.md                   # → slides.html
hotslice build slides.md -o output.html    # custom output path
hotslice build slides.md --theme dark      # use dark theme
```

--------------------------------

### hotslice CLI build command options

Source: https://github.com/pid1/hotslice/blob/main/README.md

This reference details the 'build' command for hotslice, including its input argument and available flags. Options control the output file path, theme selection, theme directory, presentation title, and slide separator.

```bash
hotslice build <input.md> [options]

| Flag            | Default              | Description                        |
|-----------------|----------------------|------------------------------------|
| -o, --output  | <input_stem>.html  | Output HTML file path              |
| --theme         | `light`              | Theme name or path                 |
| --theme-dir     | bundled `themes/`    | Directory to search for themes     |
| --title         | auto-detected        | Presentation title override        |
| --separator     | `^---$`              | Slide separator regex              |
```

--------------------------------

### Open generated HTML presentation

Source: https://github.com/pid1/hotslice/blob/main/examples/hotslice.html

This command opens the generated HTML presentation file located in the 'dist/' directory. This allows for immediate viewing of the presentation in the default web browser.

```bash
open dist/index.html
```

--------------------------------

### Build HTML slide deck from Markdown

Source: https://github.com/pid1/hotslice/blob/main/README.md

This command initiates the conversion of a Markdown file into an HTML slide deck. The output HTML file is typically named after the input Markdown file and saved in the current directory, unless an output path is specified.

```bash
hotslice build slides.md
```

--------------------------------

### Configure Hotslice via TOML

Source: https://github.com/pid1/hotslice/blob/main/README.md

Defines the structure for user and project-level configuration files. These files allow users to set global or project-specific defaults for themes, separators, and metadata.

```toml
[defaults]
theme = "dark"
separator = "^---$"

[metadata]
author = "Your Name"
date = ""
```

```toml
[defaults]
theme = "light"
separator = "^---$"

[metadata]
author = "Team Name"
date = "2026-01-01"
```

--------------------------------

### Build Markdown presentation with hotslice

Source: https://github.com/pid1/hotslice/blob/main/examples/hotslice.html

This command builds an HTML presentation from a Markdown file named 'slides.md'. The output will be saved in the 'dist/' directory.

```bash
hotslice build slides.md
```

--------------------------------

### Define Hotslice Theme Directory Structure

Source: https://github.com/pid1/hotslice/blob/main/AGENTS.md

The required and optional files for a Hotslice theme. Place these files in the project root or the user configuration directory to enable custom styling and behavior.

```text
themes/my-theme/
  theme.css       # REQUIRED: CSS overrides and custom styles
  theme.js        # OPTIONAL: JavaScript that runs after deck runtime
  theme.toml      # OPTIONAL: metadata (name, description, author)
```

--------------------------------

### Parse slide decks programmatically

Source: https://github.com/pid1/hotslice/blob/main/examples/demo.md

Demonstrates how to use the hotslice Python API to parse a Markdown file and iterate through the resulting slide objects.

```python
from hotslice.parser import parse_deck

deck = parse_deck(Path("slides.md").read_text())
for slide in deck.slides:
	print(f"Slide {slide.index}: {len(slide.html)} bytes")
```

--------------------------------

### Presentation Navigation and Control (JavaScript)

Source: https://github.com/pid1/hotslice/blob/main/examples/hotslice.html

This JavaScript code provides functionality for navigating slides in a web presentation. It handles keyboard events, click events (left/right half of the screen), and URL hash changes for deep linking. It also initializes slide counting, progress bar, and syntax highlighting using highlight.js. Assumes HTML structure with elements having classes like 'slide', and IDs like 'slide-counter' and 'progress-bar'.

```javascript
(function() { const slides = document.querySelectorAll('.slide'); const counter = document.getElementById('slide-counter'); const progressBar = document.getElementById('progress-bar'); const total = slides.length; let current = 0; function showSlide(n) { if (n < 0 || n >= total) return; slides[current].classList.remove('active'); current = n; slides[current].classList.add('active'); counter.textContent = (current + 1) + ' / ' + total; progressBar.style.width = ((current + 1) / total * 100) + '%'; window.location.hash = current + 1; } function next() { showSlide(current + 1); } function prev() { showSlide(current - 1); } // Keyboard navigation document.addEventListener('keydown', function(e) { switch (e.key) { case 'ArrowRight': case ' ': case 'Enter': e.preventDefault(); next(); break; case 'ArrowLeft': case 'Backspace': e.preventDefault(); prev(); break; case 'Home': e.preventDefault(); showSlide(0); break; case 'End': e.preventDefault(); showSlide(total - 1); break; } }); // Click navigation (click right half = next, left half = prev) document.addEventListener('click', function(e) { if (e.target.closest('a, button, input, textarea, select')) return; if (e.clientX > window.innerWidth / 2) next(); else prev(); }); // Hash-based deep linking function loadFromHash() { const hash = parseInt(window.location.hash.replace('#', ''), 10); if (hash >= 1 && hash <= total) showSlide(hash - 1); } window.addEventListener('hashchange', loadFromHash); // Initialize loadFromHash(); showSlide(current); // Syntax highlighting hljs.highlightAll(); })();
```

--------------------------------

### Parse Markdown Deck with hotslice (Python)

Source: https://github.com/pid1/hotslice/blob/main/examples/hotslice.html

This Python snippet demonstrates how to parse a Markdown file into a deck of slides using the `hotslice.parser.parse_deck` function. It iterates through the slides and prints their byte size. Requires the `hotslice` library and `pathlib`.

```python
from hotslice.parser import parse_deck
from pathlib import Path

deck = parse_deck(Path("slides.md").read_text())
for slide in deck.slides:
    print(f"Slide {slide.index}: {len(slide.html)} bytes")
```

--------------------------------

### hotslice Base Slide Styling

Source: https://github.com/pid1/hotslice/blob/main/examples/hotslice.html

Provides basic styling for slides, including display properties, justification, height, and padding. It ensures slides are centered and take up appropriate space.

```css
.slide {
  display: none;
  flex-direction: column;
  justify-content: center;
  min-height: 100vh;
  padding: var(--slide-padding);
}

.slide.active {
  display: flex;
}

.slide-inner {
  max-width: var(--slide-max-width);
  width: 100%;
  margin: 0 auto;
}
```

--------------------------------

### hotslice Light Theme CSS

Source: https://github.com/pid1/hotslice/blob/main/examples/hotslice.html

Defines the light theme for hotslice, setting a white background, dark foreground, indigo accents, and specific fonts. It also includes styles for the title slide and subtle borders.

```css
/* hotslice light theme — clean, minimal, indigo accents */
:root {
  --slide-bg: #ffffff;
  --slide-fg: #1e1e2e;
  --accent: #4f46e5;
  --code-bg: #f1f5f9;
  --code-fg: #334155;
  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'SF Mono', 'Fira Code', 'JetBrains Mono', monospace;
  --slide-padding: 64px;
  --slide-max-width: 1100px;
}

html, body {
  background: var(--slide-bg);
}

/* First slide (title slide) gets special treatment */
.slide[data-index="0"] h1 {
  font-size: 3.5rem;
  background: linear-gradient(135deg, var(--accent), #7c3aed);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.slide[data-index="0"] p {
  font-size: 1.4rem;
  opacity: 0.65;
}

/* Subtle top border on non-title slides */
.slide:not([data-index="0"]) .slide-inner {
  border-top: 3px solid var(--accent);
  padding-top: 1.5rem;
}

/* Code blocks */
.slide pre {
  background: var(--code-bg);
  border: 1px solid #e2e8f0;
}

/* Blockquotes */
.slide blockquote {
  background: #f8fafc;
  border-left: 4px solid var(--accent);
  border-radius: 0 8px 8px 0;
  padding: 1em 1.5em;
}

/* Table rows */
.slide tr:hover td {
  background: #f8fafc;
}
```

--------------------------------

### CSS Custom Properties for Theming

Source: https://github.com/pid1/hotslice/blob/main/examples/hotslice.html

This CSS snippet demonstrates how to override theme variables using CSS custom properties. By redefining properties like `--slide-bg`, `--slide-fg`, and `--accent`, users can easily restyle the presentation's background, foreground text, and accent colors.

```css
:root {
  --slide-bg: #0f172a;
  --slide-fg: #e2e8f0;
  --accent: #38bdf8;
}
```

--------------------------------

### hotslice CSS Theme Variables

Source: https://github.com/pid1/hotslice/blob/main/examples/hotslice.html

Defines CSS variables for theming the hotslice presentation. These variables control colors, fonts, padding, and maximum width for slides, providing a customizable look and feel.

```css
:root {
  --slide-bg: #ffffff;
  --slide-fg: #111111;
  --accent: #4f46e5;
  --code-bg: #f3f4f6;
  --code-fg: #1f2937;
  --font-sans: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
  --slide-padding: 64px;
  --slide-max-width: 1100px;
}
```

--------------------------------

### hotslice Code Block Styling

Source: https://github.com/pid1/hotslice/blob/main/examples/hotslice.html

Styles for inline code and preformatted code blocks. It sets the font, background color, padding, and border-radius for code elements, ensuring readability.

```css
/* Code */
.slide code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--code-bg);
  color: var(--code-fg);
  padding: 0.15em 0.4em;
  border-radius: 4px;
}

.slide pre {
  background: var(--code-bg);
  border-radius: 8px;
  padding: 1.25em 1.5em;
  margin: 1em 0;
  overflow-x: auto;
}

.slide pre code {
  background: none;
  padding: 0;
  font-size: 0.95rem;
  line-height: 1.6;
}
```

--------------------------------

### Hotslice Slide HTML Structure

Source: https://github.com/pid1/hotslice/blob/main/AGENTS.md

The standard HTML template for individual slides. Each slide is wrapped in a section element with a data-index attribute and an inner container for markdown-parsed content.

```html
<section class="slide" data-index="N">
  <div class="slide-inner">
    <!-- parsed markdown HTML here -->
  </div>
</section>
```

--------------------------------

### hotslice Table Styling

Source: https://github.com/pid1/hotslice/blob/main/examples/hotslice.html

Styles for tables within slides, including borders, padding, text alignment, and hover effects for rows. This ensures data is presented clearly.

```css
/* Tables */
.slide table {
  width: 100%;
  border-collapse: collapse;
  margin: 1em 0;
  font-size: 1.1rem;
}

.slide th, .slide td {
  padding: 0.6em 1em;
  text-align: left;
  border-bottom: 1px solid color-mix(in srgb, var(--slide-fg) 15%, transparent);
}

.slide th {
  font-weight: 600;
  color: var(--accent);
  border-bottom-width: 2px;
}
```

--------------------------------

### hotslice Typography Styling

Source: https://github.com/pid1/hotslice/blob/main/examples/hotslice.html

Defines styles for various text elements within slides, including headings (h1, h2, h3), paragraphs, lists, links, and emphasis. It ensures consistent and readable typography.

```css
/* Typography */
.slide h1 {
  font-size: 2.75rem;
  font-weight: 700;
  margin-bottom: 0.5em;
  line-height: 1.15;
  color: var(--slide-fg);
}

.slide h2 {
  font-size: 2rem;
  font-weight: 600;
  margin-bottom: 0.5em;
  line-height: 1.2;
  color: var(--slide-fg);
}

.slide h3 {
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 0.5em;
  line-height: 1.3;
  color: var(--accent);
}

.slide p {
  font-size: 1.25rem;
  line-height: 1.7;
  margin-bottom: 0.75em;
}

.slide ul, .slide ol {
  font-size: 1.25rem;
  line-height: 1.7;
  margin-left: 1.5em;
  margin-bottom: 0.75em;
}

.slide li {
  margin-bottom: 0.35em;
}

.slide li::marker {
  color: var(--accent);
}

.slide a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.slide strong {
  font-weight: 700;
}

.slide em {
  font-style: italic;
}

.slide s {
  text-decoration: line-through;
  opacity: 0.6;
}

.slide blockquote {
  border-left: 4px solid var(--accent);
  padding: 0.5em 1em;
  margin: 1em 0;
  font-style: italic;
  opacity: 0.85;
}

.slide img {
  max-width: 100%;
  max-height: 60vh;
  border-radius: 8px;
  margin: 0.5em 0;
}
```

--------------------------------

### Custom theme CSS variables

Source: https://github.com/pid1/hotslice/blob/main/README.md

This CSS snippet illustrates how to customize a hotslice theme by overriding CSS custom properties. These variables control various visual aspects of the presentation, such as background colors, text colors, fonts, and spacing.

```css
:root {
  --slide-bg: #ffffff;     /* slide background */
  --slide-fg: #111111;     /* text color */
  --accent: #4f46e5;       /* headings, links, accents */
  --code-bg: #f3f4f6;      /* code block background */
  --code-fg: #1f2937;      /* code text color */
  --font-sans: system-ui, sans-serif;
  --font-mono: 'SF Mono', monospace;
  --slide-padding: 64px;
  --slide-max-width: 1100px;
}
```

--------------------------------

### Override CSS Custom Properties

Source: https://github.com/pid1/hotslice/blob/main/AGENTS.md

Use the :root selector in your theme.css file to override default Hotslice styling variables. These properties control colors, fonts, and layout dimensions for the slide deck.

```css
:root {
  --slide-bg: #ffffff;          /* slide background color */
  --slide-fg: #111111;          /* main text color */
  --accent: #4f46e5;            /* accent color for headings, links, markers */
  --code-bg: #f3f4f6;           /* code block background */
  --code-fg: #1f2937;           /* code block text color */
  --font-sans: system-ui, sans-serif;  /* body font stack */
  --font-mono: 'SF Mono', monospace;   /* code font stack */
  --slide-padding: 64px;        /* slide content padding */
  --slide-max-width: 1100px;    /* max content width */
}
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.