Styling an article

vertigo-cmark converts CommonMark (markdown) text into vertigo DOM. The look of every kind of element can be set with CMarkStyle, which has a Css field for every element (h1, p, a, table, codeblock, ...) and one for the whole container.

CMarkStyle::default() adds almost no styles. CMarkStyle::browser_defaults() is a preset bringing back the usual look of headings, lists, quotes and tables, handy when a CSS reset (like tailwind's) removed it. Override only what you need and take the rest from a preset:

    use vertigo::{css, dom};
    use vertigo_cmark::{to_vertigo_styled, CMarkStyle};

    const ARTICLE: &str = "
# My article

Some text with a [link](https://vertigo.znoj.pl).

> A quote worth remembering

| Option | Value |
|--------|-------|
| A      | 1     |
";

    let style = CMarkStyle {
        container: css! {"
            max-width: 700px;
            margin: 0 auto;
        "},
        h1: css! {"
            border-bottom: 1px solid gray;
        "},
        a: css! {"
            color: #e07020;
        "},
        // Everything else from the preset
        ..CMarkStyle::browser_defaults()
    };

    dom! {
        <article>{to_vertigo_styled(ARTICLE, style)}</article>
    }

Options and code highlighting

to_vertigo_styled enables tables. Other CommonMark extensions, like strikethrough, task lists or footnotes, can be enabled with Options. With the syntect feature enabled, code blocks with a language get highlighted:

    use vertigo::{css, dom};
    use vertigo_cmark::{to_vertigo_opts_styled, CMarkStyle, Options};

    const NOTES: &str = "
- [x] ~~Write the article~~
- [ ] Highlight the code

~~~rust
fn main() {
    println!(\"Hello!\");
}
~~~
";

    let options =
        Options::ENABLE_TABLES | Options::ENABLE_STRIKETHROUGH | Options::ENABLE_TASKLISTS;

    let style = CMarkStyle {
        // The highlighting theme has light text, so the background should be dark
        codeblock: css! {"
            background-color: #222;
            padding: 10px;
            overflow-x: auto;
        "},
        ..Default::default()
    };

    dom! {
        <div>{to_vertigo_opts_styled(NOTES, options, style)}</div>
    }

This very page is rendered this way.

Markdown from users

The html feature, enabled by default, renders HTML embedded in the markdown as real elements, along with their attributes, including event handlers like onerror. That's fine for your own texts, but if the markdown comes from users, disable it (default-features = false), or it lets them run scripts on your page.