Compare commits
1 commit
develop
...
MoshiBar/k
Author | SHA1 | Date | |
---|---|---|---|
|
92249a15f9 |
5 changed files with 82 additions and 4 deletions
|
@ -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:*",
|
||||
|
|
25
packages/frontend/src/components/MkFormula.vue
Normal file
25
packages/frontend/src/components/MkFormula.vue
Normal 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>
|
36
packages/frontend/src/components/MkFormulaCore.vue
Normal file
36
packages/frontend/src/components/MkFormulaCore.vue
Normal 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>
|
|
@ -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': {
|
||||
|
|
|
@ -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
|
||||
|
|
Loading…
Reference in a new issue