Fix Katex parsed HTML (#187)

Author: jfcere

angular.json

@@ -44,6 +44,7 @@
               "node_modules/prismjs/components/prism-c.min.js",
               "node_modules/prismjs/components/prism-cpp.min.js",
               "node_modules/prismjs/components/prism-javascript.min.js",
+              "node_modules/prismjs/components/prism-latex.min.js",
               "node_modules/prismjs/components/prism-markdown.min.js",
               "node_modules/prismjs/components/prism-python.min.js",
               "node_modules/prismjs/components/prism-typescript.min.js",

demo/src/app/app.component.html

@@ -331,19 +331,18 @@ <h2 class="subtitle">KaTeX plugin</h2>
         ### Example
       </markdown>
 
-      <markdown ngPreserveWhitespaces>
+      <markdown>
         You can render KaTex expression by adding `katex` directive on the `markdown` component/directive.
       </markdown>
 
       <markdown [src]="'app/remote/katex.html'"></markdown>
 
-      <markdown ngPreserveWhitespaces>
+      <markdown>
         The example below illustrate `katex` directive in action.
       </markdown>
 
-      <markdown katex>
-        $f(x) = \int_&#123;-\infty}^\infty \hat f(\xi) e^&#123;2 \pi i \xi x} d\xi$
-      </markdown>
+      <textarea class="katex-textarea" [(ngModel)]="katexMarkdown"></textarea>
+      <markdown class="katex-usage" [data]="katexMarkdown" katex></markdown>
 
       <markdown ngPreserveWhitespaces>
         Optionally, you can specify math rendering [options](https://katex.org/docs/options.html) using `katexOptions` property.

demo/src/app/app.component.scss

@@ -130,6 +130,8 @@ section:first-of-type {
   padding: 13px;
 }
 
+.katex-usage,
+.katex-textarea,
 .pipe-usage,
 .pipe-textarea,
 .variable-binding,
@@ -141,14 +143,24 @@ section:first-of-type {
   }
 }
 
+.katex-textarea {
+  min-height: 220px;
+}
+
+.pipe-textarea,
+.variable-textarea {
+  min-height: 320px;
+}
+
+.katex-textarea,
 .pipe-textarea,
 .variable-textarea {
   border-radius: 4px;
   margin-top: 8px;
-  min-height: 320px;
   padding: 8px;
 }
 
+.katex-usage,
 .pipe-usage,
 .variable-binding {
   display: block;

demo/src/app/app.component.ts

@@ -61,6 +61,19 @@ export class MarkdownDemoComponent {
 }`;
   //#endregion
 
+  //#region katex
+  katexMarkdown =
+`#### \`katex\` directive example
+
+\`\`\`latex
+f(x) = \\int_{-\\infty}^\\infty \\hat f(\\xi) e^{2 \\pi i \\xi x} d\\xi
+\`\`\`
+
+$f(x) = \\int_{-\\infty}^\\infty \\hat f(\\xi) e^{2 \\pi i \\xi x} d\\xi$
+
+> If you can understand this, you're a genius!`;
+  //#endregion
+
   protected _titleIsAnimating = false;
   protected _pushpinIsOn = false;
 

lib/src/markdown.service.ts

@@ -18,15 +18,15 @@ declare var Prism: {
   highlightAllUnder: (element: Element | Document) => void;
 };
 
-// tslint:disable-next-line:max-line-length
+// tslint:disable:max-line-length
+export const errorKatexNotLoaded = '[ngx-markdown When using the [katex] attribute you *have to* include KaTeX files to `angular.json` or use imports. See README for more information';
 export const errorSrcWithoutHttpClient = '[ngx-markdown] When using the [src] attribute you *have to* pass the `HttpClient` as a parameter of the `forRoot` method. See README for more information';
-// tslint:disable-next-line:max-line-length
-export const errorKatexNotLoaded = '[ngx-markdown] When using the [katex] attribute you *have to* include KaTeX files to `angular.json` or use imports. See README for more information';
+// tslint:enable:max-line-length
 
 @Injectable()
 export class MarkdownService {
-  private _options: MarkedOptions;
 
+  private _options: MarkedOptions;
   get options(): MarkedOptions { return this._options; }
   set options(value: MarkedOptions) {
     this._options = Object.assign({},
@@ -79,11 +79,11 @@ export class MarkdownService {
     }
   }
 
-  renderKatex(markdown: string, options?: KatexOptions): string {
+  renderKatex(html: string, options?: KatexOptions): string {
     if (typeof katex === 'undefined' || typeof katex.renderToString === 'undefined') {
       throw new Error(errorKatexNotLoaded);
     }
-    return markdown.replace(/(?:^|[^\\])\$([^\s][^$]*?[^\s])\$/gm, (_, tex) => katex.renderToString(tex, options));
+    return html.replace(/\$([^\s][^$]*?[^\s])\$/gm, (_, tex) => katex.renderToString(tex, options));
   }
 
   private decodeHtml(html: string): string {