文章
nextjs配置wangEditor代码高亮
默认编辑器页面代码块根据不同类型的代码是有对应样式的，但是详情页面代码样式需要自己安装组件展示对应样式。
1、安装代码高亮组件
npm install prismjs
npm i -D @types/prismjs2、详情页面启用代码高亮
"use client";
import * as Prism from 'prismjs'
import 'prismjs/themes/prism-okaidia.css' // 或 prism-tomorrow、prism-coy 等
// 按需引入语言（避免打包体积过大）
import 'prismjs/components/prism-python'
import 'prismjs/components/prism-java'
import 'prismjs/components/prism-typescript'
import 'prismjs/components/prism-javascript' // TypeScript 依赖 JavaScript
import 'prismjs/components/prism-bash' // Shell 命令
import 'prismjs/components/prism-json'
import 'prismjs/components/prism-markdown'
import { useParams, useRouter } from "next/navigation";
import { useDocument } from "@/app/(protected)/dashboard/documents/_services/use-document-queries";
import { Button } from "@/components/ui/button";
import { Edit, ArrowLeft } from "lucide-react";
import { useEffect } from 'react';
export default function DocumentDetailPage() {
const { id } = useParams<{ id: string }>();
const router = useRouter();
const documentQuery = useDocument(id);
// Hook 一定要在最上面
useEffect(() => {
if (documentQuery.data?.content) {
Prism.highlightAll()
}
}, [documentQuery.data?.content]);
if (documentQuery.isLoading) {
return <div className="p-8">加载中...</div>;
}
if (!documentQuery.data) {
return <div className="p-8">文档不存在</div>;
}
const { title, content } = documentQuery.data;
return (
<div className="max-w-4xl py-8 px-4 space-y-6">
{/* 顶部操作栏 */}
<div className="flex items-center justify-between">
<Button
variant="ghost"
onClick={() => router.push("/dashboard/documents")}
>
<ArrowLeft className="mr-2 h-4 w-4" />
返回列表
</Button>
<Button
onClick={() =>
router.push(`/dashboard/documents/${id}/edit`)
}
>
<Edit className="mr-2 h-4 w-4" />
编辑
</Button>
</div>
{/* 标题 */}
<h1 className="text-3xl font-bold">{title}</h1>
{/* 正文 */}
<div
className="prose prose-neutral max-w-none editor-content"
dangerouslySetInnerHTML={{ __html: content }}
/>
</div>
);
}