Markdown Sample

All normal markdown syntax is acceptable. There are several enhancements that you can use to make your documentation more interactive.

Displaying Icons

You can display icons from the Material Design Icons, Material Design Icons Light, and Simple Icons libraries.

<Icon name='mdi:account' size='2' color='red' /> <Icon name='mdil:account' /> <Icon name='si:simpleicons' />

Using Library Versions

You can use the latest library versions by using the {{version:LIBRARY_ID}} syntax. For example...

<a href="https://pictogrammers.com/library/mdi/version/{{version:mdì}}">MDI</a>

Will translate to...

<a href="https://pictogrammers.com/library/mdi/version/7.1.96">MDI</a>

Custom UI Elements

Notes

Notes offer unique ways to bring attention to important tidbit of information. You can use info, warning, error, or success for the "type".

<Note title='Here is a note' type='info'> Don't forget to do the things. </Note>

Will render:

Tabs

Tabs can segment information without displaying it all at once.

<Tabs> <Tab title='Tab 1'> ### Tab 1 Content This is some content here. </Tab> <Tab title='Tab 2'> ### Tab 2 Content This is some more content here. </Tab> </Tabs>

Will render:

Tab 1 Content

This is some content here.

Buttons

To display buttons that are consistent with the UX patterns of our site, use the button element.

<Button href='https://www.google.com' startIcon='si:google' variant='contained'>Google</Button>

Will render: Google

You can use most of the props available to the Button element in MUI. The exception is for startIcon and endIcon, you should use the same syntax for displaying an icon as outlined above.

Tables

Tables are supported for showing tabular information.

ProjectLicense
Material Design Icons CommunityApache License 2.0
Material Design Icons SVGMIT License

Code Blocks

All code blocks will render with syntax highlighting.

import React, { Component } from 'react' import Icon from '@mdi/react' import { mdiAccount } from '@mdi/js'

Front Matter

All markdown files must begin with Front Matter to be picked up by the build scripts. Typical front matter looks something like...

--- title: A Nice Title description: A short description about the article's contents. ---

The supported values in front matter are:

// The title of the article, used as the `h1` and title tags for the page. title: string; // A short description, used in the meta tags for the page. description: string; // Whether or not to hide the article from view and search engines. // The only way to view the article is with a direct link. hidden?: boolean;

The only occassion to omit front matter is if you are creating a partial MDX file for inclusion into another.

Including Other MDX Files

You may include markdown files into another. This is useful for larger, more complex articles that it makes sense to segment portions of the article in seperate files.

To do so, use import:, followed by the path to the MDX file.

import(colon)/path/to/document.mdx