Markdown using <MarkdownRenderer>

<MarkdownRenderer markdown={`### Buttons
<PrimaryButton to="http://www.topcoder.com">Primary</PrimaryButton>
<SecondaryButton to="http://www.topcoder.com">Secondary</SecondaryButton>
<Button to="http://www.topcoder.com" openNewTab>Basic w/ New Tab</Button>
### Join Community Button
<JoinCommunity label="Join The Test Community!"/>
- Note: This button will only function correctly when rendered within a TC Communities page
  (it requires the Redux store to set with community data from the page). There may also be prop warnings when rendered elsewhere.
### Link
<Link to="http://www.topcoder.com" openNewTab>Test Link w/ New Tab</Link>
### Lookers
<Looker lookerId="1146" property="copilot.handle"></Looker>
<Looker lookerId="1146" property="challenge.count" />
<Looker lookerId="1143" property="user.count" />
<Looker lookerId="1148" property="country.country_name" />
<Looker lookerId="1148" property="user.count" />
####  tables with default headers
<Looker lookerId="1143" table="" />
<Looker lookerId="1146" table="" />

#### table 1146 with custom headers
<Looker lookerId="1146" table="[{&q;headerName&q;: &q;Copilot&q;,&q;property&q;: &q;copilot.handle&q;},{&q;headerName&q;: &q;Completed challenges&q;,&q;property&q;: &q;challenge.count&q;}]" />

#### table 1148 with custom style
<Looker lookerId="1148" table="[{&q;headerName&q;: &q;Country&q;,&q;property&q;: &q;country.country_name&q;,&q;styles&q;: {&q;color&q;: &q;red&q;,&q;textAlign&q;: &q;left&q;}},{&q;headerName&q;: &q;Users Count&q;,&q;property&q;: &q;user.count&q;,&q;styles&q;: {&q;color&q;: &q;green&q;}}]" />

#### custom render function
<Looker lookerId="1146" render="function(data){return data[3][&q;copilot.handle&q;]}" />
<Looker lookerId="1148" render="function(data){return data[0][&q;user.count&q;]}" />
`} />