Ratride

Ratride uses tachyonFX-based transitions to animate the movement between slides. Use the transition option in an HTML comment to set the effect.

Slide Transitions

The slide transition (default) moves content in from the left. You can specify directions:

• slide left: Right to left
• slide up: Bottom to top
• slide down: Top to bottom

Other Transitions

• lines: Each line is revealed left-to-right with staggered timing.
• lines-cross: Even lines reveal left-to-right, odd lines right-to-left.
• slide-rgb: A color-cycling leading edge sweeps across the slide.
• lines-rgb: A color-cycling version of the lines transition.

<!-- transition: slide up -->

You can control how content is positioned on a slide using the layout option via HTML comments.

Supported Layouts:

• normal: The default layout.
• center: Centers the content on the slide.
• two-column: Splits the slide into two columns. Use ||| in your Markdown to separate the left and right columns.

Example (Two-Column):

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

## Left Column
- Item 1

|||

## Right Column
- Item 2

Ratride allows you to configure specific slide properties using HTML comments. This enables per-slide customization of layouts, transitions, themes, and background settings.

Supported configuration keys include:

• transition: Defines the animation effect (e.g., slide-in, dissolve, lines-rgb).
• theme: Sets the visual theme (e.g., latte).
• layout: Sets the content alignment (e.g., center).
• bg_fill: A flag to fill the background.
• figlet: Enables Figlet text rendering.
• figlet_color: Specifies colors for Figlet text (comma-separated hex values).

<!-- transition: slide-in -->
<!-- theme: latte -->
<!-- bg_fill -->

# Slide Title

<!-- layout: center -->
<!-- transition: dissolve -->
<!-- figlet -->
<!-- figlet_color: ff6666,ff99ff,5577ff -->

# Figlet Title

To display content at the center of the screen, use the <!-- layout: center --> directive in your markdown file. This is useful for hero sections or focused content blocks.

<!-- layout: center -->

## Center
Content here will be centered.

To create a split-screen or two-column layout, use the <!-- layout: two-column --> directive. Separate the left and right columns using a triple pipe delimiter |||.

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

## Left Column
Content for the left side.

|||

## Right Column
Content for the right side.

To preview your slides with automatic updates as you edit the Markdown file, use the --serve flag. This starts a local development server.

$ ratride slide.md --serve

You can export your Ratride Markdown slides into a standalone HTML format using the --export flag. Provide the target directory where the exported files should be placed.

$ ratride slide.md --export OUT_DIR

You can enable Figlet rendering for headings in your slides by inserting the <!-- figlet --> comment. When this comment is present, headings are converted into ASCII art, while normal text remains unchanged.

<!-- figlet -->

# This Heading Becomes ASCII Art

You can install the Ratride CLI tool using cargo or the JavaScript bindings using npm.

CLI Installation (Rust):

$ cargo install ratride

JS-binding Installation (Node.js):

$ npm install ratride

To use a specific font for Figlet rendering, use the syntax <!-- figlet:fontname -->. This allows you to specify different fonts for different slides or sections.

<!-- figlet:slant -->

# Slant Font Heading

To change or clear the header for a single slide, use an HTML comment directive <!-- header: ... --> immediately before the slide content.

• To set a custom header: Use pipe-separated values (e.g., <!-- header: Item 1 | Item 2 -->).
• To clear the header: Use an empty directive (e.g., <!-- header: -->).

<!-- header: [GitHub](https://github.com) | [Docs](https://docs.rs) -->

# Slide Title