Having issues formatting markdown

[JessicaDosseh]

I'm having issues rendering the formatted markdown file properly

What mine looks like	What I want it to look like

This is what my getPost data looks like

Portfolio2022/lib/posts.js

import fs from "fs";
import path from "path";
import matter from "gray-matter";
import { remark } from "remark";
import html from "remark-html";

// ------------------------------------------

export async function getPostData(id) {
  const fullPath = path.join(postsDirectory, `${id}.md`);
  const fileContents = fs.readFileSync(fullPath, "utf8");

  // Use gray-matter to parse the post metadata section
  const matterResult = matter(fileContents);

  // Use remark to convert markdown into HTML string
  const processedContent = await remark()
    .use(html)
    .process(matterResult.content);
  const contentHtml = processedContent.toString();

  // Combine the data with the id and contentHtml
  return {
    id,
    contentHtml,
    ...matterResult.data,
  };
}

Here is the component

<div className={main}>
    <div className={ArticleContainer}>
       <div dangerouslySetInnerHTML={{ __html: postData.contentHtml }} />
    </div>
</div>

here is a link to my project

https://github.com/JessicaDosseh/Portfolio2022

[icyJoseph]

Hi,

You need to provide CSS that selects the elements inside the markdown, because markdown naturally breaks down into components like this: https://mdxjs.com/table-of-components/

Alternatively you could use a markdown renderer, for more into that please refer to this document: https://nextjs.org/blog/markdown#styling

[JessicaDosseh]

@icyJoseph Okay, then how do I do that?

Based on this article: https://nextjs.org/blog/markdown#styling

1. Transformation using remark.

• which I've done here --> lib/posts.js

import { remark } from "remark";
import html from "remark-html";
//-----------------------------------------------------
const processedContent = await remark()
    .use(html)
    .process(matterResult.content);
const contentHtml = processedContent.toString();

2. Styling with Tailwind Typography

• which has already been added here -> tailwind.config.js

"devDependencies": {
    "@tailwindcss/typography": "^0.5.2",
 }

[...]

module.exports = {
plugins: [require("@tailwindcss/typography")],
};

But it still doesn't seem to work. If you look at the posts/sample.md file the <article>...</article> content doesn't even show up.

So I'm still not sure what I'm doing wrong or what I'm missing.

[icyJoseph]

Hi,

I have now taken a tour through your project.

A quick patch

1. Use an article instead of a div

// pages/posts/[id].js
 <article
        className="prose lg:prose-xl"
        dangerouslySetInnerHTML={{ __html: postData.contentHtml }}
      />

2. Remove the article tag from the md file.

The thing with Tailwind, is that in order to decide what CSS should be used, the class strings have to be present in your JS/TS/JSX/TSX/HTML/CSS code. They can be defined dynamically, but must be whole. For example:

//  ✔️ works!
const className  = isLarge ? "text-lg" : "text-sm";
// ❌ doesn't work!
const cn = `text-${isLarge ? 'lg' : 'sm'}`

I think when starting with Tailwind, this doesn't come as intuitively as it should.

So it's best to define these things in your JavaScript files.

Most markdown processors protect against XSS by removing tags that are not allowed/expected. Forcing yourself to manage that every time you publish something is not desirable, I'd say.

Alternative

If you want to write more complex blog posts, with free range on which HTML tags, or even use JSX components. I'd recommend these changes:

1. Switch to next-mdx-remote (or any tool that can do mdx, which is a superset of md), in this case yarn add next-mdx-remote --exact
2. Adapt your parser

// lib/posts.js
import { serialize } from "next-mdx-remote/serialize"; // add this import

export async function getPostData(id) {
  const fullPath = path.join(postsDirectory, `${id}.md`);
  const fileContents = fs.readFileSync(fullPath, "utf8");

  // Use gray-matter to parse the post metadata section
  const matterResult = matter(fileContents);

  const contentHtml = await serialize(matterResult.content);

  // Combine the data with the id and contentHtml
  return {
    id,
    contentHtml,
    ...matterResult.data
  };
}

4. Import MDXRemote component in pages/posts/[id].js import { MDXRemote} from 'next-mdx-remote'
5. And then define a list of components you wish to tweak (because tailwind checks your code as it prepares to load CSS, the classes you use need to statically defined, I think the blog post I shared makes it look like your article could be written in the markdown, but with Tailwind in play that's not gonna fly)

// pages/posts/[id].js
const components = {
  h1: (props) => (
    <h1 {...props} className={`text-lg ${props.className || ""}`} />
  ),
  article: (props) => (
    <article
      {...props}
      className={`prose lg:prose-xl ${props.className || ""}`}
    />
  )
};

6. Inject the data

// pages/posts/[id].js later in the JSX
 <MDXRemote {...postData.contentHtml} components={components} />

Notice that it picks up on the article tag inside the markdown file.

[wwwdepot]

You need to wrap your HTML content with a <div className="prose">...</div> or they don't have any style.

// pages/posts/[id].js

<article class="prose lg:prose-xl">
      <div dangerouslySetInnerHTML={{ __html: postData.contentHtml }} />
</article>

[JessicaDosseh]

That makes more sense. Thank you both for all the help!

[batchor]

Hi,

You need to provide CSS that selects the elements inside the markdown, because markdown naturally breaks down into components like this: https://mdxjs.com/table-of-components/

Alternatively you could use a markdown renderer, for more into that please refer to this document: https://nextjs.org/blog/markdown#styling

My question is, even without any selector and css, at least there should be default styles for tags like ul, ol.

The problem I have is that all the styles, including browser defaults, are missing and the content looks just like plain text.

[batchor]

I have the same problem and non of the solutions worked for me. There are no styles, even for ol and ul, and all the content looks like plain text.

I'm wondering why this happen because there are at least the default styles. For example, the paragraph spacing and ol ul decorations.

[tergeltengis1]

try this:

https://v1.tailwindcss.com/docs/typography-plugin

Here is my code below(working):

<div className={cn(fonts.className, 'prose')}>
    <MDXRemote source={post.content} />
</div>