This Svelte library contains the <MarkdownBlock> component to render Markdown content (either user-provided or contained in the model). It also contains the <MaybeMarkdown> component for MarkdownOr<T> variables (see @web2paper/modeling-schema).

⚠️ Web2Paper and its ecosystem are under construction. Expect breaking change to API and bugs.

Usage:

<script lang="ts">
    import "app.css";
    import {MarkdownBlock, type MarkdownRenderingOptions} from "$lib";

    // This is Markdown with some plugins
    // NB: :nerdicon allows you to render an icon from a Nerd Font (here it is \uee46, depending on the font used 
    // to display this example you may or may not see it)
    const md = `
# Markdown

Hello :nerdicon[].

You also have access to :colored[some directives]{color=happy} and can [make your own](https://ssssota.github.io/svelte-exmarkdown/docs/03-plugin-overview).
    `

    const options: MarkdownRenderingOptions = {
        // Add the `md` class to every heading
        headingClass: "md",

        // Start the Markdown headings at h2
        startHeadingLevel: "h2"
    }
</script>

<style>
    :root{
        /* :nerdicon directive requires this CSS variable to know which Nerd Font (https://www.nerdfonts.com/#home) to use. */
        --font-code: "FiraCode Nerd Font Mono";

        /* You need to create this CSS variable to make the color "happy" available to the :colored directive */
        --color-happy: orange;
    }
</style>

<div>
    <h1>Template</h1>
    <h2>Svelte</h2>
    <p>This template mixes Svelte template with structured content and markdown</p>

    <MarkdownBlock {md} {options}/>
</div>

h2.md {
    color: cadetblue;
}