Markdown Sample

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

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' />

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.4.47">MDI</a>

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 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:

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 are supported for showing tabular information.

All code blocks will render with syntax highlighting.

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

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.

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