数学公式渲染插件 mathjax 的 angular 组件

📦 安装

npm install @demacia/ngx-mathjax --save

🔨 使用

引入module

import { MathjaxModule, MATH_JAX_CONFIG } from '@demacia/ngx-mathjax';

@NgModule({
    imports: [
        /* 修改默认配置（可选），详情参考 https://docs.mathjax.org/en/v2.7-latest/configuration.html
         *
         *  默认配置如下：
         *  {
         *      config: [ 'TeX-AMS_HTML.js' ],
         *      skipStartupTypeset: true,
         *      messageStyle: 'none',
         *      tex2jax: {
         *          inlineMath: [
         *              [ '$', '$' ],
         *              [ '\\(', '\\)' ]
         *          ],
         *          preview: 'none'
         *      }
         *  }
         */
        MathjaxModule.forRoot({
            config: [ 'TeX-AMS_SVG.js' ],
            ...
        })
    ]
})
export class AppModule {
}

静态表达式

<mathjax>$$ ax^2 + bx + c = 0 $$</mathjax>

动态表达式

<mathjax [expression]="'$$ ax^2 + bx + c = 0 $$'"></mathjax>

字体大小（默认 16）

<mathjax fontSize="20">$$ ax^2 + bx + c = 0 $$</mathjax>

angular 中默认花括号({})是默认插值表达式标记，所以如果数学公式中含有花括号时会报错，解决办法如下：
1、使用 {{ '{}' }} 转译 {}
2、使用转义字符，{ = {，} = }

🔗 链接

• Mathjax Docs 本插件依赖的 mathjax 版本为 2.7，注意 3.x 版本与 2.x 版本不兼容，请参考 2.x 版本的文档
• LaTeX 公式示例