Gatsby 中的 datoCMS 结构化文本中的代码格式化

Question

我正在使用 datoCms 制作 Gatsby 博客。以前，我将所有帖子保存为 .md 文件，并使用 Prism.js 格式化代码块。我将所有博客文章转换为 datoCms 中的 Post 模型的记录 - 在结构化文本中添加并格式化 Markdown 正文。它在我的网站上显示如下：

...
export const query = graphql`
  query($locale: String!) {
    allDatoCmsPost(sort: {date: DESC}) {
      edges {
        next {
          slug
        }
        previous {
          slug
        }
        node {
          title
          slug
          readingTime
          date(formatString: "DD MMMM YYYY")
          featuredLabel
          featured {
            gatsbyImageData(width: 750)
          }
          tags {
            name
          }
          markdown {
            value
          }
        }
      }
    }
...
...
...
return (
  <div className={postStyles.html}>
      <StructuredText data={posting.markdown}/>
  </div>
)

我尝试从 scss 模块添加样式 - 工作正常 - 但不支持语法突出显示。检查网站上的 html 显示没有特定于语法的样式，所以也许不支持？这是我的样式模块，以及我尝试获得可变颜色的所有不同方法

.html {
  font-size: 16px;
  font-family: 'CourierPrime', monospace;
  p, h1, h2, h3, div, ul, li, a, span {
    font-size: 16px;
    font-family: 'CourierPrime', monospace;
  }
  h1 {
    font-size: 24px;
    text-decoration: underline dashed 2px var(--secondary-color);
    text-underline-offset: 4px;
  }
  h2 {
    font-size: 22px;
    font-weight: 1000;
    text-decoration: underline dashed 3px var(--secondary-color);
    text-underline-offset: 4px;
  }
  h3 {
    font-size: 20px;
    font-weight: 600;
    text-decoration: underline dashed 3px var(--secondary-color);
    text-underline-offset: 4px;
  }
  code {
    background-color: var(--highlight);
    color: var(--primary-color);
    padding: 4px;
    border-radius: 1px;
    word-wrap: break-word; 
    letter-spacing: 1.15px;
    font-size: 14px;
  } 
  pre code {
    background-color: #1f1f42;
    color: white;
    display: block;
    padding: 0.5rem;
    margin: 1rem;
    -webkit-overflow-scrolling: touch;
    overflow-x: auto;
    line-height: 1.5;
    max-width: 70vw;
    min-width: 300px;

    span[class*="variable"]{
      color: red;
    }
    // .variable {
    //   color: red;
    // }
    // .token.variable {
    //   color: red;
    // }
    // span.token.variable {
    //   color: red;
    // }
  }
}

渲染的 html :

<pre data-language="c">
  <code>...</code>
</pre>

我应该在帖子正文中使用富文本吗？有什么插件可以帮助这里吗？也许我在切换到 datoCms 时没有正确配置 prism.js？

Answer 1

您正走在使用结构化文本字段实现语法突出显示的正确道路上。如果一切设置正确，一切都应该可以正常工作。

我建议您使用以下两种方法来实现语法高亮。希望它可以帮助您和其他遇到类似问题的人。

import { renderNodeRule, StructuredText } from "react-datocms";
import { isCode } from "datocms-structured-text-utils";
import Prism from "prismjs";
import SyntaxHighlight from "components/SyntaxHighlight"; // Update the path to the custom syntax highligher component depending on your project

<StructuredText
    data={data.posting.markdown}
    customNodeRules={[
        // Use a Prism syntax highlighter component for code blocks
        renderNodeRule(isCode, ({ node, key }) => {
            return (
                <Prism
                    key={key}
                    code={node.code}
                    language={node.language || "unknown"}
                    highlightLines={node.highlight}
                    showLineNumbers={node.code.split(/\n/).length > 10}
                />
            );
        }),

        // Use a custom syntax highlighter component for code blocks
        renderNodeRule(isCode, ({ node, key }) => {
            return (
                <SyntaxHighlight
                    key={key}
                    code={node.code}
                    language={node.language || "unknown"}
                    linesToBeHighlighted={node.highlight}
                />
            );
        }),
    ]}
/>;