Add Code Highlighting to RemoteContent

astro/package.json

@@ -24,6 +24,7 @@
  "astro": "^4.7.0",
  "astro-compress": "^2.0.8",
  "astro-index-pages": "src/integrations/astro-index-pages",
+ "astro-remote": "^0.3.3",
  "marked": "^7.0.1",
  "mermaid": "^9.1.6",
  "pagefind": "^1.1.0",

astro/src/components/CodeBlock.astro

@@ -0,0 +1,7 @@
+---
+import { Code } from "astro/components";
+
+const { lang, code, ...props } = Astro.props;
+---
+
+<Code code={code} lang={lang} {...props} />

astro/src/components/RemoteContent.astro

@@ -1,8 +1,9 @@
 ---
 /**
- * Remote content fetcher. Remote content is assumed to be markdown.
- */
-import { marked } from 'marked';
+ * Remote content fetcher. Remote content is assumed to be markdown.
+ */
+import { Markdown } from "astro-remote";
+import CodeBlock from "./CodeBlock.astro";
 
 export interface Props {
  /**
@@ -15,9 +16,9 @@ export interface Props {
  /**
  * Optional tags marking beginning and end of content to include
  * Loosely based on https://docs.asciidoctor.org/asciidoc/latest/directives/include-tagged-regions/
- * Note: Currently only supports one set of tags. If the tags are enclosed in comments, make sure to have the comments on one line. 
+ * Note: Currently only supports one set of tags. If the tags are enclosed in comments, make sure to have the comments on one line.
  *
- * See https://raw.githubusercontent.com/FusionAuth/fusionauth-example-scripts/main/client-side-password-rules/README.md and 
+ * See https://raw.githubusercontent.com/FusionAuth/fusionauth-example-scripts/main/client-side-password-rules/README.md and
  * src/content/docs/customize/look-and-feel/client-side-password-rule-validation.mdx for an example.
  */
  tags?: string;
@@ -35,44 +36,59 @@ try {
  } else {
  const matchLines = url.match(/.*#L(\d+)(-L(\d+))?$/);
  if (matchLines) {
- remoteSelectedContent = selectLines(remoteContent, matchLines[1], matchLines[3]);
+ remoteSelectedContent = selectLines(
+ remoteContent,
+ parseInt(matchLines[1]),
+ parseInt(matchLines[3]),
+ );
  } else {
  remoteSelectedContent = remoteContent.trim();
  }
  }
-
- remoteSelectedContent = marked.parse(remoteSelectedContent);
-
 } catch (e) {
- console.log("Couldn't retrieve remote code",e);
+ console.log("Couldn't retrieve remote code", e);
 }
 
 function selectTagged(content: string, tags: string): string {
  const lines = content.split("\n");
 
  const startLine = lines.findIndex((line) => line.includes(`tag::${tags}`));
- const endLine = lines.findIndex((line) => line.includes(`end::${tags}`))
+ const endLine = lines.findIndex((line) => line.includes(`end::${tags}`));
 
  // remove trailing multi-line HTML comment
  if (startLine < lines.length - 1) {
- lines[startLine + 1] = lines[startLine + 1].replace('-->', '');
+ lines[startLine + 1] = lines[startLine + 1].replace("-->", "");
  }
 
  // remove preceding multi-line HTML comment
- lines[endLine-1] = lines[endLine-1].replace('<!--', '');
+ lines[endLine - 1] = lines[endLine - 1].replace("<!--", "");
 
- return lines.slice(startLine + 1, endLine).join("\n").replace(/\s+$/g, '');
+ return lines
+ .slice(startLine + 1, endLine)
+ .join("\n")
+ .replace(/\s+$/g, "");
 }
 
-function selectLines(content: string, lineNum: string, lineEnd: string): string {
+function selectLines(
+ content: string,
+ lineNum: number,
+ lineEnd: number,
+): string {
  const lines = content.split("\n");
  if (lineNum && lineEnd) {
- return lines.slice(lineNum-1, lineEnd-1).join("\n");
+ return lines.slice(lineNum - 1, lineEnd - 1).join("\n");
  } else if (lineNum) {
  return lines[lineNum - 1];
  } else {
  return content;
  }
 }
 ---
-<article set:html={remoteSelectedContent} />
+
+<article>
+ <Markdown
+ content={remoteSelectedContent}
+ sanitize={{ allowComponents: true }}
+ components={{ CodeBlock }}
+ />
+</article>