feat: implement shiki for code formatting (#284)

Author: DDonochVA

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

@@ -45,6 +45,7 @@ app.get('/:slug', async (c) => {
   const client = new WpPosts(c.var.createWPClient({ namespace: 'al/v1' }));
 
   const result = await client.getBySlug(slug);
+
   return c.json(toArticle(result.data));
 });
 

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

@@ -11,7 +11,6 @@ import {
 
 import { WPPostDetailsDto, WPPostDto } from './dtos';
 import {
-  crayonCodeRewriter,
   modifyImages,
   modifyLinks,
   removeEmptyParagraphs,
@@ -71,6 +70,7 @@ export const toArticle = (dto?: WPPostDetailsDto): Article => {
     allowedClasses: {
       blockquote: ['twitter-tweet'],
       pre: ['lang:*'],
+      code: ['language-*'],
       div: ['crayon-line', 'crayon-syntax'],
     },
     transformTags: {
@@ -81,7 +81,6 @@ export const toArticle = (dto?: WPPostDetailsDto): Article => {
 
   rewriteHTML(
     wpCodeRewriter,
-    crayonCodeRewriter,
     removeEmptyParagraphs,
     modifyLinks,
     modifyImages,

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

@@ -1,7 +1,27 @@
+import { createHighlighterCore } from 'shiki/core';
+import { loadWasm } from 'shiki/engine/oniguruma';
 import type { CheerioAPI } from 'cheerio';
-import hljs from 'highlight.js';
 
-const DEFAULT_LANGUAGE_SUBSET = ['typescript', 'html', 'css', 'scss', 'json'];
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+await loadWasm(import('shiki/dist/onig.wasm'));
+
+const highlighter = await createHighlighterCore({
+  themes: [
+    import('shiki/themes/github-dark.mjs'), // dark mode
+    import('shiki/themes/github-light.mjs'), // light mode
+  ],
+  langs: [
+    import('shiki/langs/shell.mjs'),
+    import('shiki/langs/bash.mjs'),
+    import('shiki/langs/json.mjs'),
+    import('shiki/langs/typescript.mjs'),
+    import('shiki/langs/angular-ts.mjs'),
+    import('shiki/langs/angular-html.mjs'),
+  ],
+});
+
+const themes = highlighter.getLoadedThemes();
 
 type RewriteAdapter = ($: CheerioAPI) => void;
 
@@ -18,7 +38,7 @@ export const rewriteHTML = (...adapters: RewriteAdapter[]) => {
  * @param $
  */
 export const wpCodeRewriter: RewriteAdapter = ($) => {
-  $('pre').each((index, element) => {
+  $('pre').each((_, element) => {
     const code = $(element).text();
 
     // Check if the content is already wrapped in a <code> block
@@ -29,46 +49,41 @@ export const wpCodeRewriter: RewriteAdapter = ($) => {
     // Also add `hljs` class to make it apply hljs styling schema
     if (!hasCodeBlock) {
       $(element).html(`<code class="hljs">${code}</code>`);
-    } else {
-      $(element).children('code').addClass('hljs');
     }
 
-    // Detect the language and apply syntax highlighting
-    const highlightedCode = hljs.highlightAuto(
-      code,
-      DEFAULT_LANGUAGE_SUBSET,
-    ).value;
+    const classAttr = $(element).find('code').attr()['class'];
+    const classes = classAttr.split(' ');
+    const codeLanguageClass = classes.find((cl) =>
+      /^language-[\w-]+$/.test(cl),
+    );
 
-    // Replace the content of the <code> block with the highlighted code
-    $(element).children('code').html(highlightedCode);
-  });
-};
+    let language: string;
 
-/**
- * Rewrites code blocks generated by `crayon` plugin and applies HLJS styling
- * @param $
- */
-export const crayonCodeRewriter: RewriteAdapter = ($) => {
-  $('.crayon-syntax').each((_, element) => {
-    const $element = $(element);
-    let code = '';
+    if (codeLanguageClass) {
+      language = codeLanguageClass.replace('language-', '');
+    } else {
+      language = 'angular-ts';
+    }
 
-    // Extract code from Crayon lines
-    $element.find('.crayon-line').each((_, line) => {
-      code += $(line).text() + '\n';
-    });
+    if (language === 'typescript' || language === 'ts') {
+      language = 'angular-ts';
+    }
 
-    // Detect the language and apply syntax highlighting
-    const highlightedCode = hljs.highlightAuto(
-      code,
-      DEFAULT_LANGUAGE_SUBSET,
-    ).value;
+    if (language === 'html') {
+      language = 'angular-html';
+    }
 
-    // Create a new <pre><code> element with the highlighted code
-    const preCodeBlock = `<pre><code class="hljs">${highlightedCode}</code></pre>`;
+    const highlightedCode = highlighter.codeToHtml(code, {
+      theme: highlighter.getLoadedThemes()[0],
+      themes: {
+        dark: themes[0],
+        light: themes[1],
+      },
+      lang: language,
+    });
 
-    // Replace the entire crayon-syntax element with the new preCodeBlock
-    $element.replaceWith(preCodeBlock);
+    // Replace the content of the <code> block with the highlighted code
+    $(element).replaceWith(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,13 +1,26 @@
-@use 'highlight.js/styles/github-dark.min.css';
-
 @mixin heading-styles {
   padding-bottom: 0.3rem;
   margin-bottom: 1.1rem;
   border-bottom: 1px solid #5c93bb2b;
   margin-top: 1.6rem;
 }
 
+@media (prefers-color-scheme: dark) {
+  .shiki,
+  .shiki span {
+    color: var(--shiki-dark) !important;
+    background-color: var(--shiki-dark-bg) !important;
+    font-style: var(--shiki-dark-font-style) !important;
+    font-weight: var(--shiki-dark-font-weight) !important;
+    text-decoration: var(--shiki-dark-text-decoration) !important;
+  }
+}
+
 .blog-article-content {
+  pre.shiki {
+    @apply mb-4 overflow-x-auto rounded-2xl p-4;
+  }
+
   h1 {
     @apply text-3xl;
     @include heading-styles;
@@ -37,16 +50,13 @@
     @apply al-link;
   }
 
-  code.hljs {
-    @apply my-4 rounded-2xl p-6;
-  }
-
-  code:not(.hljs) {
+  code:not(pre code) {
     padding: 0.2em 0.4em;
-    background: #215aa012;
+    background: #2e2f3b;
     border-radius: 4px;
     font-size: 0.85rem;
     font-weight: 600;
+    @apply rounded-md;
   }
 
   strong {

package.json

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