0

我正在使用它来呈现 html 内容和数学方程式

 <AutoHeightHtml
                    html={item.content.en ? item.content.en : ''}
                    textColor={'green'}
                    backgroundColor={'black'}
                  />

脚本

const header = `<html>
  <head>
      <script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
      <script type="text/x-mathjax-config">
        MathJax.Hub.Config({
          extensions: ['fast-preview.js'],
          "fast-preview": {
            Chunks: {EqnChunk: 10000, EqnChunkFactor: 1, EqnChunkDelay: 0},
            color: "inherit!important",
            messageStyle: "none",
            updateTime: 30, updateDelay: 6,
            disabled: false
          },
          messageStyle: 'none',
          CommonHTML: {
            linebreaks: {automatic: true},
          },
          showMathMenu: false,
        });
            </script>
            <script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.7/MathJax.js?config=TeX-MML-AM_CHTML"></script>
      <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0">
      <style>
        @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap');
      </style>
      <link rel="stylesheet" href="../../../../../Constants/CkStyles.css" type="text/css">
  </head> <body><div class="ck-content">`;

它正在加载数学方程式，然后再次加载样式，然后再次更改它的字体。

所以它一次又一次地显示渲染看起来很糟糕。

那么我该如何解决这个问题，以便它快速加载并将设计添加到 html 中。请检查并向我提供任何建议。

4

0 回答 0