ng-katex
    TypeScript icon, indicating that this package has built-in type declarations

    2.0.3 • Public • Published

    ng-KaTeX

    npm Travis npm GitHub stars npm

    Description

    Angular module to write beautiful math expressions in TeX syntax boosted by KaTeX library. You can see a demo here.

    Install

    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);

    Important!

    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">

    Usage

    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>
      `;
    }

    Contributors

    Changelog

    See changelog page to get info about release changes.

    Contributing

    See CONTRIBUTING.md

    License

    ng-katex is licensed under MIT license.

    Keywords

    none

    Install

    npm i ng-katex

    DownloadsWeekly Downloads

    2,044

    Version

    2.0.3

    License

    none

    Unpacked Size

    154 kB

    Total Files

    55

    Last publish

    Collaborators

    • garciparedes