gatsby-remark-prismjs 不适用于 html

Question

gatsby-remark-prismjs 不适用于我的设置。

我正在尝试突出显示 javascript 和 swift 等代码。

我的博客内容来自 wordpress.com

这是我的 gatsby.config.js

,
      {
        resolve: `gatsby-transformer-remark`,
        options: {
          plugins: [
            {
              resolve: `gatsby-remark-prismjs`,
              options: {
                // Class prefix for <pre> tags containing syntax highlighting;
                // defaults to 'language-' (eg <pre class="language-js">).
                // If your site loads Prism into the browser at runtime,
                // (eg for use with libraries like react-live),
                // you may use this to prevent Prism from re-processing syntax.
                // This is an uncommon use-case though;
                // If you're unsure, it's best to use the default value.
                classPrefix: "language-",
                // This is used to allow setting a language for inline code
                // (i.e. single backticks) by creating a separator.
                // This separator is a string and will do no white-space
                // stripping.
                // A suggested value for English speakers is the non-ascii
                // character '›'.
                inlineCodeMarker: null,
                // This lets you set up language aliases.  For example,
                // setting this to '{ sh: "bash" }' will let you use
                // the language "sh" which will highlight using the
                // bash highlighter.
                aliases: {},
                // This toggles the display of line numbers alongside the code.
                // To use it, add the following line in src/layouts/index.js
                // right after importing the prism color scheme:
                //  `require("prismjs/plugins/line-numbers/prism-line-numbers.css");`
                // Defaults to false.
                showLineNumbers: false,
                // If setting this to true, the parser won't handle and highlight inline
                // code used in markdown i.e. single backtick code like `this`.
                noInlineHighlight: false,
              },
            },
            ],
          },
      },

gatsby.browser.js

require("prismjs/themes/prism-okaidia.css")

它是 index.js

import React, { Component } from 'react'
import { Link } from 'gatsby'
import Layout from "../layouts"
import Headline from '../components/headline'
import "../styles/main.scss"
import { redirectTo } from '@reach/router'
import { graphql } from 'gatsby'

class IndexPage extends Component {
  render() {
    const data = this.props.data.wordpressPage
    var codeTest = `
      var _self = (typeof window !== 'undefined')
    ? window   // if in browser
    : (
      (typeof WorkerGlobalScope !== 'undefined' && self instanceof WorkerGlobalScope)
      ? self // if in worker
      : {}   // if in node js
    );
    `
    var swift = `
      let test = "hellow"
      func test() -> Bool {
        return false
      }
    `
    return (
      <Layout>
      <Headline title={"I'm Shawn Baek"} subTitle={"iOS Developer"}/>
      <div
         style={{
           margin: '0 auto',
           maxWidth: 800,
           padding: '0px 1.0875rem 1.45rem',
           paddingTop: '1.45rem',
         }}
      >
      <div>
          <h1 style={{color:'rgb(76, 76, 76)'}}>{data.title}</h1>
          <div style={{color:'rgb(76, 76, 76)'}} dangerouslySetInnerHTML={{ __html: data.content }}></div>
      </div>
      <pre className="javascript">
          <code >
              {codeTest}
          </code>
      </pre>
      <pre className="language-swift">
          <code >
              {swift}
          </code>
      </pre>
      </div>
    </Layout>
    )
  }
}

export const IndexPageQuery = graphql`
  query IndexPageQuery {
    wordpressPage(slug: { eq: "about" }) {
      title
      content
      date(formatString: "MMMM DD, YYYY")
    }
  }
`
export default IndexPage

如您所见，PrismJS 主题背景颜色和字体颜色是有效的。但是语法高亮不像令牌那样工作。

Answer 1

gatsby-remark-whatever插件专门用于 Gatsby 的 Remark Markdown 解析器，gatsby-transformer-remark.

但是，当使用 Gatsby + WordPress 时，您的内容来自 WordPress，而不是 Markdown 文件。这意味着您的 WordPress 内容不会被这些插件修改，虽然您有可能做到这一点，但这可能不是解决问题的最简单方法。

同样的事情也适用于您的测试：该字符串示例代码不会通过 Gatsby 的 Markdown 过程，因此 Markdown PrismJS 插件不会产生影响。

如果您使用 WordPress 插件添加语法高亮显示您需要在 PHP 服务器端的 HTML，这应该通过 WordPress REST API 传递。

然后，您可以手动添加所需的 CSS 和主题自定义（有点像您在构建常规 WordPress 主题的前端时可能会这样做。）

或者，您可以像在另一个 React 项目中一样使用 Prism.js。我认为这个如何让 PrismJS 在 React 中工作的教程对你最有帮助。

运行后基于您的代码的类似示例npm install prismjs：

// Import the PrismJS CSS, contained in the node_modules
// You might need to download a custom theme to support 
// some languages like Swift
import "prismjs/themes/prism.css";

import React, { Component } from "react";
import Prism from "prismjs";

class IndexPage extends Component {
  componentDidMount() {
    Prism.highlightAll();
  }

  render() {
    var sampleCode = `.example {
  font-weight: bold;
}`;

    return (
      <div>
        <pre>
          <code className="language-css">{sampleCode}</code>
        </pre>
      </div>
    );
  }
}

export default IndexPage;

如果您不使用任何其他 Markdown 页面，您可能会决定npm uninstall使用gatsby-remark-*插件并删除它们的配置。希望这有帮助！