#Site-wide markdown custom HTML override

8 messages · Page 1 of 1 (latest)

ocean vigil
#

Hello! I sincerely hope this hasn't been asked before. I searched through the following documents:

And couldn't find my answer. I was excited to find out that I can use .mdx to create customer markdown component overrides. I wanted to add additional logic to my default anchor tags. So I did the following in one of my src/content/blog/*.mdx files:

import LinkButton from "@components/LinkButton.astro";
export const components = {a: LinkButton};

This worked beautifully, and made my markdown links render exactly as I wanted. However, the downside is that now I need to import / override every single blog post with these 2 lines. So my question is: Is there a way to configure this globally so I don't need to import / export these 2 lines in every single .mdx file?

iron hound
#

Yes, there are ways to do it, but all that I know of include remark plugins. Have a look at my collection of plugins (astro-m2dx) how to do it or use it as is, if it suites your needs:
https://www.npmjs.com/package/astro-m2dx#export-components

ocean vigil
#

@iron hound Thanks for the tip! I read the README, but I'm having trouble visualizing where / how I'd use this. I see that I should add m2dx to my astro.config.mjs file. Where would I add the exportComponents option? And where would I export this component? Perhaps src/content/config.ts?

iron hound
#

You create a _components.ts file similar to the one in the readme and put it in src or src/content and you add m2dx to the astro config and pass it an options object with exportComponents: true. https://www.npmjs.com/package/astro-m2dx#install

#

The m2dxOptions even have auto complete if you import the type.

ocean vigil
#

OH. That giant block that says // activate any required feature here Oops. Okay, let me give this a go.

iron hound
#

One warning upfront: m2dx is not tested on Astro 2, because I am still on 1.9.2 due to compatibility issues of my image integration.

ocean vigil
#

Ooooooh. Okay. I just built this last night, so I'm not sure what version I'm on. 🤔