refactor(client): align filename to component name

1 files changed, 20 insertions, 0 deletions

diff --git a/packages/client/src/components/MkCode.core.vue b/packages/client/src/components/MkCode.core.vue
new file mode 100644
index 0000000000..b074028821
--- /dev/null
+++ b/packages/client/src/components/MkCode.core.vue
@@ -0,0 +1,20 @@
+<!-- eslint-disable vue/no-v-html -->
+<template>
+<code v-if="inline" :class="`language-${prismLang}`" v-html="html"></code>
+<pre v-else :class="`language-${prismLang}`"><code :class="`language-${prismLang}`" v-html="html"></code></pre>
+</template>
+
+<script lang="ts" setup>
+import { computed } from 'vue';
+import Prism from 'prismjs';
+import 'prismjs/themes/prism-okaidia.css';
+
+const props = defineProps<{
+	code: string;
+	lang?: string;
+	inline?: boolean;
+}>();
+
+const prismLang = computed(() => Prism.languages[props.lang] ? props.lang : 'js');
+const html = computed(() => Prism.highlight(props.code, Prism.languages[prismLang.value], prismLang.value));
+</script>