在dfn data-info里面的MathJaX（即在解释框中渲染MathJaX）

Question

我如何在dfn的数据信息中嵌入MathJaX注释？

我担心它不会因为显而易见的原因而加载MathJaX脚本，所以你必须在本地运行它。所有这些都在Flask中，所以Jinja2正在渲染我的HTML，所以我也尝试过：

<dfn data-info="Partial derivative blah blah blah blah {%block javascript%}{{$\mathcal{R}$}}{%endblock%}">$\partial_{x_i} 
\mathcal{R} \left( \mathbf{x} \right)$</dfn>

无效（给出一个模板语法错误，$是未定义的，所以我想在它的范围内它无法访问html头部的导入MathJax），也许我需要将它转换回字符串？

dfn {
  //background: #e9e9e9;
  //border-bottom: dashed 1px rgba(0,0,0,0.8);
  //padding: 0 0.4em;
  cursor: help;
  font-style: normal;
  position: relative;
  display: inline-block;
  width: 100%;
  z-index: 2;
}

dfn::after {
  content: attr(data-info);
  display: inline;
  position: absolute;
  top: 22px;
  left: 0;
  opacity: 0;
  width: 230px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.5em;
  padding: 0.5em 0.8em;
  background: rgba(0,0,0,0.8);
  color: #fff;
  pointer-events: none; /* This prevents the box from apearing when hovered. */
  transition: opacity 250ms, top 250ms;
}

dfn::before {
  content: '';
  display: block;
  position: absolute;
  top: 12px;
  left: 20px;
  opacity: 0;
  width: 0; height: 0;
  border: solid transparent 5px;
  border-bottom-color: rgba(0,0,0,0.8);
  transition: opacity 250ms, top 250ms;
}

dfn:hover {z-index: 2;} /* Keeps the info boxes on top of other elements */
dfn:hover::after,
dfn:hover::before {opacity: 1;}
dfn:hover::after  {top: 30px;}
dfn:hover::before {top: 20px;}

<script type="text/javascript" async
          src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/MathJax.js?config=TeX-MML-AM_CHTML">
        </script>
<dfn data-info="Partial derivative blah blah blah blah $\mathcal{R}$">$\partial_{x_i} 
\mathcal{R} \left( \mathbf{x} \right)$</dfn>