rermarkgfm showing tasklist wrong about react-markdown

[remcohaszing]

This issue contains no information and can't be acted upon.

[OpenJarvisAI]

@remcohaszing Can your lib render task list right???

[ChristianMurphy]

Yes, you can see working example on the demo page https://remarkjs.github.io/react-markdown/

Take some time to frame your question (https://github.com/remarkjs/.github/blob/main/support.md#asking-quality-questions)
A runnable example of what you are trying inside a sandbox gives context on what you are trying to do in the code.

[OpenJarvisAI]

• fff
• rtgrt

Am not sure you guys like telling something that obviously wrong.

[ChristianMurphy]

@OpenJarvisAI there is a GFM toggle on the demo page.
Toggle it on.

My best guess right now, is like on the demo site.
You ignored the step in the readme to switch GFM on https://github.com/remarkjs/react-markdown#use

If you want additional support, follow the guidance from my last message on how to frame a question and provide context. Stop wasting maintainer time by posting without actually trying anything.

[OpenJarvisAI]

I am a 10 years front-end developer, and I have set

<Markdown remarkPlugins={[remarkGfm]}>{markdown}</Markdown>

plugin on,not work

[ChristianMurphy]

I am a 10 years front-end developer

Great, act like it then 🙂

<Markdown remarkPlugins={[remarkGfm]}>{markdown}</Markdown>

That doesn't answer my question, how are you running it?
There are millions of possible build tools.
Here is a minimal reproducible example showing it working with latest vite, react-markdown, and remark-gfm
https://stackblitz.com/edit/github-j5vjzd?file=package.json,src%2Fapp.tsx

Show a minimal reproducible example of what you are seeing.

[OpenJarvisAI]

@ChristianMurphy hi, am just using nextjs.

[OpenJarvisAI]

Oh, I looked it jusst like mine, the blaxk dot is can be invisiable?

• ddd
• ddd

look at github

[ChristianMurphy]

am just using nextjs

There are 14 major versions of next and many possible build configurations, share a reproducible example so we can help you.
https://next.new could be a starter.

the black dot is can be invisible?

I don't understand what you are asking.
What black dot?

Broadly speaking you can style HTML to look like anything.
Check your style sheet to see how you are customizing the page appearance, you may be styling check lists to not appear.

Tailwind CSS is particularly well known to have styles which break markdown rendering by default.

[OpenJarvisAI]

@ChristianMurphy Can't u just look at the exaple you kindly prepared? Does they looks exact like github???

I just want the black dots disappear, it's very very very ugly!

[ChristianMurphy]

@OpenJarvisAI that is how markdown works, it is specified in the standard. https://github.github.com/gfm/#task-list-items-extension-

Markdown does not specify the styles, that is completely up to you and your application.
If you want to style it exactly how GitHub does apply a stylesheet like https://github.com/sindresorhus/github-markdown-css or you can make your own https://www.w3schools.com/CSS/css_list.asp.

[OpenJarvisAI]

I have never (or very rare) see a markdown checklist have black dots before.

I am prefer just using people usually understand way, besides, I am already using gfm and you saying If you want to style it exactly how GitHub does which I am very hard to understand.

Nevertheless, this is the very unique markdown default styling looks so abnormal.

How can I just applying the css linked above to my react & next13 project?

(Honestly, am not a frontend developer)

[ChristianMurphy]

I have never (or very rare) see a markdown checklist have black dots before.

Because almost everyone applies a stylesheet to theme content to match their application.

Nevertheless, this is the very unique markdown default styling looks so abnormal.

That is how HTML looks 🤷
If you want it to look different style it.

How can I just applying the css linked above to my react & next13 project?

By following the Next JS guide on adding external stylesheets https://nextjs.org/docs/pages/building-your-application/styling/css-modules#import-styles-from-node_modules

[OpenJarvisAI]

well, why not add right css as default?

[ChristianMurphy]

There is no "right" CSS.
Every application can have its own look and feel, it is a non-goal for react-markdown to dictate how your app should look.

Broadly speaking, remarkjs and react-markdown follow a variation on the Unix Philosophy.

• Write programs that do one thing and do it well.
• Write programs to work together.
• Write programs to handle Syntax Trees, because that is a universal interface.

react-markdown renders CommonMark to plain React components (hyperscript).

There are plenty of extension points to add other syntax, components, and style attributes.
You are welcome to create a component/module/plugin which has the look and feel that you want for your app and to share it with others.

[OpenJarvisAI]

I get it if you saying unix style. Make something just work nothing more, I agree.

But, as for an UI, can just make some default options or, at least, write some default configs users can do with it?

Rather than give me some render result with list of task box start with ugly dots.

[OpenJarvisAI]

I sitll don't know , how to set css in it.

[remcohaszing]

When it comes to web development, React is quite advanced. I suggest you start with a tutorial to understand the basics of HTML, then work up to CSS, then JavaScript, then React. A good starting point would be https://www.w3schools.com/html/default.asp.

[OpenJarvisAI]

OK, so if I have to set all

css for this markdown? Don't think it will overwrite all other components?

[wooorm]

Please take some time to learn markdown and CSS. You write markdown here on GH, that <li> gets interpreted. And for the CSS, learn how to write good CSS and do everything you want.

Locking this. This is not free customer service.