HTML历理 KaTeX 指定渲染容器
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>KaTeX 数学公式渲染示例</title>
<style>
.katex { font-size: 1.1em; }
.formula-block { margin: 1.5rem 0; }
</style>
</head>
<body>
<h1>数学公式示例</h1>
<div class="formula-block">
$ a^2 + b^2 = c^2 $
</div>
<div class="formula-block">
$ f(x) = \int_{-\infty}^\infty \hat f(\xi)\,e^{2 \pi i \xi x} \,d\xi $
</div>
<link rel="stylesheet" href="/_/_js/katex/katex.min.css">
<script defer src="/_/_js/katex/katex.min.js"></script>
<script defer src="/_/_js/katex/contrib/auto-render.min.js"></script>
<script>
document.addEventListener("DOMContentLoaded", function() {
// 初始化渲染
renderMathInElement(document.body, {
delimiters: [
{left: '$', right: '$', display: false},
{left: '$$', right: '$$', display: true}
],
throwOnError: false
});
});
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>KaTeX 数学公式渲染示例</title>
<style>
.katex { font-size: 1.1em; }
.formula-block { margin: 1.5rem 0; }
</style>
</head>
<body>
<h1>数学公式示例</h1>
<div>
$ a^2 + b^2 = c^2 $
</div>
<div id="math-container">
$ f(x) = \int_{-\infty}^\infty \hat f(\xi)\,e^{2 \pi i \xi x} \,d\xi $
</div>
<link rel="stylesheet" href="/_/_js/katex/katex.min.css">
<script defer src="/_/_js/katex/katex.min.js"></script>
<script defer src="/_/_js/katex/contrib/auto-render.min.js"></script>
<script>
document.addEventListener("DOMContentLoaded", function() {
// 指定渲染容器
const mathContainer = document.getElementById('math-container');
// 仅在该容器内渲染公式
renderMathInElement(mathContainer, {
// 配置分隔符
delimiters: [
{left: '$$', right: '$$', display: true}, // 块级公式
{left: '$', right: '$', display: false} // 行内公式
],
// 其他配置
throwOnError: false
});
});
</script>
</body>
</html>
效果图：
浙公网安备 33010602011771号