diff --git a/build/lib/angularHighlighter.d.ts b/build/lib/angularHighlighter.d.ts
index 51e933a9..3665026c 100644
--- a/build/lib/angularHighlighter.d.ts
+++ b/build/lib/angularHighlighter.d.ts
@@ -1,6 +1 @@
 export function mustUseAngularHighlighter(fileContent: string): boolean;
-
-export function highlightAngularComponent(
-  fileContent: string,
-  fileExt: string,
-): Promise<string>;
diff --git a/build/lib/angularHighlighter.ts b/build/lib/angularHighlighter.ts
index c71897fa..5c72bdcb 100644
--- a/build/lib/angularHighlighter.ts
+++ b/build/lib/angularHighlighter.ts
@@ -1,65 +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,
-  fileExt: string,
-): Promise<string> {
-  const templateCode = getAngularTemplateCode(fileContent);
-
-  let codeHighlighted;
-  if (templateCode) {
-    const componentWithEmptyTemplate =
-      removeAngularTemplateContent(fileContent);
-    const templateCodeHighlighted = await codeToHighlightCodeHtml(
-      templateCode,
-      "html",
-    );
-
-    const componentWithoutTemplateHighlighted = await codeToHighlightCodeHtml(
-      componentWithEmptyTemplate,
-      fileExt,
-    );
-
-    codeHighlighted = componentWithoutTemplateHighlighted.replace(
-      "template",
-      "template: `" + removeCodeWrapper(templateCodeHighlighted) + "`,",
-    );
-  } else {
-    codeHighlighted = await codeToHighlightCodeHtml(fileContent, fileExt);
-  }
-
-  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 = /<pre([\s\S]*?)><code>([\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 f9c32d5f..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, ext)
+                ? await codeToHighlightCodeHtml(content, "angular-ts")
                 : await codeToHighlightCodeHtml(content, ext);
 
               frameworkSnippet.files.push(file);
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",