naskya/firefish
1
0
Fork 1
mirror of https://example.com synced 2024-11-22 15:16:39 +09:00
Code Issues Activity

feat: auto load MkCode syntax highlight

Browse source
This commit is contained in:
sup39 2024-01-23 07:18:42 +09:00 committed by naskya
parent 030e31f3c5
commit cb9ea0708a
Signed by: naskya
GPG key ID: 712D413B3A9FED5C
2 changed files with 45 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

23
packages/client/src/components/MkCode.core.vue
View file

@ -7,8 +7,8 @@
</template>
<script lang="ts" setup>
import { computed } from "vue";
import Prism from "prismjs";
import { computed, ref } from "vue";
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(() =>
Prism.languages[props.lang] ? props.lang : "plaintext",
// fallback to "plaintext" if language not loaded
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,

26
packages/client/src/scripts/prism.ts Normal file
View file

@ -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;