Somewhat get inline code syntax highlighting to work

Author: Strokkur424

astro.config.ts

@@ -7,7 +7,11 @@ import starlightSidebarTopics from "starlight-sidebar-topics";
 import miniMessageHighlight from "./src/assets/mm.tmLanguage.json";
 import codeConstantsPlugin from "./src/utils/remark/code_const";
 import javadocPlugin from "./src/utils/remark/javadoc";
-import { LATEST_MC_RELEASE, LATEST_PAPER_RELEASE, LATEST_VELOCITY_RELEASE } from "./src/utils/versions";
+import {
+  LATEST_MC_RELEASE,
+  LATEST_PAPER_RELEASE,
+  LATEST_VELOCITY_RELEASE,
+} from "./src/utils/versions";
 
 const prod = process.env.NODE_ENV === "production";
 
@@ -50,7 +54,8 @@ export default defineConfig({
         Footer: "./src/components/overrides/Footer.astro",
         Banner: "./src/components/overrides/Banner.astro",
         TableOfContents: "./src/components/overrides/TableOfContents.astro",
-        MobileTableOfContents: "./src/components/overrides/MobileTableOfContents.astro",
+        MobileTableOfContents:
+          "./src/components/overrides/MobileTableOfContents.astro",
       },
       plugins: [
         starlightLinksValidator({
@@ -69,7 +74,12 @@ export default defineConfig({
                   items: [
                     {
                       label: "Getting started",
-                      items: ["paper/getting-started", "paper/adding-plugins", "paper/migration", "paper/next-steps"],
+                      items: [
+                        "paper/getting-started",
+                        "paper/adding-plugins",
+                        "paper/migration",
+                        "paper/next-steps",
+                      ],
                     },
                     {
                       label: "How-to guides",
@@ -186,7 +196,10 @@ export default defineConfig({
                         {
                           label: "Entity API",
                           collapsed: true,
-                          items: ["paper/dev/entity-teleport", "paper/dev/display-entities"],
+                          items: [
+                            "paper/dev/entity-teleport",
+                            "paper/dev/display-entities",
+                          ],
                         },
                         "paper/dev/data-component-api",
                         "paper/dev/pdc",
@@ -238,7 +251,11 @@ export default defineConfig({
                     },
                     {
                       label: "How-to guides",
-                      items: ["velocity/tuning", "velocity/security", "velocity/migration"],
+                      items: [
+                        "velocity/tuning",
+                        "velocity/security",
+                        "velocity/migration",
+                      ],
                     },
                     {
                       label: "Reference",
@@ -266,7 +283,10 @@ export default defineConfig({
                     },
                     {
                       label: "How-to guides",
-                      items: ["velocity/dev/dependency-management", "velocity/dev/porting-plugins-from-velocity-1"],
+                      items: [
+                        "velocity/dev/dependency-management",
+                        "velocity/dev/porting-plugins-from-velocity-1",
+                      ],
                     },
                     {
                       label: "API",
@@ -301,7 +321,11 @@ export default defineConfig({
                   items: [
                     {
                       label: "Reference",
-                      items: ["folia/reference/overview", "folia/reference/region-logic", "folia/faq"],
+                      items: [
+                        "folia/reference/overview",
+                        "folia/reference/region-logic",
+                        "folia/faq",
+                      ],
                     },
                   ],
                 },
@@ -333,6 +357,7 @@ export default defineConfig({
                         "adventure/minimessage/api",
                         "adventure/minimessage/dynamic-replacements",
                         "adventure/minimessage/translator",
+                        "adventure/minimessage/ultra-small",
                       ],
                     },
                     "adventure/serializer/ansi",

package.json

@@ -34,7 +34,8 @@
     "prettier": "3.5.3",
     "prettier-plugin-astro": "0.14.1",
     "prettier-plugin-organize-imports": "^4.1.0",
-    "prettier-plugin-svelte": "^3.3.3"
+    "prettier-plugin-svelte": "^3.3.3",
+    "shiki": "^3.2.2"
   },
   "packageManager": "pnpm@10.8.0+sha512.0e82714d1b5b43c74610193cb20734897c1d00de89d0e18420aebc5977fa13d780a9cb05734624e81ebd81cc876cd464794850641c48b9544326b5622ca29971"
 }

pnpm-lock.yaml

@@ -0,0 +1,13 @@
+---
+import { highlight } from "../utils/shiki-utils"
+
+interface Props {
+  lang: string;
+  code: string;
+}
+
+const props: Props = Astro.props;
+const html = highlight(props.code, props.lang);
+---
+
+<a set:html={html} />

src/components/InlineHighlight.astro

@@ -0,0 +1,14 @@
+---
+title: Temp
+---
+
+import InlineHighlight from "/src/components/InlineHighlight.astro";
+
+This is <InlineHighlight lang="mm" code="<red>some red text, and <green>now green!" />, and now nothing!
+
+
+```mm
+<gradient:red:'blue'>This is what it <b>should look like</b>!</gradient>
+```
+<br />
+<InlineHighlight lang="mm" code="<gradient:red:'blue'>This is what it <b>should look like</b>!</gradient>" />

src/content/docs/adventure/minimessage/ultra-small.mdx

@@ -0,0 +1,65 @@
+import { createHighlighter } from "shiki";
+
+import MiniMessage from "../../assets/mm.tmLanguage.json";
+
+const highlighter = await createHighlighter({
+  themes: ["one-dark-pro", "one-light"],
+  langs: ["java", MiniMessage],
+});
+
+highlighter.loadLanguage();
+
+const inlineCodeRegex = /:\w+:\`.+\`/g;
+const langRegex = /:\w+:/g;
+const codeRegex = /\`.+\`/g;
+
+function plugin() {
+  return function (tree, file) {
+    console.log(file);
+
+    const rawContent = file.value;
+    let content = rawContent;
+
+    let match = null;
+    do {
+      match = inlineCodeRegex.exec(content);
+      if (match) {
+        const matchContent: string = match[0];
+
+        let rawLang: RegExpExecArray | null = langRegex.exec(matchContent);
+        if (rawLang == null) {
+          throw "Unexpected error: rawLang is null.";
+        }
+
+        let fullLang = rawLang[0];
+        let lang: string = fullLang.split(":")[1];
+
+        let rawCode: RegExpExecArray | null = codeRegex.exec(matchContent);
+        if (rawCode == null) {
+          throw "Unexpected error: rawCode is null.";
+        }
+
+        let fullCode: string = rawCode[0];
+        let code: string = fullCode.split("`")[1];
+
+        // console.log(
+        //   `Lang: ${lang}. Code: ${code}. (FullLang: ${fullLang}. FullCode: ${fullCode}) {${matchContent}}`
+        // );
+
+        const output = highlighter.codeToHtml(code, {
+          lang: lang,
+          theme: "one-dark-pro",
+        }).replace("pre", "a").replace("</pre>", "</a>");
+
+        console.log(`Output: ${output}`);
+        content = content.replaceAll(match, output);
+      }
+    } while (match != null);
+
+    // console.log(`Old content: ${rawContent}\nNew Content: ${content}`);
+    file.value = content;
+    console.log(file);
+  };
+}
+
+export default plugin;

src/utils/remark/inline_code_highlight.ts

@@ -0,0 +1,34 @@
+import { createHighlighter } from "shiki";
+import MiniMessageLang from "../assets/mm.tmLanguage.json";
+
+// import NightOwlDark from "@astrojs/starlight/integrations/expressive-code/themes/night-owl-dark.jsonc";
+// import NightOwlLight from "@astrojs/starlight/integrations/expressive-code/themes/night-owl-light.jsonc";
+import starlightConfig from "virtual:starlight/user-config";
+
+let themes: Array<any> | undefined = undefined;
+
+if (typeof starlightConfig.expressiveCode === "object") {
+  themes = starlightConfig.expressiveCode.themes;
+}
+
+// themes = themes ?? ["night-owl", "night-owl"];
+themes = ["night-owl", "one-light"]
+
+let highlighter = await createHighlighter({
+  langs: [MiniMessageLang, "java"],
+  themes: themes,
+});
+
+export const getHighlighter = () => highlighter;
+
+export const highlight = (code: string, lang: string) => {
+  const html = highlighter.codeToHtml(code, {
+    lang: lang,
+    themes: {
+      dark: themes[1],
+      light: themes[0],
+    },
+  });
+
+  return html.replace("pre", "a").replace("</pre>", "</a>");
+};