Comments (9)
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.
Related Issues (20)
- follow up on #520 HOT 1
- 在引用块第一位使用 kbd标签后面链接无法正常解析
- Unexpected nested list behavior
- Ordered list is not generated if there's no newline at the end
- Double line breaks (\n\n) are not converted properly HOT 2
- Error using divider with `---` HOT 1
- Empty `<style></style>` or `<style />` causes library to crash
- React 19 incompatibility
- unordered lists don't work
- How to prevent html tag shown when doing streaming
- Nested UL crash rendering
- Feature request: Handle user selection change event in rendered Markdown. Emit an event that returns the corresponding selection in plain Markdown
- include ref property to any div crashes
- type "[key: string]: any" makes extension difficult
- Editing overrides in nested markdown
- Pipe breaks the heading formatting
- Option to provide a custom component as wrapper / pass className to wrapper? HOT 1
- Script tag causes exception
- Trivial RegExp DoS (leading spaces) HOT 2
- parse link incorrectly when both have italic text and link which include '_-'
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from markdown-to-jsx.