I usually combine remark-parse, remark-rehype and rehype-react to transform markdown into react components. The configuration of the processor is like:

Use this excellent open source library. https://github.com/rehypejs/rehype-react

import React from 'react' import { graphql } from 'gatsby' import RehypeReact from 'rehype-react' const MyGatsbyPage = ({ data }) => { /* AST renderer we use at Anvil: https://github.com/rehypejs/rehype-react */ const renderAst = new RehypeReact({ createElement: React.createElement, }).Compiler return (

{data.frontmatter.title}

{data.frontmatter.date}

By ${data.frontmatter.author}

{data.frontmatter.summary}

{renderAst(data.htmlAst)}

) } export default MyGatsbyPage export const pageQuery = graphql` query BlogPostByPath($slug: String!) { site { siteMetadata { siteName title description keywords } } markdownRemark(frontmatter: { path: { eq: $slug } }) { htmlAst frontmatter { date title summary author image { publicURL childImageSharp { gatsbyImageData } } } } } `

Shameless plug for the Rehype plugin [1] I wrote based on Starry Night [2]. If you're interested in syntax highlighting like GitHub or customize it with CSS properties (for example, to support multiple themes), this is one solution.

[1] https://github.com/Microflash/rehype-starry-night