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 } } } } } `

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

remark-rehype: remark plugin that turns markdown into HTML to support rehype.

The trouble is when i use use remark-rehype each item from the frontmatter gets converted to either a

Astro supports Markdown input files out of the box as well as remark and rehype plugins.