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 --> <!-- eslint-disable vue/no-v-html -->
<template> <template>
<div class="codeBlockRoot" v-html="html"></div> <div class="codeBlockRoot" v-html="html"></div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { ref, computed, watch } from 'vue'; import { ref, computed, watch } from 'vue';
import { getHighlighter } from '@/scripts/code-highlighter.js';
import { BUNDLED_LANGUAGES } from 'shiki'; 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<{ const props = defineProps<{
code: string; code: string;
@ -21,14 +21,14 @@ const props = defineProps<{
const highlighter = await getHighlighter(); const highlighter = await getHighlighter();
const lang = ref<Lang | 'aiscript'>('js'); const codeLang = ref<ShikiLang | 'aiscript'>('js');
const html = computed(() => highlighter.codeToHtml(props.code, { const html = computed(() => highlighter.codeToHtml(props.code, {
lang: lang.value, lang: codeLang.value,
theme: 'dark-plus', theme: 'dark-plus',
})); }));
async function fetchLanguage(to) { 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. // Check for the loaded languages, and load the language if it's not loaded yet.
if (!highlighter.getLoadedLanguages().includes(language)) { if (!highlighter.getLoadedLanguages().includes(language)) {
@ -39,17 +39,17 @@ async function fetchLanguage(to) {
}); });
if (bundles.length > 0) { if (bundles.length > 0) {
await highlighter.loadLanguage(language); await highlighter.loadLanguage(language);
lang.value = language; codeLang.value = language;
} else { } else {
lang.value = 'js'; codeLang.value = 'js';
} }
} else { } else {
lang.value = language; codeLang.value = language;
} }
} }
watch(() => props.lang, async (to) => { watch(() => props.lang, async (to) => {
if (lang.value === to) return; if (codeLang.value === to) return;
await fetchLanguage(to); await fetchLanguage(to);
}, { immediate: true, }); }, { immediate: true, });
</script> </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'); setWasm('/assets/shiki/dist/onig.wasm');
setCDN('/assets/shiki/'); setCDN('/assets/shiki/');
let _highlighter: Highlighter; let _highlighter: Highlighter | null = null;
export async function getHighlighter() { export async function getHighlighter(): Promise<Highlighter> {
if (!_highlighter) { if (!_highlighter) {
await initHighlighter(); return await initHighlighter();
} }
return _highlighter; return _highlighter;
} }
@ -26,4 +26,6 @@ export async function initHighlighter() {
}); });
_highlighter = highlighter; _highlighter = highlighter;
return highlighter;
} }