如何在Markdown/HTML的指定CSS类div中渲染MathJax/KaTeX数学公式

问题根源 #

大多数Markdown解析器默认不会解析HTML块标签内部的内容，若HTML起始标签后直接跟内容，解析器会将内部所有内容判定为纯HTML文本，不会触发LaTeX公式、Markdown语法的解析逻辑，因此你写的$...$、$$...$$格式公式无法被MathJax/KaTeX识别渲染。

具体实现步骤 #

1. 修正CSS属性选择器 #

你现有CSS中针对自定义文本的选择器与实际使用的属性不匹配，需调整为对应data-text属性：

.theorem {
  display: block;
  font-style: italic;
}
.theorem:before {
  content: "Theorem. ";
  font-weight: bold;
  font-style: normal;
}
.theorem[data-text]:before {
  content: "Theorem (" attr(data-text) ") ";
}

2. 规范div标签写法 #

只需在div起始标签和内部内容之间空出一行，即可触发Markdown解析逻辑，公式就能正常渲染：

<div class="theorem" data-text="Foo">

给定 $a, b$ 为正实数：
$$a + b \geq 2\sqrt{ab}$$
</div>

兼容性优化 #

如果在部分严格限制HTML内部解析的Markdown环境中仍无法生效，可以给div添加markdown="1"属性强制开启内部Markdown解析：

<div class="theorem" data-text="Foo" markdown="1">

给定 $a, b$ 为正实数：
$$a + b \geq 2\sqrt{ab}$$
</div>

内容的提问来源于stack exchange，提问作者shnnnms