packages/client/src/components/MkCode.core.vue

@@ -7,8 +7,8 @@
 </template>
 
 <script lang="ts" setup>
-import { computed } from "vue";
+import { computed, ref } from "vue";
-import Prism from "prismjs";
+import Prism, { loadLanguage } from "@/scripts/prism";
 import "prismjs/themes/prism-okaidia.css";
 
 const props = defineProps<{
@@ -17,9 +17,24 @@ const props = defineProps<{
 	inline?: boolean;
 }>();
 
-const prismLang = computed(() =>
+// fallback to "plaintext" if language not loaded
-	Prism.languages[props.lang] ? props.lang : "plaintext",
+const prismLang = ref(
+	props.lang != null && props.lang in Prism.languages
+		? props.lang
+		: "plaintext",
 );
+
+// try to load language asynchronously
+if (props.lang != null && !(props.lang in Prism.languages)) {
+	const { lang } = props;
+	loadLanguage(props.lang).then(
+		// onLoaded
+		() => (prismLang.value = lang),
+		// onError
+		() => {},
+	);
+}
+
 const html = computed(() =>
 	Prism.highlight(
 		props.code,

packages/client/src/scripts/prism.ts

@@ -0,0 +1,26 @@
+import Prism from "prismjs";
+import "prismjs/plugins/autoloader/prism-autoloader.js";
+
+// TODO
+Prism.plugins.autoloader.languages_path =
+	"https://cdn.jsdelivr.net/npm/prismjs@1.29.0/components/";
+
+const nonExistingLanguagesCache = new Set<string>();
+export const loadLanguage = (lang: string) =>
+	new Promise<void>((resolve, reject) => {
+		// cached non-existing language
+		if (nonExistingLanguagesCache.has(lang)) return reject();
+		// load language with autoloader
+		Prism.plugins.autoloader.loadLanguages(
+			lang,
+			// loaded
+			() => resolve(),
+			// failed
+			() => {
+				nonExistingLanguagesCache.add(lang);
+				reject();
+			},
+		);
+	});
+
+export default Prism;