向代码块添加语法高亮的最佳方法 - React Sanity Blog

Question

我正在尝试找到最有效的方法来向我的 react sanity.io 博客添加语法高亮。这是我使用 react 创建的文章组件：

import React, {useEffect, useState} from "react";
import {useParams} from "react-router-dom";
import sanityClient from "../../client";
import BlockContent from "@sanity/block-content-to-react";
import imageUrlBuilder from "@sanity/image-url";

import Prism from "prismjs";

const builder = imageUrlBuilder(sanityClient);
function urlFor(source) {
  return builder.image(source);
}

const serializers = {
  types: {
    code: (props) => (
      <pre data-language={props.node.language}>
        <code>{props.node.code}</code>
      </pre>
    ),
  },
};

export default function SinglePost() {
  const [postData, setPostData] = useState(null);
  const {slug} = useParams();

  useEffect(() => {
    sanityClient
      .fetch(
        `*[slug.current == $slug]{
          title,
          slug,
          mainImage{
            asset->{
              _id,
              url
             }
           },
         body,
        "name": author->name,
        "authorImage": author->image
       }`,
        {slug}
      )
      .then((data) => setPostData(data[0]))
      .catch(console.error);

    Prism.highlightAll();
  }, [slug]);

  if (!postData) return <div>Loading...</div>;

  return (
    <article>
      <h2>{postData.title}</h2>
      <div>
        <img
          src={urlFor(postData.authorImage).width(100).url()}
          alt="Author is Kap"
        />
        <h4>{postData.name}</h4>
      </div>

      <img src={urlFor(postData.mainImage).width(200).url()} alt="" />
      <div>
        <BlockContent
          blocks={postData.body}
          projectId={sanityClient.clientConfig.projectId}
          dataset={sanityClient.clientConfig.dataset}
          serializers={serializers}
        />
      </div>
    </article>
  );
}

我正在从 Sanity 导入文章数据并将其呈现为组件。我尝试使用 prism.js，但在让它工作时遇到问题。

启用语法突出显示的最佳和最有效的方法是什么？

Answer 1

好吧，我会在 NPM 上使用 react-syntax-highlighter 包。添加到您的项目中非常容易。基本上是即插即用。没有尴尬的配置。