### Complete Presentation Example

Source: https://context7.com/fand/ratride/llms.txt

A full presentation example demonstrating various features.

```APIDOC
## Complete Presentation Example

A full presentation demonstrating multiple features:

```markdown
---
theme: mocha
transition: slide
figlet: slant
header:
  - [GitHub](https://github.com/fand/ratride)
---

<!-- layout: center -->
<!-- figlet_color: 94e2d5,cba6f7,89b4fa -->

# Ratride Demo

Terminal Slideshow Presenter

---

<!-- transition: fade -->

## Features

- **Markdown to slides** - Write in familiar syntax
- **Animated transitions** - 8+ effect types
- **Image support** - PNG, JPG, GIF, WebP
- **Syntax highlighting** - 100+ languages
- **Web export** - Share via browser

---

<!-- layout: two-column -->
<!-- transition: lines -->

## Code Example

```rust
use ratride::markdown::parse_slides;

fn main() {
    let md = std::fs::read_to_string("slides.md")
        .expect("read file");
    let slides = parse_slides(&md, &theme, &fm, None, false);
    println!("Loaded {} slides", slides.len());
}
```

||

## Key Points

1. Parse markdown into slides
2. Apply theme styling
3. Handle directives
4. Render with Ratatui

> Built with Rust for speed!

---

<!-- layout: center -->
<!-- transition: lines-rgb -->
<!-- figlet -->

# Thank You

[amagi.dev/ratride](https://amagi.dev/ratride)
```
```

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

### Install and Run Ratride

Source: https://github.com/fand/ratride/blob/main/README.md

Install the CLI tool via cargo and execute it against a markdown file.

```bash
cargo install ratride
ratride slides.md
```

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

### Complete Ratride Presentation Example

Source: https://context7.com/fand/ratride/llms.txt

A comprehensive example of a Ratride presentation written in Markdown. It showcases frontmatter for global configuration (theme, transition, figlet, header), HTML comment directives for slide-specific settings (layout, figlet_color, transition), and the `|||` separator for two-column layouts. It also includes a Rust code snippet within a slide.

```markdown
---
theme: mocha
transition: slide
figlet: slant
header:
  - [GitHub](https://github.com/fand/ratride)
---

<!-- layout: center -->
<!-- figlet_color: 94e2d5,cba6f7,89b4fa -->

# Ratride Demo

Terminal Slideshow Presenter

---

<!-- transition: fade -->

## Features

- **Markdown to slides** - Write in familiar syntax
- **Animated transitions** - 8+ effect types
- **Image support** - PNG, JPG, GIF, WebP
- **Syntax highlighting** - 100+ languages
- **Web export** - Share via browser

---

<!-- layout: two-column -->
<!-- transition: lines -->

## Code Example

```rust
use ratride::markdown::parse_slides;

fn main() {
    let md = std::fs::read_to_string("slides.md")
        .expect("read file");
    let slides = parse_slides(&md, &theme, &fm, None, false);
    println!("Loaded {} slides", slides.len());
}
```

||

## Key Points

1. Parse markdown into slides
2. Apply theme styling
3. Handle directives
4. Render with Ratatui

> Built with Rust for speed!

---

<!-- layout: center -->
<!-- transition: lines-rgb -->
<!-- figlet -->

# Thank You

[amagi.dev/ratride](https://amagi.dev/ratride)

```

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

### Install Ratride with Cargo

Source: https://context7.com/fand/ratride/llms.txt

Install the ratride CLI tool using the cargo package manager.

```bash
cargo install ratride
```

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

### Install Ratride JS-binding with npm

Source: https://github.com/fand/ratride/blob/main/docs/public/demo.md

Install the JavaScript bindings for Ratride using npm, the Node.js package manager.

```bash
$ npm install ratride
```

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

### Setting Theme in Frontmatter

Source: https://github.com/fand/ratride/blob/main/docs/public/demo.md

Example of setting the Catppuccin theme for all slides using YAML frontmatter.

```markdown
---
theme: macchiato
---
```

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

### Build and Run Cargo Commands

Source: https://github.com/fand/ratride/blob/main/CLAUDE.md

Commands for building, running, and installing the Ratride project using Cargo.

```bash
cargo build
```

```bash
cargo build --release
```

```bash
cargo run -- examples/figlet.md
```

```bash
cargo run -- file.md --theme latte
```

```bash
cargo install --path ratride
```

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

### Dev Server with Live Reload

Source: https://context7.com/fand/ratride/llms.txt

Start a development server that watches for file changes and automatically reloads.

```APIDOC
## Dev Server with Live Reload

Start a development server that watches for file changes and automatically reloads.

```bash
# Start dev server on default port 3000
ratride slides.md --serve

# Use custom port
ratride slides.md --serve --port 8080

# With specific theme
ratride slides.md --serve --theme frappe
```

The dev server watches the source directory for changes, re-exports on modification, and triggers browser reload automatically.
```

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

### Run live-reload server

Source: https://github.com/fand/ratride/blob/main/docs/public/demo.md

Use this command to start a local server that automatically reloads slides upon changes.

```bash
$ ratride slide.md --serve
```

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

### Markdown Syntax Highlighting Example (Rust)

Source: https://github.com/fand/ratride/blob/main/docs/public/demo.md

Demonstrates syntax highlighting for Rust code within Markdown slides.

```rust
fn main() {
    let name = use_name();
    println!("Hello {}", name);
}
```

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

### Start Ratride Development Server

Source: https://context7.com/fand/ratride/llms.txt

Initiate a development server using the ratride CLI for live previewing. The server watches for file changes, automatically re-exports the presentation, and reloads the browser. Options include specifying the port and theme.

```bash
ratride slides.md --serve
```

```bash
ratride slides.md --serve --port 8080
```

```bash
ratride slides.md --serve --theme frappe
```

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

### Ratride CLI Usage Examples

Source: https://context7.com/fand/ratride/llms.txt

Demonstrates basic and advanced command-line options for running ratride presentations, including theme selection, HTML export, and development server mode.

```bash
# Basic usage - present slides in terminal
ratride slides.md
```

```bash
# Use a specific theme
ratride slides.md --theme latte
```

```bash
# Export slides as static HTML for web
ratride slides.md --export ./output
```

```bash
# Start dev server with live reload
ratride slides.md --serve --port 3000
```

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

### Install ratride via npm

Source: https://github.com/fand/ratride/blob/main/ratride-web/README.md

Use this command to add the ratride package to your project dependencies.

```bash
npm install ratride
```

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

### Markdown Syntax Highlighting Example (JavaScript)

Source: https://github.com/fand/ratride/blob/main/docs/public/demo.md

Demonstrates syntax highlighting for JavaScript code within Markdown slides.

```javascript
const Counter = () => {
  const name = useName();  
  return <h1>Hello {name}</h1>;
};
```

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

### Basic Rust Function

Source: https://github.com/fand/ratride/blob/main/examples/links.md

A simple Rust function declaration. This is a basic example of Rust syntax.

```rust
fn main() {}
```

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

### YAML Frontmatter for Global Options

Source: https://github.com/fand/ratride/blob/main/docs/public/demo.md

Example of setting global slide options using YAML frontmatter at the beginning of a Markdown file.

```yaml
---
theme: latte
transition: fade
figlet: slant
image_max_width: 80%
---
```

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

### Run Ratride with JS-binding

Source: https://github.com/fand/ratride/blob/main/docs/public/demo.md

Example of using the Ratride JavaScript binding to load and run Markdown slides from a fetched file.

```javascript
import { run } from "ratride";

const md = await fetch("./slides.md").then((r) => r.text());
run(md);
```

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

### Rust Code Example with Frappé Theme

Source: https://github.com/fand/ratride/blob/main/docs/public/demo.md

A Rust code snippet displayed within a slide using the Catppuccin Frappé theme.

```rust
fn main() {
    println!("frappé!");
}
```

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

### HTML Comment for Per-Slide Options

Source: https://github.com/fand/ratride/blob/main/docs/public/demo.md

Example of setting options for a specific slide using HTML comments.

```html
<!-- figlet: slant -->
<!-- layout: center -->
<!-- theme: latte -->
<!-- bg_fill -->
```

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

### JavaScript Syntax Highlighting

Source: https://github.com/fand/ratride/blob/main/examples/test.md

Example of a fenced code block with JavaScript syntax highlighting enabled.

```js
var foo = function (bar) {
  return bar++;
};

console.log(foo(5));
```

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

### Run Ratride Presentation with JavaScript API

Source: https://context7.com/fand/ratride/llms.txt

Utilize the ratride npm package to embed presentations within web applications. This example shows how to import the run function, define markdown content, and configure presentation options like parent element, theme, and font size. It also demonstrates how to clean up the instance.

```typescript
import { run } from "ratride";

// Configuration options
interface RatrideConfig {
  parent?: HTMLElement;  // Container element (default: document.body)
  fontSize?: number;     // Base font size in pixels
  theme?: string;        // Theme name: mocha, macchiato, frappe, latte
}

// Run a presentation
const markdown = `
# Hello World

Welcome to my presentation!

---

## Slide Two

- Point one
- Point two
`;

const instance = await run(markdown, {
  parent: document.getElementById("slides"),
  theme: "mocha",
  fontSize: 16
});

// Clean up when done
instance.destroy();
```

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

### Rust Code Example with Latte Theme

Source: https://github.com/fand/ratride/blob/main/docs/public/demo.md

A Rust code snippet displayed within a slide using the Catppuccin Latte theme.

```rust
fn main() {
    println!("latte!");
}
```

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

### Rust Code Example with Macchiato Theme

Source: https://github.com/fand/ratride/blob/main/docs/public/demo.md

A Rust code snippet displayed within a slide using the Catppuccin Macchiato theme.

```rust
fn main() {
    println!("macchiato!");
}
```

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

### Transition Effects for Slide Animations

Source: https://context7.com/fand/ratride/llms.txt

Applies animated transitions when entering a slide. Examples include 'fade', 'slide left', 'lines-rgb', and 'dissolve'.

```markdown
<!-- transition: fade -->

# Fade In

This slide fades in smoothly.

---

<!-- transition: slide left -->

# Slide from Left

This slide enters from the left side.

---

<!-- transition: lines-rgb -->

# RGB Lines Effect

Colorful line-by-line animation with rainbow effect.

---

<!-- transition: dissolve -->

## Dissolve Effect

Content appears through a dissolve animation.
```

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

### Basic Markdown Slide Structure

Source: https://context7.com/fand/ratride/llms.txt

Defines the fundamental structure of a ratride presentation using markdown, with slides separated by horizontal rules (`---`) and examples of headings, lists, inline code, code blocks, images, and links.

```markdown
# Welcome to My Presentation

This is the first slide with some bullet points:

- Feature one
- Feature two
- Feature three

---

## Second Slide

Here's some inline `code` and a code block:

```rust
fn main() {
    println!("Hello, Ratride!");
}
```

---

## Third Slide with Image

![alt text](./image.png)

Check out [this link](https://example.com) for more info.
```

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

### Initialize Ratride Presentation

Source: https://github.com/fand/ratride/blob/main/docs/index.html

Fetches a markdown file and executes the Ratride runner.

```javascript
import { run } from "ratride"; async function main() { const md = await fetch("./demo.md").then((r) => r.text()); run(md); } main();
```

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

### Initialize and run ratride

Source: https://github.com/fand/ratride/blob/main/ratride-web/README.md

Import the run function to initialize the slide presenter and call destroy to clean up resources.

```javascript
import { run } from "ratride";

const instance = await run(markdownString, {
  parent: document.getElementById("app"),
  theme: "mocha",
  fontSize: 16,
});

// Cleanup
instance.destroy();
```

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

### Export Presentation to HTML

Source: https://context7.com/fand/ratride/llms.txt

Use the ratride CLI to export your Markdown presentation to a static HTML directory. This includes the main HTML file, markdown content, and assets.

```bash
ratride slides.md --export ./dist
```

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

### Frontmatter Configuration for Presentation Defaults

Source: https://context7.com/fand/ratride/llms.txt

Configures presentation-wide settings such as theme, layout, transition effects, and header links using YAML frontmatter at the beginning of the markdown file.

```markdown
---
theme: mocha
layout: default
transition: slide
figlet: slant
figlet_color: ff0000,ffff00,00ffff
line_height: 1.2
image_max_width: 80%
bg_fill: true
header:
  - [GitHub](https://github.com/fand/ratride)
  - [Demo](https://amagi.dev/ratride)
---

# First Slide

Content here uses the frontmatter defaults...
```

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

### Theme Configuration for Catppuccin Themes

Source: https://context7.com/fand/ratride/llms.txt

Sets the presentation theme using Catppuccin color palettes. Supports 'mocha' (default), 'macchiato', 'frappe', and 'latte'. Themes can be set globally via frontmatter or overridden per slide.

```markdown
---
theme: latte
---

# Light Theme Presentation

This uses the Catppuccin Latte light theme.

---

<!-- theme: macchiato -->

# Override Theme

Per-slide theme override using a directive.
```

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

### Inline and Indented Code

Source: https://github.com/fand/ratride/blob/main/examples/test.md

Demonstrates how to use inline code backticks and indented blocks for preformatted text.

```text
code
```

```text
// Some comments
line 1 of code
line 2 of code
line 3 of code
```

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

### Export slides to HTML

Source: https://github.com/fand/ratride/blob/main/docs/public/demo.md

Use this command to export a markdown slide file to a specified output directory.

```bash
$ ratride slide.md --export OUT_DIR
```

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

### Web Export

Source: https://context7.com/fand/ratride/llms.txt

Export presentations as static HTML for browser viewing.

```APIDOC
## Web Export

Export presentations as static HTML that runs in the browser using WebAssembly.

```bash
# Export to a directory
ratride slides.md --export ./dist

# This creates:
# ./dist/index.html    - Main HTML file
# ./dist/slides.md     - Markdown content
# ./dist/assets/       - Copied images
```

The exported HTML loads the ratride WASM module from unpkg:

```html
<!doctype html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Ratride</title>
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body { background: #1e1e2e; width: 100vw; height: 100vh; overflow: hidden; }
    </style>
</head>
<body>
    <script type="module">
        import { run } from "https://unpkg.com/ratride@latest/dist/index.js";
        const md = await fetch("./slides.md").then((r) => r.text());
        run(md, { theme: "mocha" });
    </script>
</body>
</html>
```
```

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

### JavaScript/WASM API

Source: https://context7.com/fand/ratride/llms.txt

Use the ratride npm package to embed presentations in web applications.

```APIDOC
## JavaScript/WASM API

Use the ratride npm package to embed presentations in web applications.

```typescript
import { run } from "ratride";

// Configuration options
interface RatrideConfig {
  parent?: HTMLElement;  // Container element (default: document.body)
  fontSize?: number;     // Base font size in pixels
  theme?: string;        // Theme name: mocha, macchiato, frappe, latte
}

// Run a presentation
const markdown = `
# Hello World

Welcome to my presentation!

---

## Slide Two

- Point one
- Point two
`;

const instance = await run(markdown, {
  parent: document.getElementById("slides"),
  theme: "mocha",
  fontSize: 16
});

// Clean up when done
instance.destroy();
```
```

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

### Keyboard Navigation

Source: https://context7.com/fand/ratride/llms.txt

Controls for navigating presentations in the terminal.

```APIDOC
## Keyboard Navigation

Terminal navigation controls:

Navigation:
  Right / l / Space  - Next slide
  Left / h           - Previous slide
  j / Down           - Scroll down (when content overflows)
  k / Up             - Scroll up
  d                  - Scroll down 10 lines
  u                  - Scroll up 10 lines
  q / Esc            - Quit presentation

Mouse:
  Click on links     - Open URL in browser
  Hover on links     - Highlight link
```

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

### Header Overlay Configuration

Source: https://context7.com/fand/ratride/llms.txt

Adds persistent header items, optionally with links, to the top-right of all slides. Configuration can be done globally via frontmatter or inline per slide.

```markdown
---
header:
  - [GitHub](https://github.com/user/repo)
  - Contact
  - [Docs](https://docs.example.com)
---

# Slide with Header

The header appears on all slides.

---

<!-- header: Custom | [Link](https://example.com) -->

# Override Header

This slide has a custom header (pipe-separated inline format).
```

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

### CSS Environment Styling

Source: https://github.com/fand/ratride/blob/main/docs/index.html

Resets default browser margins and padding while setting the background color and dimensions for the TUI environment.

```css
* { margin: 0; padding: 0; box-sizing: border-box; } body { background: #1e1e2e; width: 100vw; height: 100vh; overflow: hidden; }
```

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

### Embed Ratride Presentation in HTML

Source: https://context7.com/fand/ratride/llms.txt

This HTML structure embeds a Ratride presentation using its WebAssembly module loaded from unpkg. It fetches the markdown content and initializes the presentation.

```html
<!doctype html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Ratride</title>
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body { background: #1e1e2e; width: 100vw; height: 100vh; overflow: hidden; }
    </style>
</head>
<body>
    <script type="module">
        import { run } from "https://unpkg.com/ratride@latest/dist/index.js";
        const md = await fetch("./slides.md").then((r) => r.text());
        run(md, { theme: "mocha" });
    </script>
</body>
</html>
```

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

### Image Configuration for Max Width

Source: https://context7.com/fand/ratride/llms.txt

Controls the maximum display width of images within the presentation. This can be set globally via frontmatter or on a per-slide basis using directives.

```markdown
---
image_max_width: 60%
---

# Images

All images in this presentation are constrained to 60% width.

---

<!-- image_max_width: 40% -->

![Small image](./photo.png)

This specific image is limited to 40% width.
```

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

### Define Slides in Markdown

Source: https://github.com/fand/ratride/blob/main/README.md

Use standard Markdown syntax with horizontal rules to separate slides and HTML comments for transition effects.

```markdown
# Hello

This is the first slide

---
<!-- transition: slide -->

## Hi again

- This is the second slide
- But with the transition!
```

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

### Figlet ASCII Art Headings

Source: https://context7.com/fand/ratride/llms.txt

Converts headings to ASCII art using figlet. Supports default fonts, specific fonts via `:fontname`, and gradient coloring using `figlet_color`.

```markdown
<!-- figlet -->

# Big Title

This heading becomes ASCII art with default font.

---

<!-- figlet:slant -->

## Slanted

Use a specific font by adding `:fontname`.

---

<!-- figlet:ANSI Shadow -->
<!-- figlet_color: ff0000,ffff00,00ffff -->

# Colorful

Apply gradient colors to figlet headings.

---

## Normal Heading

Without the figlet directive, headings render normally.
```

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

### Fenced Code Blocks

Source: https://github.com/fand/ratride/blob/main/examples/test.md

Shows the use of triple backticks for creating fenced code blocks.

```text
Sample text here...
```

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

### Layout Directives for Slide Structure

Source: https://context7.com/fand/ratride/llms.txt

Controls the layout of individual slides using HTML comment directives. Supports 'center' for centered content and 'two-column' for a split-screen layout.

```markdown
<!-- layout: center -->

# Centered Title

This content will be centered on the slide.

---

<!-- layout: two-column -->

## Left Side

Content for the left column.

- Point A
- Point B

|||

## Right Side

Content for the right column.

1. First item
2. Second item
```

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