mathjax-angular

mathjax-angular

This plugins implements the browser version of Mathjax v3 into Angular

Note:This library was generated with Angular CLI version 19.

Feature

This library helps you implement the version 3 of Mathjax into any of your angular web application.

Install

Below are the steps you need to use this library. NPM:

npm install mathjax-angular

Yarn:

yarn add mathjax-angular

Configure the module

Load the module in the @NgModule class of the application. You need to pass a RootMathjaxConfig instance to the config method to configure the module.

Example

We provide a premade example with the library itself, You can see the example here, or alternatively run it locally by cloning the repository and running.

To do that first install the requirements:

npm install (or) yarn

Then either run it in production:

npm run prod (or) yarn prod

or run it in dev:

npm run dev (or) yarn dev

Usage

When importing in the root module, the module should be configured with .forRoot method.

import { NgModule } from "@angular/core";
import { AppComponent } from "./src/app/app.component";

/*Import*/
import { MathjaxModule } from "mathjax-angular";

/*Configuration*/
@NgModule({
  declarations: [AppComponent],
  imports: [MathjaxModule.forRoot(/*Optional Config*/)],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

You can optionally pass config. for this refer to majax configuration guide

Current configuration defaults to:

{
  "config": {
    "loader": {
      "load": ["output/svg", "[tex]/require", "[tex]/ams"]
    },
    "tex": {
      "inlineMath": [["$", "$"]],
      "packages": ["base", "require", "ams"]
    },
    "svg": { "fontCache": "global" }
  },
  "src": "https://cdn.jsdelivr.net/npm/mathjax@3.2.2/es5/startup.js"
}

• For config field refer this.
• For src field refer CDN.

When importing in a child module, the module must be configured to re-use the same module instance as the root module. So simply configure the module with the .forChild method.

import { MathjaxModule } from 'mathjax-angular';
...
imports: [
  MathjaxModule.forChild()
]
...

Typeset an element

Add the mathjax directive to elements which you want to apply MathJax typesetting on load.

<div [mathjax]="content"></div>

In your ts component

content = "$x = {-b \\pm \\sqrt{b^2-4ac} \\over 2a}$";

Info and Help

For more info and help with the mathjax library refer to their site.