Code Blocks
2020 December 13th
React Components markdown
Gatsby plugin MDX
Yeah let's code!
graphql
1query PostBySlug($slug: String!) {
2 mdx(fields: {slug: {eq: $slug}}) {
3 frontmatter {
4 title
5 date(formatString: "YYYYMMDo")
6 }
7 }
8}
React Component Editor with Live Preview
Live editing React code here is the Dump
component! render
output
const Dump = props => (
<div
style={{
fontSize: 20,
border: '1px solid #efefef',
padding: 10,
background: 'white',
}}>
{Object.entries(props).map(([key, val]) => (
<pre key={key}>
<strong style={{ color: 'white', background: 'red' }}>
{key} 💩
</strong>
{JSON.stringify(val, '', ' ')}
</pre>
))}
</div>
)
render(
<>
<h3>Render Output !</h3>
<Dump props={['One', 'Two', 'Three', 'Four']} />
</>
);
Render Output !
props 💩[
"One",
"Two",
"Three",
"Four"
]
https://github.com/mdx-js/mdx
Cities to JazzLearn PostCSS