feat: integrate shiki for code formatting

libs/blog-bff/articles/api/src/lib/api.ts

@@ -44,7 +44,7 @@ app.get('/:slug', async (c) => {
 
   const result = await client.getBySlug(slug);
 
-  return c.json(toArticle(result.data));
+  return c.json(await toArticle(result.data));
 });
 
 app.get('/:id/related', async (c) => {

libs/blog-bff/articles/api/src/lib/mappers.ts

@@ -41,7 +41,7 @@ export const toArticlePreviewList = (dtos: WPPostDto[]): ArticlePreview[] => {
   });
 };
 
-export const toArticle = (dto?: WPPostDetailsDto): Article => {
+export const toArticle = async (dto?: WPPostDetailsDto): Promise<Article> => {
   const title = cheerio.load(dto.title.rendered || '');
   const content = sanitizeHtml(dto?.content.rendered || '', {
     allowedTags: sanitizeHtml.defaults.allowedTags.concat(['img']),
@@ -69,7 +69,7 @@ export const toArticle = (dto?: WPPostDetailsDto): Article => {
   });
   const $ = cheerio.load(content);
 
-  rewriteHTML(
+  await rewriteHTML(
     wpCodeRewriter,
     crayonCodeRewriter,
     removeEmptyParagraphs,

libs/blog-bff/articles/api/src/lib/utils.ts

@@ -1,23 +1,38 @@
 import type { CheerioAPI } from 'cheerio';
 import hljs from 'highlight.js';
+import { createHighlighterCore, loadWasm } from 'shiki/core';
+import angularTs from 'shiki/langs/angular-ts.mjs';
+import angularTemplate from 'shiki/langs/angular-ts.mjs';
+import js from 'shiki/langs/javascript.mjs';
+import typescript from 'shiki/langs/typescript.mjs';
+import githubDark from 'shiki/themes/github-dark.mjs';
+
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+await loadWasm(import('shiki/dist/onig.wasm'));
+
+const highlighter = await createHighlighterCore({
+  themes: [githubDark],
+  langs: [js, angularTs, typescript, angularTemplate],
+});
 
 const DEFAULT_LANGUAGE_SUBSET = ['typescript', 'html', 'css', 'scss', 'json'];
 
-type RewriteAdapter = ($: CheerioAPI) => void;
+type RewriteAdapter = ($: CheerioAPI) => Promise<void> | void;
 
 export const rewriteHTML = (...adapters: RewriteAdapter[]) => {
-  return (content: CheerioAPI) => {
-    adapters.forEach((adapter) => {
-      adapter(content);
-    });
+  return async (content: CheerioAPI) => {
+    for await (const adapter of adapters) {
+      await adapter(content);
+    }
   };
 };
 
 /**
  * Rewrites default Wordpress code blocks and applies HLJS styling
  * @param $
  */
-export const wpCodeRewriter: RewriteAdapter = ($) => {
+export const wpCodeRewriter: RewriteAdapter = async ($) => {
   $('pre').each((index, element) => {
     const code = $(element).text();
 
@@ -34,10 +49,20 @@ export const wpCodeRewriter: RewriteAdapter = ($) => {
     }
 
     // Detect the language and apply syntax highlighting
-    const highlightedCode = hljs.highlightAuto(
-      code,
-      DEFAULT_LANGUAGE_SUBSET,
-    ).value;
+    let language = hljs.highlightAuto(code, DEFAULT_LANGUAGE_SUBSET).language;
+
+    if (language === 'typescript') {
+      language = 'angular-ts';
+    }
+
+    if (language === 'html') {
+      language = 'angular-html';
+    }
+
+    const highlightedCode = highlighter.codeToHtml(code, {
+      theme: 'github-dark',
+      lang: language,
+    });
 
     // Replace the content of the <code> block with the highlighted code
     $(element).children('code').html(highlightedCode);

libs/blog-bff/articles/api/tsconfig.lib.json

@@ -1,7 +1,8 @@
 {
   "extends": "./tsconfig.json",
   "compilerOptions": {
-    "module": "commonjs",
+    "target": "ESNext",
+    "module": "ESNext",
     "outDir": "../../../../dist/out-tsc",
     "declaration": true,
     "types": ["node", "@cloudflare/workers-types"],

libs/blog/articles/ui-article-content/src/lib/article-content/article-content.component.scss

@@ -1,4 +1,4 @@
-@use 'highlight.js/styles/github-dark.min.css';
+//@use 'highlight.js/styles/github-dark.min.css';
 
 @mixin heading-styles {
   padding-bottom: 0.3rem;
@@ -8,6 +8,10 @@
 }
 
 .blog-article-content {
+  pre.shiki {
+    @apply mb-4 rounded-2xl p-4;
+  }
+
   h1 {
     @apply text-3xl;
     @include heading-styles;
@@ -37,10 +41,6 @@
     @apply al-link;
   }
 
-  code.hljs {
-    @apply my-4 rounded-2xl p-6;
-  }
-
   code:not(.hljs) {
     padding: 0.2em 0.4em;
     background: #215aa012;

package.json

@@ -54,6 +54,7 @@
     "prettier-plugin-organize-attributes": "^1.0.0",
     "rxjs": "~7.8.1",
     "sanitize-html": "^2.13.0",
+    "shiki": "^1.11.1",
     "stylelint": "^16.3.1",
     "tailwind-merge": "^2.3.0",
     "tslib": "^2.6.1",