fix(render): fix highlight issue

phodal · May 13, 2020 · 0b6c6c7 · 0b6c6c7
1 parent 580dbcd
commit 0b6c6c7
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 3 deletions.
diff --git a/projects/ledge-render/src/lib/ledge-render.component.html b/projects/ledge-render/src/lib/ledge-render.component.html
@@ -175,9 +175,7 @@ <h6 *ngIf="item.depth === 6" [innerHTML]="item.text" class="ledge-heading" id="{
     </div>
 
     <div *ngSwitchCase="'code'">
-      <pre class="language-{{item.lang}}">
-        <code class="language-{{item.lang}}">{{item.text}}</code>
-      </pre>
+      <pre class="language-{{item.lang}}"><code class="language-{{item.lang}}" [innerHTML]="item.text"></code></pre>
     </div>
 
     <div *ngSwitchCase="'blockquote'">

diff --git a/projects/ledge-render/src/lib/ledge-render.component.ts b/projects/ledge-render/src/lib/ledge-render.component.ts
@@ -14,6 +14,7 @@ import marked, { Slugger } from 'marked/lib/marked';
 import LedgeMarkdownConverter from './components/model/ledge-markdown-converter';
 import LedgeColors from './support/ledgeColors';
 import { IPageInfo, VirtualScrollerComponent } from 'ngx-virtual-scroller';
+import Prism from 'prismjs';
 
 @Component({
   selector: 'ledge-render',
@@ -291,6 +292,9 @@ export class LedgeRenderComponent implements OnInit, OnChanges {
         });
         break;
       default:
+        if (Prism.languages[token.lang]) {
+          token.text = Prism.highlight(token.text, Prism.languages[token.lang], token.lang);
+        }
         this.markdownData.push(token);
         break;
     }