leptos-md

Crates.ioleptos-md
lib.rsleptos-md
version0.1.0
created_at2025-12-18 02:04:15.361573+00
updated_at2025-12-18 02:04:15.361573+00
descriptionA simple, signal-free Markdown renderer for Leptos with Tailwind CSS styling
homepagehttps://epenabella.com
repositoryhttps://github.com/epenabella/leptos-md
max_upload_size
id1991568
size126,699
Rick Penabella (epenabella)

documentation

https://docs.rs/leptos-md

README

leptos-md

Crates.io Documentation Leptos 0.8 MIT/Apache 2.0

Markdown rendering for Leptos 0.8+, beautifully styled out of the box.

A lightweight Markdown-to-view component for Leptos with built-in Tailwind CSS styling, dark mode support, and GitHub Flavored Markdown.

Leptos Version: This library targets Leptos 0.8. For older Leptos versions, check the releases for compatible versions.

Features

  • Dead simple API - <Markdown content=md /> and you're done
  • Beautiful by default - Tailwind prose styling with dark mode support
  • GitHub Flavored Markdown - Tables, task lists, strikethrough, footnotes
  • Code block themes - Built-in Tailwind themes (GitHub, Monokai, Dark, Light)
  • External highlighter ready - Outputs language-xxx classes for Prism.js, highlight.js, etc.
  • Configurable - Builder pattern for fine-grained control
  • SSR/SSG ready - Works with server-side rendering and static site generation
  • Zero JavaScript - Pure Rust, renders to static HTML

Installation

Add to your Cargo.toml:

[dependencies]
leptos-md = "0.1"
leptos = "0.8"

Feature Flags

Feature Description
default Standard build (no SIMD)
simd Enable SIMD acceleration for markdown parsing
full All features including SIMD

For faster parsing on supported platforms:

leptos-md = { version = "0.1", features = ["simd"] }

Quick Start

use leptos::prelude::*;
use leptos_md::Markdown;

#[component]
fn App() -> impl IntoView {
    view! {
        <Markdown content="# Hello World\n\nThis is **markdown**!" />
    }
}

That's it! The component handles parsing, styling, and dark mode automatically.

Customization

Use MarkdownOptions for fine-grained control:

use leptos_md::{Markdown, MarkdownOptions, CodeBlockTheme};

#[component]
fn App() -> impl IntoView {
    let options = MarkdownOptions::new()
        .with_gfm(true)                           // GitHub Flavored Markdown
        .with_code_theme(CodeBlockTheme::GitHub)  // Code block theme (Tailwind styling)
        .with_language_classes(true)              // Emit language-xxx classes for syntax highlighters
        .with_new_tab_links(true)                 // Open links in new tab
        .with_allow_raw_html(true)                // Render raw HTML in markdown
        .with_explicit_classes(false);            // Use prose classes (default)

    view! {
        <Markdown
            content="# My Post\n\n```rust\nfn main() {}\n```"
            options=options
        />
    }
}

Supported Markdown Features

Feature Syntax Supported
Headings # H1 to ###### H6 Yes
Bold **text** Yes
Italic *text* Yes
Strikethrough ~~text~~ Yes
Links [text](url) Yes
Images ![alt](url) Yes
Code (inline) `code` Yes
Code blocks ```lang Yes
Blockquotes > quote Yes
Ordered lists 1. item Yes
Unordered lists - item Yes
Task lists - [x] done Yes
Tables GFM tables Yes
Footnotes [^1] Yes
Horizontal rules --- Yes
Raw HTML <div> Configurable

Code Block Themes

These are Tailwind-based background/frame themes for code blocks. They style the container (<pre>) with colors and borders — they do not perform token-level syntax highlighting.

Theme Description
CodeBlockTheme::Default Adapts to light/dark mode
CodeBlockTheme::Dark Dark background, always
CodeBlockTheme::Light Light background, always
CodeBlockTheme::GitHub GitHub's code styling
CodeBlockTheme::Monokai Classic Monokai colors
None (via .without_code_theme()) No styling, for use with external highlighters 
// Use a built-in Tailwind theme
let options = MarkdownOptions::new()
    .with_code_theme(CodeBlockTheme::Monokai);

// Or disable themes entirely (useful with external highlighters)
let options = MarkdownOptions::new()
    .without_code_theme();

Syntax Highlighting with External Libraries

leptos-md outputs language-xxx classes on code blocks (e.g., language-rust, language-javascript). These classes are automatically recognized by popular syntax highlighting libraries.

Using Prism.js

Prism is a lightweight, extensible syntax highlighter.

Add to your HTML <head>:

<link rel="stylesheet" href="https://unpkg.com/prismjs/themes/prism-tomorrow.min.css" />

Add before </body>:

<script src="https://unpkg.com/prismjs/prism.js"></script>
<script src="https://unpkg.com/prismjs/components/prism-rust.min.js"></script>

📖 Prism.js Documentation

Using highlight.js

highlight.js supports 190+ languages with automatic language detection.

Add to your HTML <head>:

<link rel="stylesheet" href="https://unpkg.com/highlight.js@11/styles/github-dark.min.css" />

Add before </body>:

<script src="https://unpkg.com/highlight.js@11/lib/common.min.js"></script>
<script>hljs.highlightAll();</script>

📖 highlight.js Documentation

Recommended Configuration

When using external highlighters, disable the built-in Tailwind theme to avoid style conflicts:

let options = MarkdownOptions::new()
    .without_code_theme()        // No Tailwind theme (let highlighter handle it)
    .with_language_classes(true); // Emit language-xxx classes (default)

MarkdownOptions Reference

Option Type Default Description
enable_gfm bool true Enable GitHub Flavored Markdown
code_theme Option<CodeBlockTheme> Some(Default) Tailwind theme for code blocks (None = no styling)
syntax_highlighting_language_classes bool true Add language-xxx classes for external highlighters
open_links_in_new_tab bool true Add target="_blank" to links
allow_raw_html bool true Render raw HTML in markdown
use_explicit_classes bool false Use explicit Tailwind classes instead of prose

All options use a builder pattern with #[must_use] for safety:

MarkdownOptions::new()
    .with_gfm(true)
    .with_code_theme(CodeBlockTheme::GitHub)  // or .without_code_theme()
    .with_language_classes(true)
    .with_new_tab_links(false)
    .with_allow_raw_html(true)
    .with_explicit_classes(false)

Explicit Classes Mode

By default, leptos-md relies on Tailwind's prose classes for styling. If you're not using the @tailwindcss/typography plugin or want full control over each element's styling, enable explicit classes:

let options = MarkdownOptions::new()
    .with_explicit_classes(true);  // Apply MarkdownClasses::* directly

When enabled, elements receive explicit Tailwind utility classes from MarkdownClasses constants (e.g., MarkdownClasses::H1, MarkdownClasses::PARAGRAPH). You can customize these by overriding the CSS or using Tailwind's @apply directive.

Why leptos-md?

Feature leptos-md Raw HTML Other solutions
Type-safe Yes No Varies
Tailwind styling Built-in Manual Usually not
Dark mode Automatic Manual Varies
SSR/SSG support Yes Yes Varies
Bundle size Minimal N/A Often larger
Leptos 0.8 Yes N/A Often outdated

leptos-md is designed specifically for Leptos applications. It renders Markdown directly to Leptos views (not raw HTML strings), includes beautiful Tailwind styling out of the box, and stays up-to-date with the latest Leptos releases.

Acknowledgments

This project was inspired by rambip/rust-web-markdown (formerly rambip/leptos-markdown).

License

Licensed under either of

at your option.

Commit count: 0

cargo fmt