无法使PrismJS在GatsbyJS上处理我的代码

问题描述

我正在尝试使用PrismJS将GraphQL / GraphCMS查询的输出（包装在<code>块中的元素）转换为突出显示的代码块。我按照this教程进行操作，以获取当前设置，并尝试通过html输出而不是markdown进行此操作。

以下是我用来完成此操作的代码：

import React from "react";
import { useEffect } from "react";
import { graphql,Link } from 'gatsby';
import Layout from "../components/layout";
import SEO from "../components/seo";

//import the Prism package
import Prism from "prismjs";**strong text**

//Import showdown Markdowm Parser
let showdown  = require('showdown');

let htmlOutput = '';
let markdownOutput = '';

const PostPage = ({ data }) => {
  const { post } = data.gcms;

  htmlOutput = post.content.html;

  //Convert Markdown Output to HTML
  let converter = new showdown.Converter();
  let markdownOutput = converter.makeHtml(post.content.markdown);

  //Define array for SEO Keywords - Set with basic keyword setup
  let arr = [];

  useEffect(() => {
    // call the highlight() function to style our code blocks
    markdownOutput = Prism.highlight(markdownOutput,Prism.languages.javascript,'javascript');
    htmlOutput = Prism.highlight(htmlOutput,'javascript');
  });

  return (
  <Layout>
    <SEO
      title={post.title}
      description={post.excerpt}
      image={post.coverImage.url}
        {
          ...post.tags.map((tag) => 
            arr.push(tag)
          )
        }
        keywords = {arr}
        title={post.title}
      />
    <section className="w-full text-gray-700 body-font">
      <div className="container flex flex-col justify-center px-5 pb-24 mx-auto">
      <h1 className="flex justify-center mb-12 text-4xl font-semibold text-center text-black">{post.title}</h1>
        <div className="flex flex-col justify-center">
          <div className="h-64 overflow-hidden rounded-lg border-1 border-gray-light">
            <img alt="content" className="object-cover object-center w-full h-full" src={post.coverImage.url}></img>
          </div>
          <div className="flex flex-row justify-between w-full mt-4">
            <span className="flex flex-col pl-8 mt-6">
              <h3 className="text-2xl">{post.author.name}</h3>
              <h4 className="text-black-lighter">Published: {post.date}</h4>
            </span>
            <span className="pr-8 mt-6">
            { 
              post.tags.map((tag) =>
                <span key={tag} className="inline-block px-3 py-1 mb-2 mr-2 text-xs font-medium tracking-widest capitalize border-2 border-dashed rounded border-black-lighter text-blue bg-blue-indigo">{tag}</span>
              )
            }
            </span>
          </div>
          <div id="blogPost" className="flex flex-col mt-4 sm:flex-row">
            {/* <div>Notication Section Here. </div> */}
            {/* {Post Content} */}
            <div className="pt-4 mt-4 text-center border-t border-gray-300 sm:w-full sm:pl-8 sm:py-8 sm:border-t-0 sm:mt-0 sm:text-left">
              <div dangerouslySetInnerHTML={{ __html: htmlOutput }} className="mb-4 text-lg leading-normal sm:pr-8"></div>
            </div>
          </div>
        </div>
      </div>
    </section>
  </Layout>
)};

export const pageQuery = graphql`
  query postPageQuery($id: ID!) {
    gcms {
      post(where: { id: $id }) {
        id
        title
        slug
        excerpt
        coverImage {
          url
        }
        tags
        author {
          name
          biography
          picture {
            coverImagePost {
              coverImage {
                url
              }
            }
          }
        }
        content {
          html
          markdown
          text
        }
        date
        seo {
          title
          description
          keywords
        }
      }
    }
  }
`;

export default PostPage;

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）