Markdown文件在Next.js中的渲染
首先,我使用 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;
}