feat(notes): highlight code dark color

Author: adirochs

apps/codever-ui/src/app/shared/pipe/markdown2html.pipe.ts

@@ -4,14 +4,18 @@ import * as DOMPurify from 'dompurify';
 import { marked } from 'marked';
 import hljs from 'highlight.js';
 
-marked.setOptions({
-  highlight: function (code: string, lang: string) {
-    if (lang && hljs.getLanguage(lang)) {
-      return hljs.highlight(code, { language: lang }).value;
-    }
-    return hljs.highlightAuto(code).value;
-  },
-});
+// Custom renderer to apply highlight.js syntax highlighting to fenced code blocks
+// and add the 'hljs' CSS class so the github-dark theme (included in angular.json) is applied
+const renderer = new marked.Renderer();
+renderer.code = function (code: string, language: string) {
+  const lang = language && hljs.getLanguage(language) ? language : null;
+  const highlighted = lang
+    ? hljs.highlight(code, { language: lang }).value
+    : hljs.highlightAuto(code).value;
+  return `<pre><code class="hljs${lang ? ' language-' + lang : ''}">${highlighted}</code></pre>`;
+};
+
+marked.setOptions({ renderer });
 
 @Pipe({ name: 'md2html' })
 export class Markdown2HtmlPipe implements PipeTransform {