Markdown file
-
-
- {{ example$ | async }}
-
-
+ @if (example$ | async; as example) {
+
+
+
+ }
@@ -40,5 +42,7 @@ import { Hero } from '../components/hero.component';
export class LandingComponent {
private http = inject(HttpClient);
- example$ = this.http.get('assets/md/example.md', { responseType: 'text' });
+ example$ = this.http
+ .get('assets/md/example.md', { responseType: 'text' })
+ .pipe(switchMap((content) => shiki(content, 'markdown')));
}
diff --git a/src/app/shiki.ts b/src/app/shiki.ts
new file mode 100644
index 0000000..4f80be4
--- /dev/null
+++ b/src/app/shiki.ts
@@ -0,0 +1,10 @@
+import { getHighlighter } from 'shikiji';
+
+export async function shiki(content: string, lang = 'plaintext') {
+ const shiki = await getHighlighter({
+ themes: ['github-dark'],
+ langs: ['markdown'],
+ });
+
+ return shiki.codeToHtml(content, { lang, theme: 'github-dark' });
+}
diff --git a/src/app/unsecure.pipe.ts b/src/app/unsecure.pipe.ts
new file mode 100644
index 0000000..807ce10
--- /dev/null
+++ b/src/app/unsecure.pipe.ts
@@ -0,0 +1,13 @@
+import { Pipe, inject } from '@angular/core';
+import { DomSanitizer } from '@angular/platform-browser';
+
+@Pipe({
+ standalone: true,
+ name: 'unsecureHtml',
+})
+export class UnsecureHtmlPipe {
+ private sanitizer = inject(DomSanitizer);
+ transform(value: any): any {
+ return this.sanitizer.bypassSecurityTrustHtml(value);
+ }
+}