在 Gatsby 中使用 PrismJs 的权威指南
就我的经验而言，学习使用一项新技术就像是一个需要花费数天时间搜索信息，才能拼凑出一个你尚未掌握全貌的谜题的过程。
这是一个既有成就感又令人沮丧的过程，对于我这个自学成才的开发者来说，这已经成为一种全新的体验，我必须慢慢适应。
我最近一次走上这条路，是当我决定使用Gatsby重建我的个人网站时。在浏览了许多博客和网站，看到它们都使用了非常酷炫且风格独特的代码块，并带有语法高亮显示后，我觉得在我的网站上使用它应该会很不错。
有很多语法高亮库，但Prism似乎是最常用和最受欢迎的，所以我决定不花太多时间去研究它们的优缺点，直接试用Prism。我很乐意在评论中看到你们对其他库的看法。
你需要考虑的主要因素
如果您正在将您的网站或博客移植（或从头开始创建）到Gatsby，并且想要使用Prism进行代码高亮显示，那么您首先需要决定的是您是否要使用 markdown 文件，因为根据此决定，流程会有所不同。
是否需要使用 Markdown 文件取决于您创建的网站类型，但基本上，如果您要创建博客或类似博客的网站，最终使用Markdown作为网站内容来源是最有效的方式。如果是这种情况，则需要安装和配置几个 Gatsby 插件（例如gatsby-transformer-remark` gatsby -plugin- gatsby-remark-prismjs...
另一方面，如果您要创建其他类型的网站，例如设计更复杂的网站，Markdown就无法提供足够的灵活性来应用可折叠容器、轮播图等功能。在这种情况下，您只需使用自定义的.babelrc配置文件，让Prism在React中运行即可。
我创建了一个空白的Gatsby项目用于这两个示例，您可以从这里下载，或者使用以下格式从控制台创建。
gatsby new <project-name> https://github.com/FidelVe/gatsby-blank-starter
如果您尚未安装Gatsby，请先运行以下命令：
npm i -g gatsby-cli
Gatsby、React 和 PrismJs 无需赘述
我将解释的第一个场景是在不使用 Markdown 文件的情况下使用Prism 。这个场景本质上是在React中使用Prism，并且确保Gatsby可以毫无问题地处理它。
我们先来创建一个新的 Gatsby 项目。
gatsby new gatsby-prism https://github.com/FidelVe/gatsby-blank-starter
尝试运行gatsby develop服务器，您将看到以下默认<code>样式的页面。
首先要做的是安装 npm Prism包：
npm install --save prismjs
现在我们要安装这个插件babel-plugin-prismjs，它允许我们使用Babel配置和自定义Prism。
npm install --save babel-plugin-prismjs
要使用此插件，我们需要创建一个.babelrc文件并将配置信息放入其中。Gatsby自带一个默认的.babelrc文件，为了创建并修改我们自己的文件，我们需要安装babel-preset-gatsby预设并将其添加到我们新的.babelrc文件中。
npm install --save babel-preset-gatsby
至此，我们已经安装了所有需要的软件，让我们开始进行配置吧。
首先，在项目根目录下创建一个名为.babelrc 的新文件。在这个文件中，我们可以自定义Prism ，以下是我的.babelrc文件的内容。
{
"presets": ["babel-preset-gatsby"],
"plugins": [
["prismjs", {
"languages": ["javascript", "css", "markup"],
"plugins": ["show-language"],
"theme": "okaidia",
"css": true
}]
]
}
安装和配置完成后，现在我们只需要导入prismjs并使用Prism.highlightAll()函数调用来设置代码块的样式。
如果你使用的是我开头链接的仓库，请打开src/pages/index.js文件并添加以下内容：
import React from "react"
import { useEffect } from "react"
import Layout from "../components/layout"
//import the Prism package
import Prism from "prismjs"
// The code we will be displaying
const code = `const foo = 'foo';
const bar = 'bar';
console.log(foo + bar);
`
const IndexPage = () => {
useEffect(() => {
// call the highlightAll() function to style our code blocks
Prism.highlightAll()
})
return (
<Layout>
<div
style={{
display: "flex",
alignItems: "center",
flexFlow: "column nowrap",
margin: "6px 10px",
maxWidth: "800px",
}}
>
<h2>
Using Prism to style <code>code blocks</code> in Gatsby
</h2>
<div className="code-container">
<pre>
<code className="language-javascript">{code}</code>
</pre>
</div>
</div>
</Layout>
)
}
export default IndexPage
运行gatsby develop服务器后，您将看到以下页面，其中代码块已应用 Prism 主题样式。
恭喜，现在您知道如何在Gatsby中使用Prism添加代码样式了，以下是一些链接，可以帮助您更深入地了解这个主题。
Gatsby、React 和 PrismJs 的注释
在 Gatsby 中解析 Markdown 文件需要使用名为gatsby-transformer-remark的转换器插件。该插件会将 Markdown 格式的内容转换为有效的 HTML，因此，在本例中，我们将把代码片段写在 Markdown 文件（.md）中的三个反引号 () 内，使用GraphQL查询文件中的数据，并将其放入我们的代码中。
让我们从创建一个新的空白 Gatsby 项目开始。
gatsby new gatsby-markdown-prism https://github.com/FidelVe/gatsby-blank-starter
现在，让我们安装prismjs，gatsby-transformer-remark和gatsby-remark-prismjs。
npm install --save prismjs gatsby-transformer-remark gatsby-remark-prismjs
Prism提供了多种主题可供选择，本项目我使用的是okaidia主题。要定义一个主题，请在根文件夹中创建一个名为gatsby-browser.js的文件，并添加以下内容。
require("prismjs/themes/prism-okaidia.css");
由于我们将使用.md文件来编写代码片段，请创建一个文件夹（src/content/）来存放所有 markdown 文件，并在该文件夹内创建一个名为code.md的新 markdown 文件，并添加以下内容。
下一步是配置已安装的插件。打开项目根目录下的gatsby-config.js文件，并添加以下内容：
module.exports = {
plugins: [
{
resolve: `gatsby-source-filesystem`,
options: {
name: `code`,
path: `${__dirname}/src/content`,
},
},
{
resolve: `gatsby-transformer-remark`,
options: {
plugins: [
{
resolve: `gatsby-remark-prismjs`,
options: {},
},
],
},
},
],
}
该gatsby-source-filesystem插件会File根据系统中的文件创建节点。在本例中，我们会根据src/content/文件夹内的每个文件创建节点。
我们在src/content/文件夹中创建的每个.md文件都会被解析并转换为有效的 html ，并且由于我们使用了该插件，三个反引号内的内容会自动由Prism格式化。gastby-transformer-remarkgatsby-remark-prismjs
安装并配置好所有必要的插件后，剩下的唯一一件事就是将解析后的内容插入到我们的页面中，为此我们将使用GraphQL。
打开src/page/index.js文件，并向其中添加以下内容。
import React from "react"
import { useStaticQuery, graphql } from "gatsby"
import Layout from "../components/layout"
const IndexPage = () => {
const data = useStaticQuery(graphql`
{
allMarkdownRemark(filter: { fileAbsolutePath: { regex: "/code.md/" } }) {
nodes {
html
}
}
}
`)
return (
<Layout>
<div
style={{
display: "flex",
alignItems: "center",
flexFlow: "column nowrap",
margin: "6px 10px",
maxWidth: "800px",
}}
>
<h2>
Using Prism to style <code>code blocks</code> in Gatsby
</h2>
<div
className="code-container"
dangerouslySetInnerHTML={{
__html: data.allMarkdownRemark.nodes[0].html,
}}
></div>
</div>
</Layout>
)
}
export default IndexPage
启动gatsby develop服务器后，您应该会看到如图所示的代码样式。
感谢阅读，希望本文能帮助您将Prism集成到Gatsby页面中。
这里再次列出一些链接，可供您更深入地了解这个话题。