// normally you'll start out with something like:
// import glamorous from 'glamorous'

const Heading = glamorous.h1({

})

const Link = glamorous.a({

})

const Paragraph = glamorous.p({

})

const Code = glamorous.code({

})

const CodeBlock = glamorous.pre({

})

const List = glamorous.ul({

})

const ListItem = glamorous.li({

})


render(
	<ReactMarkdown
		renderers={{
			Heading,
			Link,
			Paragraph,
			Code,
			CodeBlock: props => (
				<CodeBlock key={props.nodeKey} className={props.className}>
					<Code>{props.literal}</Code>
				</CodeBlock>
			),
			List,
			Item: ListItem,
		}}
	/>
)

Hi there šŸ‘‹

We're going to teach you glamorous by having you edit the guide you're reading šŸ˜±

Titles

Let's start by making the headings on this page look nice. With glamorous, instead of the normal CSS syntax you maybe familiar with, we regular JavaScript objects.

Change the Heading to this:

const Heading = glamorous.h1({
  fontSize: '2.4em',
  marginTop: 10,
  color: '#CC3A4B',
})

Help!

That's all we have for now, but if you'd like to help with this guide that'd be super! Please check out the GitHub repo!