markdown-to-json refuses to work on some aspects

[Roky3029]

My issue is pretty self-explanatory.

I just have a piece of markdown coming from a file and I pass it through the <Markdown></Markdown> component and it just works... more or less.

If I pass something like _Hello World_ it converts it to italics. However, using # to specify headings won't work and neither do tables.

I don't get any console warning or error, and I just can't find what's wrong

[quantizor]

Try wrapping your content with String.raw, often processing React templates perform on strings messes them up

[Roky3029]

Try wrapping your content with String.raw, often processing React templates perform on strings messes them up

Not working, I keep getting the same error, the content is showed and italics, bold... is formatted correctly, however, I keep getting titles (using #) as normal text and tables are not shown

[quantizor]

Gotcha. Any chance you could put together a minimal reproduction? It's hard to help without sample code.

[Roky3029]

Yeah, sure.

My markdown file looks something like this:

---
title: "Some title"
subtitle: "Some subtitle"
date: "some date"
author: "author"
---

Markdown content

### Title

(just a normal markdown file)

then I receive that file in /[slug].tsx in which slug is the filename. I pass that slug to a function that selects the data of the file just like this:

import matter from 'gray-matter' // This is used to separate the data between --- and the content itself
import fs from 'fs'

const getPostContent = (slug: string) => {
    const folder = 'src/posts/'
    const file = `${folder}/${slug}.md`
    const content = fs.readFileSync(file, 'utf-8')
    const matterResult = matter(content)
    return matterResult
}

and then on my component I just pass to the <Markdown> component the content which is not data between ---

const PostPage = (props: any) => {
    const slug = props.params.slug
    const post = getPostContent(slug)

    return (
        <div className='flex items-center justify-center flex-col'>
            <article className='prose lg:prose-xl px-5'>
                <Markdown>{post.content}</Markdown>
            </article>
        </div>
    )
}

The weird thing about it is that some weeks ago it worked absolutedly perfect and then all of a sudden it stopped formatting what I said above. These are some screenshots:

Markdown code

| Team              | Driver 1         | Driver 2          |
| ----------------- | ---------------- | ----------------- |
| Red Bull Racing   | Verstappen       | **Ricciardo**     |
| Ferrari           | Leclerc          | **Hamilton**      |
| Aston Martin      | **Sainz**        | Stroll            |
| Williams          | _Kimi Antonelli_ | Albon             |
| Stake Kick Sauber | Bottas           | **Hulkenberg**    |
| Mercedes          | Russell          | **Alonso**        |
| McLaren           | Norris           | Piastri           |
| Alpine            | Gasly            | **_??? Unknown_** |
| Visa CashApp RB   | _Liam Lawson_    | Tsunoda           |
| Haas              | _Oliver Bearman_ | Magnussen         |

As you can see, bold and italics are working just fine, but the table isn't

[quantizor]

At least visually from that screenshot it looks like the table is intact, are you referring to missing styling or something? The content is aligned into columns as you would expect.

[quantizor]

I'll try to reproduce this in a sandbox, thanks for the sample code

[Roky3029]

Hmmm, that's true. I thought it wasn't correct because before it was showed with paddings, little separators and all of that, and most importantly, centered.

Now that I think of it, it might not be a problem of the <Markdown> component. It could be all happening because of the Tailwind styles I'm applying in the <article> parent element.

I'll try to investigate this and let you know if this was the problem

[Roky3029]

Turns out it was just a Tailwind problem because I accidentally removed the plugin which allowed me to use the prose class.

Thanks for the help anyways.

[quantizor]

Ah ok, thanks for using the library :-)