KaTeX support

This commit is contained in:
moshibar 2023-11-27 13:07:28 -06:00
parent 51ec675e00
commit 92249a15f9
5 changed files with 82 additions and 4 deletions

View file

@ -51,6 +51,7 @@
"insert-text-at-cursor": "0.3.0",
"is-file-animated": "1.0.2",
"json5": "2.2.3",
"katex": "^0.16.9",
"matter-js": "0.19.0",
"mfm-js": "0.23.3",
"misskey-js": "workspace:*",

View file

@ -0,0 +1,25 @@
<template>
<XFormula :formula="formula" :block="block" />
</template>
<script lang="ts">
import { defineAsyncComponent, defineComponent } from "vue";
export default defineComponent({
components: {
XFormula: defineAsyncComponent(
() => import("@/components/MkFormulaCore.vue"),
),
},
props: {
formula: {
type: String,
required: true,
},
block: {
type: Boolean,
required: true,
},
},
});
</script>

View file

@ -0,0 +1,36 @@
<template>
<div v-if="block" v-html="compiledFormula"></div>
<span v-else v-html="compiledFormula"></span>
</template>
<script lang="ts">
import { defineComponent } from "vue";
import katex from "katex";
export default defineComponent({
props: {
formula: {
type: String,
required: true,
},
block: {
type: Boolean,
required: true,
},
},
computed: {
compiledFormula(): any {
const katexString = katex.renderToString(this.formula, {
throwOnError: false,
} as any);
return this.block
? `<div style="text-align:center">${katexString}</div>`
: katexString;
},
},
});
</script>
<style>
@import "../../node_modules/katex/dist/katex.min.css";
</style>

View file

@ -12,6 +12,7 @@ import MkLink from '@/components/MkLink.vue';
import MkMention from '@/components/MkMention.vue';
import MkEmoji from '@/components/global/MkEmoji.vue';
import MkCustomEmoji from '@/components/global/MkCustomEmoji.vue';
import MkFormula from "@/components/MkFormula.vue";
import MkCode from '@/components/MkCode.vue';
import MkGoogle from '@/components/MkGoogle.vue';
import MkSparkle from '@/components/MkSparkle.vue';
@ -389,12 +390,24 @@ export default function(props: MfmProps) {
})];
}
case 'mathInline': {
return [h('code', token.props.formula)];
case "mathInline": {
return [
h(MkFormula, {
key: Math.random(),
formula: token.props.formula,
block: false,
}),
];
}
case 'mathBlock': {
return [h('code', token.props.formula)];
case "mathBlock": {
return [
h(MkFormula, {
key: Math.random(),
formula: token.props.formula,
block: true,
}),
];
}
case 'search': {

View file

@ -753,6 +753,9 @@ importers:
json5:
specifier: 2.2.3
version: 2.2.3
katex:
specifier: ^0.16.9
version: 0.16.9
matter-js:
specifier: 0.19.0
version: 0.19.0