usbharu
/
misskey
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactor

This commit is contained in:
kakkokari-gtyih 2023-10-23 20:48:39 +09:00
parent 346422e469
commit d5724362ba
2 changed files with 15 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
packages/frontend/src/components/MkCode.core.vue
View File

@ -5,14 +5,14 @@ SPDX-License-Identifier: AGPL-3.0-only
<!-- eslint-disable vue/no-v-html -->
<template>
<div class="codeBlockRoot" v-html="html"></div>
<div class="codeBlockRoot" v-html="html"></div>
</template>
<script lang="ts" setup>
import { ref, computed, watch } from 'vue';
import { getHighlighter } from '@/scripts/code-highlighter.js';
import { BUNDLED_LANGUAGES } from 'shiki';
import type { Lang } from 'shiki';
import type { Lang as ShikiLang } from 'shiki';
import { getHighlighter } from '@/scripts/code-highlighter.js';
const props = defineProps<{
code: string;
@ -21,14 +21,14 @@ const props = defineProps<{
const highlighter = await getHighlighter();
const lang = ref<Lang | 'aiscript'>('js');
const codeLang = ref<ShikiLang | 'aiscript'>('js');
const html = computed(() => highlighter.codeToHtml(props.code, {
lang: lang.value,
lang: codeLang.value,
theme: 'dark-plus',
}));
async function fetchLanguage(to) {
const language = to as Lang;
const language = to as ShikiLang;
// Check for the loaded languages, and load the language if it's not loaded yet.
if (!highlighter.getLoadedLanguages().includes(language)) {
@ -39,17 +39,17 @@ async function fetchLanguage(to) {
});
if (bundles.length > 0) {
await highlighter.loadLanguage(language);
lang.value = language;
codeLang.value = language;
} else {
lang.value = 'js';
codeLang.value = 'js';
}
} else {
lang.value = language;
codeLang.value = language;
}
}
watch(() => props.lang, async (to) => {
if (lang.value === to) return;
if (codeLang.value === to) return;
await fetchLanguage(to);
}, { immediate: true, });
</script>

8
packages/frontend/src/scripts/code-highlighter.ts
View File

@ -3,11 +3,11 @@ import { setWasm, setCDN, Highlighter, getHighlighter as _getHighlighter } from
setWasm('/assets/shiki/dist/onig.wasm');
setCDN('/assets/shiki/');
let _highlighter: Highlighter;
let _highlighter: Highlighter | null = null;
export async function getHighlighter() {
export async function getHighlighter(): Promise<Highlighter> {
if (!_highlighter) {
await initHighlighter();
return await initHighlighter();
}
return _highlighter;
}
@ -26,4 +26,6 @@ export async function initHighlighter() {
});
_highlighter = highlighter;
return highlighter;
}