Using mist in landing page

src/app/(home)/page.tsx

@@ -21,7 +21,7 @@ export const mistShowcase = [
     greet("Developer");
 }
 
-public void greet(str* name) {
+pub void greet(str* name) {
   // Familiar pointer ergonomics with Rust safety
   String greeting = name.to_string();
   println!("Hello, {}!", greeting);
@@ -46,19 +46,19 @@ void process_data() {
     title: "Class and Type System",
     description:
       "Classes are syntactic sugar for Rust structs. Using 'extends' provides inheritance-style syntax over struct composition, compiling into the underlying Rust type system.",
-    code: `public struct PluginInfo {
-    public String name,
-    public String version,
+    code: `pub struct PluginInfo {
+    pub String name,
+    pub String version,
 }
   
-public class PluginRegistry<T> {
+pub class PluginRegistry<T> {
     T plugins;
 
-    public constructor(T plugins) {
+    pub constructor(T plugins) {
         self.plugins = plugins;
     }
 
-    public T plugins(self) {
+    pub T plugins(self) {
         return self.plugins;
     }
 }`,
@@ -68,10 +68,10 @@ public class PluginRegistry<T> {
     title: "Better Developer Experience",
     description:
       "While Rust can already be a great DX, Mist implements concepts that are proven to improve structure.",
-    code: `public class Logger {
+    code: `pub class Logger {
     String prefix;
 
-    public constructor(str* prefix) {
+    pub constructor(str* prefix) {
         self.prefix = prefix.to_string();
     }
 

src/components/Morph.tsx

@@ -1,21 +1,28 @@
 "use client";
 
-import { BundledLanguage, codeToTokens } from "shiki";
+import { BundledLanguage, codeToTokens, createHighlighter } from "shiki";
 import { motion, AnimatePresence } from "framer-motion";
 import { useEffect, useState } from "react";
+import mist from "../../public/mist.tmLanguage.json";
 
 interface Props {
   code: string;
-  lang?: BundledLanguage;
 }
 
-export default function MorphCode({ code, lang = "rust" }: Props) {
+const highlighterPromise = createHighlighter({
+  themes: ["github-dark"],
+  langs: [mist],
+});
+
+export default function MorphCode({ code }: Props) {
   const [lines, setLines] = useState<any[][]>([]);
 
   useEffect(() => {
     async function run() {
-      const result = await codeToTokens(code, {
-        lang,
+      const highlighter = await highlighterPromise;
+
+      const result = highlighter.codeToTokens(code, {
+        lang: "mist" as any,
         theme: "github-dark",
       });
 
@@ -36,7 +43,7 @@ export default function MorphCode({ code, lang = "rust" }: Props) {
     }
 
     run();
-  }, [code, lang]);
+  }, [code]);
 
   return (
     <pre className="text-sm overflow-x-scroll overflow-y-hidden">