Angular module to write beautiful math expressions in TeX syntax boosted by KaTeX library
Angular module to write beautiful math expressions in TeX syntax boosted by KaTeX library. You can see a demo here.
To install the module you can simply type it on your command line:
npm install ng-katex --save
To add the module to your project add the KatexModule
to import
's field of your parent module:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { KatexModule } from 'ng-katex';
import { AppComponent } from './app/app.component';
@NgModule({
imports: [
BrowserModule,
KatexModule
],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
class AppModule {}
platformBrowserDynamic().bootstrapModule(AppModule);
If you're using angular-cli
, add the katex css import to your styles.css
:
@import '~katex/dist/katex.css';
If you're not using the angular-cli
, import the stylesheet to your index.html
:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.11.0/katex.min.css">
You can write a LaTeX equation as follows:
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
template: `<ng-katex [equation]="equation"></ng-katex>`
})
export class AppComponent {
equation: string = '\\sum_{i=1}^nx_i';
}
Also, you can add options to ng-katex
components with:
import { Component } from '@angular/core';
import { KatexOptions } from 'ng-katex';
@Component({
selector: 'my-app',
template: `<ng-katex [equation]="equation" [options]="options"></ng-katex>`
})
export class AppComponent {
equation: string = '\\sum_{i=1}^nx_i';
options: KatexOptions = {
displayMode: true,
};
}
The options
object structure is defined here.
If you want to write a paragraph with LaTeX equations, you can do it as follows:
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
template: `<ng-katex-paragraph [paragraph]="paragraph"></ng-katex-paragraph>`
})
export class AppComponent {
paragraph: string = `
You can write text, that contains expressions like this: $x ^ 2 + 5$ inside them. As you probably know.
You also can write expressions in display mode as follows: $$\\sum_{i=1}^n(x_i^2 - \\overline{x}^2)$$.
In first case you will need to use \\$expression\\$ and in the second one \\$\\$expression\\$\\$.
To scape the \\$ symbol it's mandatory to write as follows: \\\\$
`;
}
If you want to write HTML with LaTeX equations, you can do it as follows: (Security Note: this bypasses Angular DOM Sanitization)
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
template: `<ng-katex-html [html]="html"></ng-katex-html>`
})
export class AppComponent {
html: string = `
<div>You can write html, that contains expressions like this: $x ^ 2 + 5$ inside them. As you probably know. You also can write expressions in display mode as follows: $$\\sum_{i=1}^n(x_i^2 - \\overline{x}^2)$$. In first case you will need to use \\$expression\\$ and in the second one \\$\\$expression\\$\\$. To scape the \\$ symbol it's mandatory to write as follows: \\\\$</div><p>: <button>I'm a button</button></p>
`;
}
See changelog page to get info about release changes.
See CONTRIBUTING.md
ng-katex is licensed under MIT license.