marked v5

package.json

@@ -44,7 +44,7 @@
     "@run-z/eslint-config": "^3.4.0",
     "@run-z/log-z": "^2.2.1",
     "@types/dompurify": "^3.0.2",
-    "@types/marked": "^4.3.1",
+    "@types/marked": "^5.0.0",
     "@typescript-eslint/eslint-plugin": "^5.62.0",
     "@typescript-eslint/parser": "^5.62.0",
     "@wesib/forms": "^2.0.2",
@@ -61,7 +61,8 @@
     "jest-environment-jsdom": "^29.6.1",
     "jest-junit": "^16.0.0",
     "jest-mock": "^29.6.1",
-    "marked": "^4.3.0",
+    "marked": "^5.1.1",
+    "marked-highlight": "^2.0.1",
     "prettier": "^2.8.8",
     "prettier-eslint-cli": "^7.1.0",
     "rollup": "^3.26.2",

src/core/articles/article-service.impl.ts

@@ -2,7 +2,9 @@ import { afterThe, OnEvent } from '@proc7ts/fun-events';
 import { asis } from '@proc7ts/primitives';
 import { BootstrapContext, BootstrapWindow } from '@wesib/wesib';
 import DOMPurify from 'dompurify';
+import hljs from 'highlight.js';
 import { marked } from 'marked';
+import { markedHighlight } from 'marked-highlight';
 import { ApiFetch, ApiRequest, ApiResponse } from '../api';
 import { Article } from './article';
 import { ArticleService, CreateArticleRequest } from './article-service';
@@ -28,13 +30,16 @@ export class ArticleService$ implements ArticleService {
       this._schedule = task => window.setTimeout(task);
     }
 
-    marked.use({
-      renderer: {
-        code(src) {
-          return `<pre class="hljs">${src}</pre>`;
+    marked.use(
+      markedHighlight({
+        langPrefix: 'hljs language-',
+        highlight(code, lang) {
+          const language = hljs.getLanguage(lang) ? lang : 'plaintext';
+
+          return hljs.highlight(code, { language }).value;
         },
-      },
-    });
+      }),
+    );
   }
 
   article(slug: string): OnEvent<[ApiResponse<Article>]> {
@@ -63,17 +68,6 @@ export class ArticleService$ implements ArticleService {
           article.body,
           {
             gfm: true,
-
-            highlight: (
-              code,
-              language,
-              cb: (error: unknown | undefined, code?: string) => void,
-            ) => {
-              this._highlight(code, language).then(
-                html => cb(undefined, `<code class="hljs language-${language}">${html}</code>`),
-                error => cb(error),
-              );
-            },
           },
           (error, html) => {
             if (error != null) {
@@ -92,28 +86,6 @@ export class ArticleService$ implements ArticleService {
     });
   }
 
-  private async _highlight(code: string, language: string): Promise<string> {
-    const {
-      default: { highlight },
-    } = await import('highlight.js');
-
-    return new Promise(resolve => {
-      try {
-        const { errorRaised, value } = highlight(code, { language, ignoreIllegals: true });
-
-        if (errorRaised) {
-          console.error(errorRaised);
-          resolve(code);
-        } else {
-          resolve(value);
-        }
-      } catch (error) {
-        console.error(error);
-        resolve(code);
-      }
-    });
-  }
-
   likeArticle(slug: string, like = true): OnEvent<[ApiResponse<Article>]> {
     const apiRequest: ApiRequest<Article> = {
       path: `articles/${encodeURIComponent(slug)}/favorite`,