Overwrite md heading with astro component | Astro Lounge | Page 1

rough sluice Oct 10, 2022, 1:13 PM

#

How can I overwrite all headings in markdown files so I would have each heading modified with copy to clipboard button addition?

stable moat Oct 10, 2022, 1:34 PM

#

You have to use a markdown plugin to do this, I think Astro uses this plugin:
https://github.com/rehypejs/rehype-autolink-headings
but I could be wrong here is the official lists of plugins
https://github.com/remarkjs/remark/blob/main/doc/plugins.md
and
https://github.com/rehypejs/rehype/blob/main/doc/plugins.md

rough sluice Oct 10, 2022, 5:10 PM

#

hmm I tried adding it for a while

import { defineConfig } from 'astro/config'
import preact from '@astrojs/preact'
import react from '@astrojs/react'
import mdx from '@astrojs/mdx'
import compress from 'astro-compress'

import sitemap from '@astrojs/sitemap'
import rehypeAutolinkHeadings from 'rehype-autolink-headings'

// https://astro.build/config
export default defineConfig({
    markdown: {
        rehypePlugins: [rehypeAutolinkHeadings],
    },
    integrations: [preact(), react(), mdx(), compress(), sitemap()],
    site: `https://bewebdev.tech/`,
})

#

#

It doesn't seem to add anything to the DOM

#

when I try adding smth like this

rehypePlugins: [rehypeAutolinkHeadings({ behavior: 'after' })],

#

I get this error

#Overwrite md heading with astro component