angular · JeanMeche · Jan 22, 2026
diff --git a/adev/BUILD.bazel b/adev/BUILD.bazel
@@ -60,6 +60,7 @@ APPLICATION_DEPS = [
     ":node_modules/@lezer/highlight",
     ":node_modules/@lezer/javascript",
     ":node_modules/@stackblitz/sdk",
+    ":node_modules/shiki",
     ":node_modules/@typescript/vfs",
     ":node_modules/@webcontainer/api",
     ":node_modules/@xterm/addon-fit",
@@ -91,6 +92,30 @@ APPLICATION_DEPS = [
     ":node_modules/crelt",
     ":node_modules/style-mod",
     ":node_modules/w3c-keyname",
+    #
+    ":node_modules/@shikijs/themes",
+    ":node_modules/@shikijs/langs",
+    ":node_modules/@shikijs/engine-oniguruma",
+    ":node_modules/@shikijs/core",
+    ":node_modules/@shikijs/engine-javascript",
+    ":node_modules/@shikijs/types",
+    ":node_modules/@shikijs/vscode-textmate",
+    ":node_modules/hast-util-to-html",
+    # ":node_modules/oniguruma-to-es",
+    ":node_modules/ccount",
+    ":node_modules/comma-separated-tokens",
+    ":node_modules/hast-util-whitespace",
+    ":node_modules/html-void-elements",
+    # ":node_modules/oniguruma-parser",
+    ":node_modules/property-information",
+    # ":node_modules/regex-recursion",
+    # ":node_modules/regex",
+    ":node_modules/space-separated-tokens",
+    ":node_modules/stringify-entities",
+    ":node_modules/zwitch",
+    ":node_modules/character-entities-html4",
+    ":node_modules/character-entities-legacy",
+    # ":node_modules/regex-utilities",
 ]
 
 TEST_FILES = APPLICATION_FILES + glob(["src/app/**/*.spec.ts"])

diff --git a/adev/package.json b/adev/package.json
@@ -40,6 +40,13 @@
     "@lezer/lr": "1.4.7",
     "@lezer/sass": "1.1.0",
     "@marijn/find-cluster-break": "1.0.2",
+    "@shikijs/core": "^3.21.0",
+    "@shikijs/engine-javascript": "^3.21.0",
+    "@shikijs/engine-oniguruma": "^3.21.0",
+    "@shikijs/langs": "^3.21.0",
+    "@shikijs/themes": "^3.21.0",
+    "@shikijs/types": "^3.21.0",
+    "@shikijs/vscode-textmate": "^10.0.2",
     "@stackblitz/sdk": "1.11.0",
     "@types/dom-navigation": "1.0.6",
     "@types/jasmine": "5.1.15",
@@ -51,10 +58,17 @@
     "@xterm/xterm": "6.0.0",
     "algoliasearch": "5.46.3",
     "angular-split": "20.0.0",
+    "ccount": "^2.0.1",
+    "character-entities-html4": "^2.1.0",
+    "character-entities-legacy": "^3.0.0",
+    "comma-separated-tokens": "^2.0.3",
     "crelt": "1.0.6",
     "diff": "8.0.3",
     "emoji-regex": "10.6.0",
     "fflate": "0.8.2",
+    "hast-util-to-html": "^9.0.5",
+    "hast-util-whitespace": "^3.0.0",
+    "html-void-elements": "^3.0.0",
     "jasmine-core": "5.13.0",
     "jsdom": "27.4.0",
     "karma-chrome-launcher": "3.2.0",
@@ -69,13 +83,17 @@
     "preact": "10.28.2",
     "preact-render-to-string": "6.6.5",
     "prettier": "3.7.4",
+    "property-information": "^7.1.0",
     "rxjs": "7.8.2",
     "shiki": "3.21.0",
+    "space-separated-tokens": "^2.0.2",
+    "stringify-entities": "^4.0.4",
     "style-mod": "4.1.3",
     "tinyglobby": "0.2.15",
     "tslib": "2.8.1",
     "typescript": "5.9.3",
-    "w3c-keyname": "2.2.8"
+    "w3c-keyname": "2.2.8",
+    "zwitch": "^2.0.4"
   },
   "devDependencies": {
     "autoprefixer": "10.4.23",

diff --git a/adev/src/app/features/home/code-highlighting/code-highlighter.ts b/adev/src/app/features/home/code-highlighting/code-highlighter.ts
@@ -0,0 +1,33 @@
+import { Injectable, OnDestroy } from '@angular/core';
+import angularTs from '@shikijs/langs/angular-ts';
+import githubDark from '@shikijs/themes/github-dark';
+import githubLight from '@shikijs/themes/github-light';
+import { CodeToHastOptions, createHighlighterCoreSync, HighlighterCore } from 'shiki/core';
+import { createOnigurumaEngine } from 'shiki/engine/oniguruma';
+
+@Injectable({providedIn: 'root'})
+export class CodeHighligher implements OnDestroy {
+  private cachedHighligher: HighlighterCore | undefined;
+
+  async codeToHtml(code: string, options: CodeToHastOptions): Promise<string> {
+    const highlighter = await this.getHighlighter();
+    return highlighter.codeToHtml(code, options);
+  }
+
+  ngOnDestroy(): void {
+    this.cachedHighligher?.dispose();
+  }
+
+  private async getHighlighter() {
+    if (!this.cachedHighligher) {
+      const engine = await createOnigurumaEngine(import('shiki/wasm'));
+      this.cachedHighligher = createHighlighterCoreSync({
+        themes: [githubLight, githubDark],
+        langs: [angularTs],
+        engine,
+      });
+    }
+
+    return this.cachedHighligher;
+  }
+}
diff --git a/adev/src/app/features/home/components/code-block/code-block.ts b/adev/src/app/features/home/components/code-block/code-block.ts
@@ -0,0 +1,15 @@
+import { AsyncPipe } from "@angular/common";
+import { Component, computed, inject, input } from "@angular/core";
+import { CodeHighligher } from "../../code-highlighting/code-highlighter";
+
+@Component({
+    selector: 'adev-code-block',
+    template: `<pre><code [innerHTML]="highlightedCode() | async"></code></pre>`,
+    imports: [AsyncPipe],
+})
+export class CodeBlock {
+    codeHighlighter = inject(CodeHighligher);
+    code = input.required<string>();
+
+    highlightedCode = computed(() => this.codeHighlighter.codeToHtml(this.code(), { lang: 'typescript', theme: 'github-light' }));
+}