go to index

Nextjs13 引入Prism js

read time 2 min read
nextjs prismjs 高亮

简介

在博客项目中准备使用 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";

如果需要其他主题,可以自行下载并引入:

Prism 主题仓库

加载语言支持

根据需要加载特定的语言支持:

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