Markdown component(s)

[shawnbot]

It would be nice to have a markdown component to replace our use of the markdown-body class. We might be able to hack this with:

const markdownCSS = sass`@import "primer-markdown/index.scss";`

const Markdown = ({className, ...rest}) => (
  <div className={classnames('markdown-body', className)} {...rest} />
)

export withSystemProps(styled(Markdown)`${markdownCSS}`, COMMON)

Ideally, though, we'd port the CSS over. To support MDX, we could take a slightly different tack:

import {MDXProvider} from '@mdx-js/tag'

const components = {
  a: Link,
  h1: props => <Heading is='h1' fontSize={6} {...props} />,
  // etc.
}

const MarkdownProvider = props => (
  <MDXProvider components={components} {...props} />
)

export withSystemProps(MarkdownProvider, COMMON)

[shawnbot]

I also really like how the (now defunkt) MDXC had "native" support for a <markdown> element that allowed you to nest markdown inside HTML or JSX like so:

# Title

<Wrapper>
  <markdown>
    ## Subtitle
    Paragraph
  </markdown>
</Wrapper>

Providing this as a runtime component would require shipping (most? all? of) the mdx runtime, but I think it'd be possible in a webpack loader with a HAST plugin that would look for <markdown> elements and process their contents as mdx (or just markdown). /cc @jxnblk because we were talking about this last week 😁

[emplums]

This is addressed in gatsby-theme-primer!