首先，我使用 npx create-next-app 创建了网站（使用所有默认选项）

然后，在项目目录中运行 npm install marked 安装 marked

接着，在 public 文件夹内添加了一个 README.md 文件

我尝试将 readme 文件放在其他位置，但即使写入正确路径后，也无法正常工作

渲染 MD 文件的代码:

"use client"
import React, { useState, useEffect } from "react";
import { marked } from 'marked';
import '@/app/Bookmarks/styles.css'
``` const Bookmarks = () => {
  const [readmeContent, setReadmeContent] = useState("");

  useEffect(() => {
    const fetchReadme = async () => {
      try {
        const response = await fetch("/README.md");

        if (!response.ok) {
          throw new Error(`HTTP error! status: ${response.status}`);
        }

        const textContent = await response.text();
        const parsedContent = marked(textContent);

        setReadmeContent(parsedContent);
      } catch (error) {
        console.error("Error fetching README.md:", error);
      }
    };

    fetchReadme();
  }, []);

  return (
    <>
      <div className="mx-auto py-16">
        <p className="text-start text-5xl px-11">Read / Watch Laters</p>
      </div>

      <div className="px-11 mb-10">
        <hr className="px-10 w-3/3 mb-10 "></hr>
            {/* 使用样式呈现解析后的 Markdown 内容 */}
            <div   
            dangerouslySetInnerHTML={{ __html: readmeContent }}   
            className="markdown-content"
            ></div>
      </div>
    </>
  );
}; ```js
import '@/app/Bookmarks/styles.css'

如果您在全局.css文件中编写CSS，该文件位于app文件夹内，则路径将是import '@/app/globals.css'

CSS用于样式化链接、标题、文本等：

@tailwind base;
@tailwind components;
@tailwind utilities;

body {
  background-color: black;
  color: white;
}

.markdown {
  @apply space-y-4; /* 在元素之间添加垂直空间 */
}

/* 标题 */
.markdown h1 {
  @apply text-5xl font-bold; 
}

.markdown h2 {
  @apply text-3xl font-semibold; 
}

.markdown h3 {
  @apply text-2xl font-semibold; 
}

.markdown h4 {
  @apply text-xl font-semibold; 
}

/* 链接 */
.markdown a {
  @apply text-blue-500; 
}

/* 段落 */
.markdown p {
  @apply leading-relaxed; 
}
``` ```css
/* 引用样式 */
.markdown blockquote {
  @apply bg-gray-100 border-l-4 border-blue-500 px-4 py-3 my-4; 
}

/* 代码块 */
.markdown pre {
  @apply bg-gray-800 text-gray-200 p-6 rounded-md; 
}

/* 水平分割线 */
.markdown hr {
  @apply border-t-2 border-gray-300 my-8; 
}

/* 表格 */
.markdown table {
  @apply table-auto border-collapse border border-gray-300; 
}

/* 表头 */
.markdown th {
  @apply p-4 border border-gray-300 bg-gray-200 font-semibold; 
}