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

from markdown-to-jsx.

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

from markdown-to-jsx.

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

from markdown-to-jsx.

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

from markdown-to-jsx.

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

from markdown-to-jsx.

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.

from markdown-to-jsx.

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

from markdown-to-jsx.

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.

from markdown-to-jsx.

Ah ok, thanks for using the library :-)

from markdown-to-jsx.