feat: Dynamically load katex to improve first-screen loading speed

This commit is contained in:
Shirasawa 2025-09-17 04:18:16 +00:00
parent 9321a6ff60
commit 9b3d71f0d2
2 changed files with 16 additions and 6 deletions

View file

@ -1,10 +1,22 @@
<script lang="ts">
import katex from 'katex';
import 'katex/contrib/mhchem';
import 'katex/dist/katex.min.css';
import type { renderToString as katexRenderToString } from 'katex';
import { onMount } from 'svelte';
export let content: string;
export let displayMode: boolean = false;
let renderToString: typeof katexRenderToString | null = null;
onMount(async () => {
const [katex] = await Promise.all([
import('katex'),
import('katex/contrib/mhchem'),
import('katex/dist/katex.min.css'),
]);
renderToString = katex.renderToString;
});
</script>
{@html katex.renderToString(content, { displayMode, throwOnError: false })}
{#if renderToString}
{@html renderToString(content, { displayMode, throwOnError: false })}
{/if}

View file

@ -1,5 +1,3 @@
import katex from 'katex';
const DELIMITER_LIST = [
{ left: '$$', right: '$$', display: true },
{ left: '$', right: '$', display: false },