Markdown Component for dioxus

A Markdown component for dioxus. See a live preview on this page.

Getting Starting

Add to your existing dioxus project:

cargo add markdown-dx

Add the Markdown component to your application.

use {
    dioxus::prelude::*,
    markdown_dx::{Markdown, Options},
};

fn main() {
    dioxus::launch(App);
}

#[component]
fn App() -> Element {
    let md: String = get_markdown();

    // Options has a builder pattern constructor
    let options = Options::builder()
        .disable_default_theme(true)        // bring your own theme 
        .enable_heading_enumeration(true)   // headings will be numbered
        .include_frontmatter_header(true)   // add a small header
        .build();

    rsx! {
        // you have disabled the default theme, you should bring your own
        document::Link { rel: "stylesheet", href: asset!("path/to/your/index.css") }

        Markdown { src: md, options }
    }
}

Done.

Feature overview

• supported constructs:
  • Blockquotes
  • Linebreaks without starting a new paragraph
  • Code Blocks (more feature rich version may come eventually)
  • Image/Link Definition
  • Strikethrough Text
  • Emphasis Text
  • Footnotes
  • six levels of Headings
  • Inline HTML
  • Images
  • Images from Definitions
  • Inline Code
  • Inline Math, using katex
  • Links
  • Links from Definition
  • Ordered, Unordered Lists, even with Checkboxes
  • Math Blocks, using katex
  • Paragraphs
  • Bold Text
  • Thematic Breaks
  • Frontmatter Toml
• not supported:
  • Mdx Stuff (personally not familiar with that and adding support gave too much trouble to bother right now)
  • Frontmatter Yaml, is technically an option, but no difference to Toml, so not worth it, imo
• some rendering bonus
  • optional heading numbering
  • headings get unique IDs and are made clickable
  • optional document header with author, title and date
  • default css theme, can be disabled to bring your own

Configuration

The Markdown component has an optional Options prop, which allow some changes to the rendering output:

1. disabling the built-in css
   • check out the css to give you an idea how you can create your own theme
2. enabling heading numbering
3. enabling a small header, using data from Frontmatter
   • author: String naming the author of the document
   • title: String giving the document a name
   • date: Datetime dating the document

The sample page has all options, 2 and 3 enabled.

Styling

TODOs

• use code meta to build a dedicated Code component
  • separate crate
  • proper formatting, with syntax highlighting (needs code parsing)
  • title/caption
  • start line number
  • file name
  • etc.
• Inline Math element without dangerous_inner_html
• Html element without dangerous_inner_html
• Math element without dangerous_inner_html
• MathML to dioxus parser

Low Priority TODOs

• Mdx elements
  • Flow Expression
  • Jsx Flow Expression
  • Jsx Text Element
  • Mdx Text Expression
  • Mdx js Esm
• Yaml element