在nextjs中我应该怎么引入highlight.js的样式呢
时间: 2023-12-01 15:05:10 浏览: 36
在 Next.js 中,你可以通过以下两种方式引入 `highlight.js` 的样式:
1. 在 `pages/_app.js` 文件中引入样式,这样样式就会应用到全局:
```javascript
import 'highlight.js/styles/default.css';
function MyApp({ Component, pageProps }) {
return <Component {...pageProps} />
}
export default MyApp
```
2. 在需要使用 `highlight.js` 的组件中引入样式,这样样式只会应用到当前组件:
```javascript
import 'highlight.js/styles/default.css';
function MyComponent() {
return (
<div>
<pre>
<code className="html">{htmlCode}</code>
</pre>
</div>
);
}
export default MyComponent;
```
其中,`highlight.js/styles/default.css` 可以替换成你想要的样式文件路径。还需要注意的是,在使用 `highlight.js` 的组件中,你还需要引入相应的语言模块,例如:
```javascript
import hljs from 'highlight.js/lib/core';
import javascript from 'highlight.js/lib/languages/javascript';
hljs.registerLanguage('javascript', javascript);
function MyComponent() {
useEffect(() => {
hljs.highlightAll();
}, []);
return (
<div>
<pre>
<code className="javascript">{javascriptCode}</code>
</pre>
</div>
);
}
export default MyComponent;
```
在上面的例子中,我们引入了 `javascript` 语言模块,并使用 `hljs.highlightAll()` 方法对代码进行高亮处理。