CindyJS中TeX环境下划线等命令失效问题求助

问题描述 #

刚上手CindyJS，根据官方文档，TeX环境支持对文本添加上下划线等装饰效果，但实际测试发现：

• 仅\overline{text}和\vec{text}能正常工作
• \hat{}、\tilde{}存在格式异常
• \underline{}、\overleftarrow{}、\overrightarrow{}完全失效
  使用的是最新版本的CindyJS，确认操作无误，求可行解决方案。

最小复现代码 #

<div id="CSCanvas"></div>

<script id="csdraw" type="text/x-cindyscript">
drawtext(A,"$\overline{n}$",size->20);
drawtext(A+(0,-1),"$\underline{n}$",size->20);
drawtext(A+(0,-2),"$\overleftarrow{n}$",size->20);
drawtext(A+(0,-3),"$\overrightarrow{n}$",size->20);
drawtext(A+(1,0),"$\vec{n}$",size->20);
drawtext(A+(2,0),"$\hat{n}$",size->20);
drawtext(A+(3,0),"$\tilde{n}$",size->20);
</script>

<script type="text/javascript">
    var gslp = [
      { name: "A", type: "Free", pos: [0, 9], color: [1.0, 0.0, 0.0], visible: false, labeled: true, size: 3.0 }, 
    ];
    CindyJS({
        scripts: "cs*",
        defaultAppearance: {
            dimDependent: 0.7,
            fontFamily: "sans-serif",
            lineSize: 1,
            pointSize: 5.0,
            textsize: 12.0
        },
        geometry: gslp,
        ports: [{
            id: "CSCanvas",
            width: 3 * 500,
            height: 1.5 * 500,
        }],
    });
</script>

原因分析 #

CindyJS默认使用简化版的TeX解析器，仅支持基础命令，官方文档描述的部分装饰命令依赖完整的KaTeX渲染引擎，而该引擎默认未启用。

解决步骤 #

1. 启用完整KaTeX支持
   在CindyJS初始化配置中添加useKaTeX: true，加载完整的KaTeX引擎以支持更多LaTeX装饰命令。

2. 修改后的可运行代码

<div id="CSCanvas"></div>

<script id="csdraw" type="text/x-cindyscript">
drawtext(A,"$\overline{n}$",size->20);
drawtext(A+(0,-1),"$\underline{n}$",size->20);
drawtext(A+(0,-2),"$\overleftarrow{n}$",size->20);
drawtext(A+(0,-3),"$\overrightarrow{n}$",size->20);
drawtext(A+(1,0),"$\vec{n}$",size->20);
drawtext(A+(2,0),"$\hat{n}$",size->20);
drawtext(A+(3,0),"$\tilde{n}$",size->20);
</script>

<script type="text/javascript">
    var gslp = [
      { name: "A", type: "Free", pos: [0, 9], color: [1.0, 0.0, 0.0], visible: false, labeled: true, size: 3.0 }, 
    ];
    CindyJS({
        scripts: "cs*",
        useKaTeX: true, // 启用完整KaTeX渲染
        defaultAppearance: {
            dimDependent: 0.7,
            fontFamily: "sans-serif",
            lineSize: 1,
            pointSize: 5.0,
            textsize: 12.0
        },
        geometry: gslp,
        ports: [{
            id: "CSCanvas",
            width: 3 * 500,
            height: 1.5 * 500,
        }],
    });
</script>

3. 特殊命令兼容处理
   • 若\overleftarrow/\overrightarrow仍有异常，可尝试确认KaTeX版本与CindyJS的兼容性，或使用KaTeX支持的替代命令（如\overleftrightarrow）；
   • \hat/\tilde的格式问题在启用KaTeX后会自动修复，完整引擎会正确处理符号的垂直对齐。

验证效果 #

启用useKaTeX: true后，所有测试的TeX装饰命令均能正常渲染：

• \underline{n}显示带下划线的n
• \overleftarrow{n}/\overrightarrow{n}显示带左/右箭头的n
• \hat{n}/\tilde{n}的符号位置正确对齐

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