CrystalMath/ui
3
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Fix katex rendering

Browse Source
This commit is contained in:
Garrett Mills 2022-04-09 12:00:45 -05:00
parent cb8f828481
commit 97d5ff6ea2
4 changed files with 20 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
package.json
View File

@ -16,9 +16,10 @@
"cd": "pnpm run cd:build && pnpm run cd:push && pnpm run cd:rollout" "cd": "pnpm run cd:build && pnpm run cd:push && pnpm run cd:rollout"
}, },
"dependencies": { "dependencies": {
"@vuetify/vite-plugin": "1.0.0-alpha.10", "@auth0/auth0-vue": "^1.0.0",
"@types/katex": "^0.14.0", "@types/katex": "^0.14.0",
"@types/uuid": "^8.3.4", "@types/uuid": "^8.3.4",
"@vuetify/vite-plugin": "1.0.0-alpha.10",
"dependency-graph": "^0.11.0", "dependency-graph": "^0.11.0",
"install": "^0.13.0", "install": "^0.13.0",
"katex": "^0.15.3", "katex": "^0.15.3",
@ -26,8 +27,7 @@
"uuid": "^8.3.2", "uuid": "^8.3.2",
"vue": "^3.2.25", "vue": "^3.2.25",
"vue-router": "^4.0.14", "vue-router": "^4.0.14",
"vuetify": "3.0.0-beta.0", "vuetify": "3.0.0-beta.0"
"@auth0/auth0-vue": "^1.0.0"
}, },
"devDependencies": { "devDependencies": {
"@braks/revue-draggable": "^0.4.2", "@braks/revue-draggable": "^0.4.2",

13
src/components/Katex.vue
View File

@ -1,5 +1,4 @@
<script setup lang="ts"> <script setup lang="ts">
import {HTMLString} from '../types'
import {computed} from 'vue' import {computed} from 'vue'
import {MathStatement} from '../support/parse' import {MathStatement} from '../support/parse'
@ -8,8 +7,10 @@ const props = defineProps<{
size?: 'big' | 'small', size?: 'big' | 'small',
}>() }>()
let displayHtml: HTMLString = props.statement.toHTMLString() const getRenderedHTML = () => props.statement.toHTMLString()
computed(() => displayHtml = props.statement.toHTMLString())
const renderedHtml = getRenderedHTML()
computed(getRenderedHTML)
</script> </script>
<style> <style>
@ -23,7 +24,7 @@ computed(() => displayHtml = props.statement.toHTMLString())
</style> </style>
<template> <template>
<div class="big" v-if="props?.size === 'big'" v-html="displayHtml"></div> <div ref="container" class="big" v-if="props?.size === 'big'" v-html="renderedHtml"></div>
<div class="small" v-else-if="props?.size === 'small'" v-html="displayHtml"></div> <div ref="container" class="small" v-else-if="props?.size === 'small'" v-html="renderedHtml"></div>
<div v-else v-html="displayHtml"></div> <div ref="container" v-else v-html="renderedHtml"></div>
</template> </template>

3
src/main.ts
View File

@ -4,6 +4,9 @@ import { DraggablePlugin } from '@braks/revue-draggable'
import { createAuth0 } from '@auth0/auth0-vue' import { createAuth0 } from '@auth0/auth0-vue'
import router from './router' import router from './router'
import 'katex/dist/katex.min.css'
import 'katex/dist/contrib/auto-render.min'
const app = createApp(App) const app = createApp(App)

11
src/support/parse.ts
View File

@ -284,15 +284,18 @@ export class MathStatement {
/** Render the statement as HTML string. */ /** Render the statement as HTML string. */
toHTMLString(): HTMLString { toHTMLString(): HTMLString {
return katex.renderToString(this.toLaTeX(), { return katex.renderToString(this.toLaTeX(), {
output: 'mathml', output: 'html',
}) as HTMLString }) as HTMLString
} }
/** Render the statement to a DOM element. */ /** Render the statement to a DOM element. */
toDOM(): HTMLSpanElement { toDOM(node?: HTMLElement): HTMLSpanElement {
const node = document.createElement('span') if ( !node ) {
node = document.createElement('span')
}
katex.render(this.toLaTeX(), node, { katex.render(this.toLaTeX(), node, {
output: 'mathml', output: 'html',
}) })
return node return node
} }