Markdown is not perfectly rendered in remix vite

[mhanifmuhsin]

I have a problem with markdown being rendered imperfectly, for example the code doesn't automatically scroll when it is responsive, I built this website with remix, here is the website you can visit my website

and this is the vite config that I did

import { vitePlugin as remix } from "@remix-run/dev";
import { defineConfig } from "vite";
import tsconfigPaths from "vite-tsconfig-paths";
import mdx from "@mdx-js/rollup";
import remarkFrontmatter from "remark-frontmatter";
import remarkMdxFrontmatter from "remark-mdx-frontmatter";
import rehypePrettyCode from "rehype-pretty-code";

export default defineConfig({
	plugins: [
		mdx({
			remarkPlugins: [remarkFrontmatter, remarkMdxFrontmatter],
			rehypePlugins: [rehypePrettyCode],
		}),
		remix({
			future: {
				v3_fetcherPersist: true,
				v3_relativeSplatPath: true,
				v3_throwAbortReason: true,
			},
		}),
		tsconfigPaths(),
	],
});

I would be very grateful if there are friends there who have a solution to this problem.

[ChristianMurphy]

Welcome @mhanifmuhsin! 👋

MDX does not provide styles, what you are seeing is a stylesheet issue.
The issue you are seeing looks like a tailwind issue.

Rehype pretty code block recommends these styles https://rehype-pretty.pages.dev/#styles
If you have more questions on how to style rehype-pretty-code, their community may be able to offer more insights https://github.com/rehype-pretty/rehype-pretty-code/discussions

[mhanifmuhsin]

ok, thank you for your response, but I have another question, this is 1 example when I made code 1. sample with spaces, like this :

if I do it in Playground MDX it successfully renders perfectly, but when I do it in my coding,

this one is not perfect, is it This is the same as the tailwind problem ?

[ChristianMurphy]

This is the same as the tailwind problem?

Yes

[mhanifmuhsin]

ok, thank you very much @ChristianMurphy 😊

[mhanifmuhsin]

For fix problem I have found the solution of :
Rehype Pretty
Git Rehype Pretty
Tailwinnd CSS Typography
and then this is my website