Nextjs13 引入Prism js

2023年09月15日

 

博客项目里准备使用Prism js对代码进行高亮,尝试了一下,目前只能通过客户端组件的方式实现。

1、 安装prism js

 npm install prismjs

 2、 使用useEffect高亮代码

"use client";

import Prism from "prismjs";
const Post = ({ post }) => {
  useEffect(() => {
    const highlight = async () => {
      await Prism.highlightAll(); 
    };
    highlight(); 
  }, [post]);

3、 引入主题

引入css

import "prismjs/themes/prism-tomorrow.css"

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

 https://github.com/PrismJS/prism-themes/tree/master/themes

 

4、语言识别

import 'prismjs/components/prism-javascript'
import 'prismjs/components/prism-css'
import 'prismjs/components/prism-jsx'
import 'prismjs/components/prism-typescript';

5、 自定义主题

全局语言样式

pre[class*="language-"],
code[class*="language-"] {

}


特定语言样式

pre[class*="language-javascript"],
code[class*="language-javascript"] {
	color: #4ec9b0;
}

token 样式

.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;
}

其他设置请参考:

https://prismjs.com/faq.html#how-do-i-know-which-tokens-i-can-style-for

© 1987 - 2023 张晓刚 版权所有

浙ICP备16002143号-1