mathjax-angular
This plugins implements the browser version of Mathjax v3 into Angular
Note:This library was generated with Angular CLI version 17.
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 { MathjaxModule } from "mathjax-angular";
@NgModule({
declarations: [AppComponent],
imports: [MathjaxModule.forRoot()],
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.