markdown-dx 0.1.0

A Markdown Component for dioxus
Documentation 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122

# Markdown Component for [dioxus]

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

## Getting Starting

Add to your existing [dioxus] project:

```shell
cargo add markdown-dx
```

Add the `Markdown` component to your application.

```rust
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](#todos))
  - 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](assets/styles.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

[dioxus]: https://github.com/DioxusLabs/dioxus
[katex]: https://github.com/katex-rs/katex-rs
[page]: https://pnys.codeberg.page/index/dx/markdown