Last active
December 7, 2024 10:59
-
-
Save surister/91fea6bdf259a73bb22ce727f71b7eaf to your computer and use it in GitHub Desktop.
Katex on Vue3 - Math render in Vue3 - Vue - no plugins.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!-- | |
| In order to display math equations in vue3, you need to use something like mathjax or katex, I prefer | |
| katex since it seems to be the most powerful solution. | |
| vue3 katex libraries are mostly unmaintained or don't properly work on my setup, as of 2024-12-07 they bug out | |
| on my latest vue3 + nuxt projects, this is the most simple way I made it to work. | |
| You only need to run | |
| `npm install katex` | |
| Ideally you'd make it into a component like Math.vue, add a prop and v-model, and later call it in other vue files like: | |
| <math expression=` | |
| RRF(d) = | |
| \displaystyle\sum_{ d\in\\D\\} | |
| \text{\(\dfrac {1} {r_i(d) + k}\)} | |
| `/> | |
| With the computed `bind`, katex is reactive to `expression` changes, if you don't need it to be reactive, | |
| just pass `expression` to v-html and remove `bind` references. | |
| --> | |
| <script setup lang="ts"> | |
| import 'katex/dist/katex.min.css'; | |
| import katex from 'katex'; | |
| import {computed} from "vue"; | |
| const expression = ref(` | |
| RRF(d) = | |
| \\displaystyle\\sum_{ d\\in\\\\D\\\\} | |
| \\text{\\(\\dfrac {1} {r_i(d) + k}\\)} | |
| `); | |
| const bind = computed(() => katex.renderToString(expression.value, {throwOnError: false})) | |
| </script> | |
| <template> | |
| <br> | |
| <textarea v-model="expression"></textarea><br> | |
| <span v-html="bind"></span><br> | |
| {{ formula }}<br> | |
| </template> | |
| <style scoped> | |
| </style> |
Author
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Result:
