typescript PrismJS包未自动突出显示减价

py49o6xq 于 2023-01-31 发布在 TypeScript

关注(0)|答案(1)|浏览(208)

我使用Prism来突出显示我的markdown代码片段，我调用Prism.highlightAll()，并且我有一个标记了<pre>的部分，但是，它没有突出显示我的语法。
下面是我的组件，它带有useEffect钩子，试图突出显示（我检查了，它正在被调用）：

const ArticlePage: NextPage<{ article: Article }> = ({ article }) => {
  useEffect(() => {
    Prism.highlightAll(); // <-- HERE IT IS BEING CALLED
  }, []);
  return (
    <div className={styles.box}>
      <h1 className="mb-5 text-6xl leading-1 font-extrabold">
        {article.title}
      </h1>
      <ReactMarkdown>{markdown}</ReactMarkdown> // <-- What I'm trying to highlight
    </div>
  );
};

我的markdown是从这里拉平凡：

const markdown: string = "```dart\nprint('hello');\nprint('world');\n```";

以下是我的相关导入：

import Prism from "prismjs";
import { useEffect } from "react";

require("prismjs/components/prism-javascript");

require("prismjs/components/prism-dart");

require("prismjs/components/prism-css");

require("prismjs/components/prism-jsx");

我还使用getServerSideProps来返回我需要呈现的实际markdown（为了简洁起见，这个例子我硬编码了它）：

export const getServerSideProps: GetServerSideProps = async (context) => {
  const slug = context.query.slug;
  const res = await fetch(
    "https://MY_WEBSITE_URL/article/" + slug
  );
  const article: Article = await res.json();

  return {
    props: {
      article,
    },
  };
};

export default ArticlePage;

下面是检查元素的外观：

下面是网页的表示（没有语法高亮！）：

如果有帮助的话，我会使用Typescript、TailwindCSS、NextJS，并从内置于Rust（Actix-Web）的Heroku Web服务器中提取。
任何帮助都将是巨大的，谢谢！

typescript

来源：https://stackoverflow.com/questions/75280066/prismjs-package-not-automatically-highlighting-markdown

1条答案

按热度按时间

qncylg1j1#

看起来问题可能与Prism.highlightAll（）函数被调用的时间有关。useEffect钩子在页面被呈现并且markdown被转换为HTML之后在客户端运行。但是，Prism.highlightAll（）需要在markdown被呈现之前被调用，以便正确地突出显示代码片段。
解决这个问题的一个方法是使用dangerouslySetInnerHTML属性将markdown作为原始HTML插入，然后在呈现markdown之前调用Prism.highlightAll（）。

const ArticlePage: NextPage<{ article: Article }> = ({ article }) => {
  const [markdownHTML, setMarkdownHTML] = useState("");

  useEffect(() => {
    const res = fetch("https://MY_WEBSITE_URL/article/" + article.slug);
    const markdown = await res.text();
    const html = Prism.highlight(markdown, Prism.languages.dart);
    setMarkdownHTML(html);
  }, []);

  return (
    <div className={styles.box}>
      <h1 className="mb-5 text-6xl leading-1 font-extrabold">
        {article.title}
      </h1>
      <div dangerouslySetInnerHTML={{ __html: markdownHTML }} />
    </div>
  );
};

另一种方法是使用react-prism这样的第三方包来处理高亮显示，这个包会在客户端处理高亮显示，所以调用Prism.highlightAll（）并不重要。

赞(0）回复(0）举报 2023-01-31

我来回答

typescript PrismJS包未自动突出显示减价

1条答案

相关问题

热门标签

最新问答