当html和< code>出现错误时，如何在Gatsby中使用PrismJS.块包含在dragonallySetInnerHTML中? [英] How to use PrismJS in Gatsby when the html and <code> block is contained within dangerouslySetInnerHTML?

问题描述

因此，我试图在Gatbsy中使用PrismJS来显示我的代码块.我按照本教程进行了设置和运行，以下是我代码中的实现:

  import从"react"导入React；从反应"导入{useEffect}；从"gatsby"导入{graphql，Link}；从"../components/layout"导入布局；从"../components/seo"导入SEO；//导入Prism包从"prismjs"导入Prism；const PostPage =({data})=>{const {post} = data.gcms;useEffect(()=> {//调用highlightAll()函数设置代码块的样式Prism.highlightAll();});返回 (<布局>< SEO关键字= {[`planflow`，uiux，`信息架构`，]}title = {post.title}/>< section className =" w-full text-gray-700 body-font"< div className ="容器flex flex-col对齐中心px-5 pb-24 mx-auto">< h1 className ="弹性对齐中心mb-12文本-4xl字体-半粗体文本中心文本-黑色< div className ="flex flex-col justify-center">< div className ="h-64溢出隐藏的圆角lg边框-1边框-灰色-光">< img alt =内容"className ＝对象覆盖对象中心w-满h-满".src = {post.coverImage.url}></img></div>< div className ="在w-full mt-4之间的flex flex-row justify-between">< span className ＝< flex flex-col pl-8 mt-6>>< h3 className =文本2xl"> {post.author.name}</h3>< h4 className ="文字黑灯">发布:{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跟踪范围最宽大写的border-2边框虚线圆角边框黑色较亮的文本-blue bg-blue-indigo"< {tag}</span>)}</span></div>< div className ="flex flex-col mt-6 sm:flex-row">{/*这里的div字幕部分.*/}{/* {帖子内容} */}< div className ="pt-4 mt-4文本中心边框-t边框灰色-300 sm:w-full sm:pl-8 sm:py-8 sm:border-t-0 sm:mt-0 sm:text-left>< divangerlySetInnerHTML = {{__html:post.content.html}} className ="mb-4 text-lg lead-loose sm:pr-8"</div</div></div></div></div></section></布局>)};导出const pageQuery = graphql`查询postPageQuery($ id:ID！){gcms {帖子(其中:{id:$ id}){IDhtml}}` 

HTML内是相关的代码块，我认为它应该被Prism检测到.最终，Prism似乎无法检测到它，并且代码也没有运行.

这里的任何建议都将不胜感激.

谢谢！

解决方案

在您的 code 标记的 class 属性中包括Prism突出显示的所需语言

在内容html(您要解析的HTML)中，请确保您在 code 标记中设置了 class 属性以指定所使用的语言.

请勿在要解析的html中使用 className . class 是html元素< code class ='language-javascript'></code> 中的属性.而另一方面， .className 是可以通过调用元素来获取/设置其类的属性.

  var element = document.createElement('code');element.className ='语言-javascript'//元素是< span class ='language-javascript'></span>  

因此，请确保要解析的html中的代码片段看起来像这样:javascript的示例:

 < pre>< code class =" language-javascript">< p>某些文本</p></code></pre>  

So I am trying to use PrismJS within Gatbsy in order to display my code blocks. I followed this tutorial in order to get setup and running, and the following is the implementation within my code:

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"

const PostPage = ({ data }) => {
  const { post } = data.gcms;
  useEffect(() => {
    // call the highlightAll() function to style our code blocks
    Prism.highlightAll();
  });
  return (
  <Layout>
    <SEO
        keywords={[
          `planflow`,
          `ui`,
          `ux`,
          `information architecture`,
        ]}
        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 className="flex flex-col mt-6 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: post.content.html }} className="mb-4 text-lg leading-loose sm:pr-8"></div>
            </div>
          </div>
        </div>
      </div>
    </section>
  </Layout>
)};

export const pageQuery = graphql`
  query postPageQuery($id: ID!) {
    gcms {
      post(where: { id: $id }) {
        id
        html
    }
}`

Within the HTML is the relevant code block, which I assume should be detected by Prism. Ultimately, Prism does not seem to detect it, and the code is not run.

Any advise here would be appreciated.

Thanks!

解决方案

include the desired language for Prism to highlight in the class attribute in your code tags

in your content html (the one you're going to parse) make sure you are setting class attribute in your code tags to specify the language used.

Do not use className in the html you're going to parse. class is an attribute in an html element <code class='language-javascript'></code>. While, on the other hand, .className is a property that can by called on an element to get/set its class.

var element = document.createElement('code');
element.className = 'language-javascript'
// element is <span class='language-javascript'></span>

so make sure your code snippet in the html you're going to parse looks something like this: example for javascript:

<pre>
  <code class="language-javascript">
    <p>some text</p>
  </code>
</pre>

这篇关于当html和< code>出现错误时，如何在Gatsby中使用PrismJS.块包含在dragonallySetInnerHTML中?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！