From 11e8f0de6538281ea37b165826633db88ed0aab4 Mon Sep 17 00:00:00 2001 From: dinnerhe Date: Sun, 14 Jun 2026 23:19:22 -0700 Subject: [PATCH 1/3] Update support for Angular component highlighting --- build/lib/angularHighlighter.ts | 4 ++-- build/lib/highlighter.ts | 2 ++ 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/build/lib/angularHighlighter.ts b/build/lib/angularHighlighter.ts index c71897fa..4174c163 100644 --- a/build/lib/angularHighlighter.ts +++ b/build/lib/angularHighlighter.ts @@ -18,12 +18,12 @@ export async function highlightAngularComponent( removeAngularTemplateContent(fileContent); const templateCodeHighlighted = await codeToHighlightCodeHtml( templateCode, - "html", + "angular-html", ); const componentWithoutTemplateHighlighted = await codeToHighlightCodeHtml( componentWithEmptyTemplate, - fileExt, + "angular-ts", ); codeHighlighted = componentWithoutTemplateHighlighted.replace( diff --git a/build/lib/highlighter.ts b/build/lib/highlighter.ts index 180b1e0b..5cb035b7 100644 --- a/build/lib/highlighter.ts +++ b/build/lib/highlighter.ts @@ -32,6 +32,8 @@ async function getHighlighter(): Promise< "jsx", "vue", "marko", + "angular-ts", + "angular-html", ], langAlias: { tsrx: "jsx", From 33f898f616e460435c73d6155304033eb2e84ec0 Mon Sep 17 00:00:00 2001 From: dinnerhe Date: Sun, 14 Jun 2026 23:26:42 -0700 Subject: [PATCH 2/3] Remove the fileExt for angularHighligher as it's not used --- build/lib/angularHighlighter.d.ts | 5 +---- build/lib/angularHighlighter.ts | 3 +-- build/lib/generateContent.ts | 2 +- 3 files changed, 3 insertions(+), 7 deletions(-) diff --git a/build/lib/angularHighlighter.d.ts b/build/lib/angularHighlighter.d.ts index 51e933a9..8eb68bdf 100644 --- a/build/lib/angularHighlighter.d.ts +++ b/build/lib/angularHighlighter.d.ts @@ -1,6 +1,3 @@ export function mustUseAngularHighlighter(fileContent: string): boolean; -export function highlightAngularComponent( - fileContent: string, - fileExt: string, -): Promise; +export function highlightAngularComponent(fileContent: string): Promise; diff --git a/build/lib/angularHighlighter.ts b/build/lib/angularHighlighter.ts index 4174c163..e6d72746 100644 --- a/build/lib/angularHighlighter.ts +++ b/build/lib/angularHighlighter.ts @@ -8,7 +8,6 @@ export function mustUseAngularHighlighter(fileContent: string): boolean { export async function highlightAngularComponent( fileContent: string, - fileExt: string, ): Promise { const templateCode = getAngularTemplateCode(fileContent); @@ -31,7 +30,7 @@ export async function highlightAngularComponent( "template: `" + removeCodeWrapper(templateCodeHighlighted) + "`,", ); } else { - codeHighlighted = await codeToHighlightCodeHtml(fileContent, fileExt); + codeHighlighted = await codeToHighlightCodeHtml(fileContent, "angular-ts"); } return codeHighlighted; diff --git a/build/lib/generateContent.ts b/build/lib/generateContent.ts index f9c32d5f..03d02efa 100644 --- a/build/lib/generateContent.ts +++ b/build/lib/generateContent.ts @@ -210,7 +210,7 @@ export default async function generateContent( frameworkSnippet.markdownFiles.push(file); } else { file.contentHtml = mustUseAngularHighlighter(content) - ? await highlightAngularComponent(content, ext) + ? await highlightAngularComponent(content) : await codeToHighlightCodeHtml(content, ext); frameworkSnippet.files.push(file); From 5176a95b461f4a0959009c28f13b3a393d711520 Mon Sep 17 00:00:00 2001 From: dinnerhe Date: Sun, 14 Jun 2026 23:44:27 -0700 Subject: [PATCH 3/3] Remove most of angular highlighter as it's not needed --- build/lib/angularHighlighter.d.ts | 2 -- build/lib/angularHighlighter.ts | 59 ------------------------------- build/lib/generateContent.ts | 7 ++-- 3 files changed, 2 insertions(+), 66 deletions(-) diff --git a/build/lib/angularHighlighter.d.ts b/build/lib/angularHighlighter.d.ts index 8eb68bdf..3665026c 100644 --- a/build/lib/angularHighlighter.d.ts +++ b/build/lib/angularHighlighter.d.ts @@ -1,3 +1 @@ export function mustUseAngularHighlighter(fileContent: string): boolean; - -export function highlightAngularComponent(fileContent: string): Promise; diff --git a/build/lib/angularHighlighter.ts b/build/lib/angularHighlighter.ts index e6d72746..5c72bdcb 100644 --- a/build/lib/angularHighlighter.ts +++ b/build/lib/angularHighlighter.ts @@ -1,64 +1,5 @@ -import { codeToHighlightCodeHtml } from "./highlighter.ts"; - export function mustUseAngularHighlighter(fileContent: string): boolean { return ( fileContent.includes("@angular/core") && fileContent.includes("template") ); } - -export async function highlightAngularComponent( - fileContent: string, -): Promise { - const templateCode = getAngularTemplateCode(fileContent); - - let codeHighlighted; - if (templateCode) { - const componentWithEmptyTemplate = - removeAngularTemplateContent(fileContent); - const templateCodeHighlighted = await codeToHighlightCodeHtml( - templateCode, - "angular-html", - ); - - const componentWithoutTemplateHighlighted = await codeToHighlightCodeHtml( - componentWithEmptyTemplate, - "angular-ts", - ); - - codeHighlighted = componentWithoutTemplateHighlighted.replace( - "template", - "template: `" + removeCodeWrapper(templateCodeHighlighted) + "`,", - ); - } else { - codeHighlighted = await codeToHighlightCodeHtml(fileContent, "angular-ts"); - } - - return codeHighlighted; -} - -function getAngularTemplateCode(fileContent: string): string { - // regex to grab what is inside angular component template inside backticks - const regex = /template:\s*`([\s\S]*?)`/gm; - - // grab the template string - const template = regex.exec(fileContent); - - if (template) return template[1]; - - return ""; -} - -function removeAngularTemplateContent(fileContent: string): string { - const componentWithoutContentInsideTemplate = fileContent.replace( - /template:\s*`([\s\S]*?)([^*])`,?/gm, - "template", - ); - - return componentWithoutContentInsideTemplate; -} - -function removeCodeWrapper(html: string): string { - const regexForWrapper = /([\s\S]*?)<\/code><\/pre>/gm; - const code = regexForWrapper.exec(html); - return code ? code[2] : ""; -} diff --git a/build/lib/generateContent.ts b/build/lib/generateContent.ts index 03d02efa..1a377c22 100644 --- a/build/lib/generateContent.ts +++ b/build/lib/generateContent.ts @@ -4,10 +4,7 @@ import path from "node:path"; import { frameworks } from "../../frameworks.ts"; import playgroundUrlByFramework from "./playgroundUrlByFramework.ts"; import prettier from "prettier"; -import { - highlightAngularComponent, - mustUseAngularHighlighter, -} from "./angularHighlighter.ts"; +import { mustUseAngularHighlighter } from "./angularHighlighter.ts"; import { codeToHighlightCodeHtml, markdownToHighlightedHtml, @@ -210,7 +207,7 @@ export default async function generateContent( frameworkSnippet.markdownFiles.push(file); } else { file.contentHtml = mustUseAngularHighlighter(content) - ? await highlightAngularComponent(content) + ? await codeToHighlightCodeHtml(content, "angular-ts") : await codeToHighlightCodeHtml(content, ext); frameworkSnippet.files.push(file);