Package: markdown2dash
Markdown-2-Dash.. toc::
:min_level: 3Markdown-2-Dash or m2d is a standalone package forked out of theofficial documentation for dash-mantine-components.
Some form of m2d has always existed since the inception of the documentation, but I figured more people can make use of this to document their dash
apps or component libraries.Have a lookhereto see how this README would look after parsing with m2d.Installationpipinstallmarkdown2dashpoetryaddmarkdown2dashQuickstartJust parse the contents of your markdown file with m2d parser, and voilà! You have a layout ready.importdash_mantine_componentsasdmcfromdashimportDashfrommarkdown2dashimportparsewithopen("../README.md")asf:md=f.read()layout=parse(md)app=Dash(__name__)app.layout=dmc.MantineProvider(dmc.Container(layout,size="lg",p=20),withGlobalStyles=True,withNormalizeCSS=True,theme={"primaryColor":"indigo","colorScheme":"light","fontFamily":"'Inter', sans-serif","components":{"Table":{"defaultProps":{"striped":True,"withBorder":True}},"Alert":{"styles":{"title":{"fontWeight":500}}},},},)if__name__=="__main__":app.run(debug=True)There's no styling by default, so you'll have to provide your own css. You can do that in two ways:Wrap your layout in a MantineProvider and use it to style your page (as you can see above)Create CSS files. You can get started with the one provided in this repository:styles.cssExample AppYou can also just run the example app included in this project locally.pythonexample/app.pyAvailable tokens and class namesm2d can render following types of tokens:TokenClass NameLinks.m2d-linkParagraph.m2d-paragraphEmphasis.m2d-emphasisStrong.m2d-strongCode Span.m2d-code spanHeading.m2d-headingThematic Break.m2d-thematic-breakBlock Code.m2d-block-codeBlock Quote.m2d-block-quoteList Item.m2d-list-itemList.m2d-listStrikethrough.m2d-strikethroughMark.m2d-markTable.m2d-tableTable Head.m2d-table-headTable Body.m2d-table-bodyTable Row.m2d-table-rowTable Cell.m2d-table-cellAdmonition.m2d-block-admonitionImage.m2d-block-imageExecutable Block.m2d-block-execDash Component Docs.m2d-block-kwargsTable of Contents.m2d-block-tocSpecial Directivesm2d includes some special directives enabling you to do a lot more than just rendering static markdown into a dash layout.The directives are all extensible, and you can just overwrite the render method to suit your own needs. The default render method is provided in all directives out of the box.Executable BlockYou can use theexecdirective to embed the output of a python script as well as its source code. This directive expects that
you have stored the output layout in the variable calledcomponent... exec::example.componentHere's the output if you are viewing this in a dash app:.. exec::example.componentYou can hide the source code using thecodeargument, and the border usingborder... exec::markdown2dash.example.component
    :code: false
    :border: falseAdmonitionYou can useadmonitiondirective to add dmc.Alert components in your page.
Admonition directive usesDashIconifyto render icons as well... admonition::Alert Title
    :icon: radix-icons:github-logo
    
    This is to show that now you can render alerts directly from the markdown.Here's the output if you are viewing this in a dash app:.. admonition::Alert Title
:icon: radix-icons:github-logoThis is to show that now you can render alerts directly from the markdown.ImageRender images using dmc.Image like this:.. image::https://www.dash-mantine-components.com/assets/superman.jpeg
    :width: 300px
    :height: 300pxHere's the output if you are viewing this in a dash app:.. image::https://www.dash-mantine-components.com/assets/superman.jpeg:width: 300px
:height: 300pxDash Component API DocsIt's very simple to add API docs of your component using m2d. You just have to specify the package and the component.
Let's create one for DashIconify:.. kwargs::DashIconify
    :library: dash_iconifyHere's the output if you are viewing this in a dash app:.. kwargs::DashIconify
:library: dash_iconifyTable of ContentsThis directive will parse all the headings and create a table of contents like this:# a placeholder for self and a list of [<level>, <title>, <id>][(4,'Installation','installation'),(4,'Quickstart','quickstart'),(5,'Example App','example-app'),(4,'Special Directives','special-directives'),(5,'Dash Component API Docs','dash-component-api-docs'),(5,'Table of Contents','table-of-contents')]This will then be used to render the TOC using the render method. You can enable TOC lke this:.. toc::
    :min_level: 3