简介
在博客项目中准备使用 Prism.js 对代码进行高亮。目前只能通过客户端组件的方式实现。
安装 Prism.js
安装 Prism.js 及其依赖:
bash
npm install prismjs
使用 useEffect
高亮代码
在客户端组件中使用 useEffect
来高亮代码:
typescript
"use client";
import { useEffect } from "react";
import Prism from "prismjs";
const Post = ({ post }) => {
useEffect(() => {
const highlight = async () => {
await Prism.highlightAll();
};
highlight();
}, [post]);
return (
// 组件内容
);
};
引入主题
引入预定义的主题 CSS 文件:
typescript
import "prismjs/themes/prism-tomorrow.css";
如果需要其他主题,可以自行下载并引入:
加载语言支持
根据需要加载特定的语言支持:
typescript
import 'prismjs/components/prism-javascript';
import 'prismjs/components/prism-css';
import 'prismjs/components/prism-jsx';
import 'prismjs/components/prism-typescript';
自定义主题
全局语言样式
css
pre[class*="language-"],
code[class*="language-"] {
/* 自定义样式 */
}
特定语言样式
css
pre[class*="language-javascript"],
code[class*="language-javascript"] {
color: #4ec9b0;
}
Token 样式
css
.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
color: #6a9955;
}
.token.punctuation {
color: #d4d4d4;
}
.token.property,
.token.tag,
.token.boolean,
.token.number,
.token.constant,
.token.symbol,
.token.deleted {
color: #b5cea8;
}
更多设置请参考 Prism.js 常见问题。
plaintext