This is how I created the first version of the Autolink Heading component to replicate the behavior of rehype-autolink-headings for React headings. It's a simple design that get's the job done. However, I'm sure it has a lot of room for improvement.

We could use rehype-autolink-headings for this, but we want to do some styling with TailwindCSS. So we have to wrap the heading manually.

rehype-autolink-headings

So to achieve my goals, I configured the rehype-slug and rehype-autolink-headings plugins to generate links to the headings in the blog post. I also configured the rehype-external-links plugin to add the target="_blank" and rel="nofollow noopener noreferrer" attributes to external links, as well as adding an icon to them.

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