时间戳

首页 > 解决方案 > 在 html 自定义元素（shadow DOM）中渲染 Mathjax

mathjax - 在 html 自定义元素（shadow DOM）中渲染 Mathjax

问题描述

自定义元素是我正在编写的页面的一个非常重要的部分，其中一些旨在包括数学。我目前无法在自定义元素中获取 tex 表达式以使用 MathJax 进行渲染。请参阅以下代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
    <script>
        MathJax = {
          tex: {
            inlineMath: [['_(','_)']],
            displayMath: [['_($', '_)']],
          },
          svg: {
            fontCache: 'global'
          }
        };
    </script>
    <script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>

</head>
<body>

    <p>
    Hi! My name's buster. Here's some _(1+2+3_) cool as 
    _($\text{MATH}_)
    How's it going.
    </p>

    <bus-but> Hi there! I am _(3^4_) quite _(\frac{5}{7}_) good! </bus-but>

</body>

<script>

    class HoverVideo extends HTMLElement {
        constructor() {
            super();

            //Create shadow
            var shadow = this.attachShadow({mode: 'open'});

            //Make element
            var theElement = document.createElement('div');
            theElement.setAttribute("id", "coolElement")
            theElement.style = "background-color: red;"

            shadow.appendChild(theElement);

        }

        connectedCallback() {
            this.shadowRoot.getElementById("coolElement").innerHTML = this.innerHTML;
            this.innerHTML="";
            
            console.log(MathJax);
        }
    }
    customElements.define("bus-but",HoverVideo);

</script>

这里我们有一个简单的 customElement ，它将它的内容插入到一个红色背景的 div 元素中。我已经将 MathJax 配置为使用“ (”和“ )”作为它的数学分隔符，因此理想情况下应该呈现“3^4”和“\frac{5}{7}”。相反，我得到：

结果

我也尝试过使用 MathJax tex2svg 功能，但是即使文档提到了诸如“MathJax.tex2chtml”之类的函数的存在，当我从自定义元素调用时，控制台也会通知我函数 tex2chtml 不存在。这很奇怪，因为 customElement知道 MathJax 变量（我可以记录它并查看它的内容）。

标签： mathjaxshadow-domcustom-element

解决方案

推荐阅读