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插件添加了服务器端所需的语法高亮显示HTML，则应通过WordPress REST API进行传递。

然后，您可以手动添加所需的CSS和主题自定义(有点像构建常规WordPress主题的前端时所做的操作)。

或者，您可以像在另一个React项目中一样使用Prism.js。我认为这篇How to get PrismJS working in 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-*插件并删除它们的配置。希望这对你有帮助！