ngx-markdown-katex v0.0.20

NgxMarkdownKatex

Angular library for rendering markdown formatting with KaTeX math.

Installation

1. Install package

$ npm i ngx-markdown-katex

2. Import module

import { NgxMarkdownKatexModule } from 'ngx-markdown-katex';

@NgModule({
  imports: [
    NgxMarkdownKatexModule,
    ...
  ],
  ...
})
export class AppModule {}

3. Enable KaTeX (optional)

1.Install KaTeX

$ npm i katex
$ npm i -D @types/katex

2. Pass KaTeX in .forRoot()

import { NgxMarkdownKatexModule } from 'ngx-markdown-katex';
import * as katex from 'katex';

@NgModule({
  imports: [
    NgxMarkdownKatexModule.forRoot(katex),
    ...
  ],
  ...
})
export class AppModule {}

3. Import KaTeX styles

In your styles.scss:

@import '~katex/dist/katex.css';

Usage

Component

<ngx-markdown-katex [data]="text">
</ngx-markdown-katex>

Service

import {NgxMarkdownKatexService} from 'ngx-markdown-katex';
...

@Component({
  ...
})
export class AppComponent implements OnInit {
  compiledText: SafeHtml;

  constructor(
    private markdownKatex: NgxMarkdownKatexService
  ) {}

  ngOnInit() {
    this.compiledText = this.markdownKatex.compile(`
      # Markdown Test
      $f(x) = 5 + e^{2\pi}$
    `);
  }
}

Troubleshooting

If you get errors like Can't resolve 'XYZ' or Uncaught ReferenceError: global is not defined, try adding this to your polyfills.ts:

(window as any).global = window;
(window as any).process = {
  env: { DEBUG: undefined },
};