How can I use Remark with Astro to make my posts written in markdown preserve the styling?

Question

I have a blog written in Astro and I write my posts in markdown. I'm having troubles using remark and remark-html to pass my md tags (such as ##) when I render the post.

async function remarkContent(content) {
    const file = await remark()
        .use(remarkHtml)
        .process(content);
    return content;
}

I have tried this function and then pass it to an Html fragment but it does not work

score 0 · Answer 1 · answered Dec 13 '22 at 10:18

Astro has built-in support for Markdown files and remark, so if your content is in your project folder, you can either place Markdown files in your src/pages/ and have them automatically transformed into pages or place your files elsewhere, src/content/ for example, and import them for rendering.

If your content is stored remotely and you are fetching it, you may still need to do something like your example function.

I think the main issue with your example code is that it returns content. It should return the transformed file instead:

async function remarkContent(content) {
    const file = await remark()
        .use(remarkHtml)
        .process(content);
    return String(file);
}

You could then use this in an Astro comment using the set:html directive:

<Fragment set:html={remarkContent(mdString)} />

It does not returns the markdown text formatted correctly... — Raffaele Grieco, Dec 13 '22 at 15:11
Can you provide some more information about what you expect to happen and what actually is happening? — swithinbank, Dec 14 '22 at 21:58
I want to display the format I used with MarkDown such as # title ## as subtitle ecc... But it does not working — Raffaele Grieco, Dec 15 '22 at 08:13

How can I use Remark with Astro to make my posts written in markdown preserve the styling?

1 Answers1