lucpotage/vue-katex

Content containing HTML

Closed this issue · 4 comments

agmt5989 commented

My math equations are coming from a data source that could potentially contain html elements like <br>, <b>, <u> or <i>. Using the expression prop from vue-katex, I can't have it both ways. HTML rendered, or Math. Help me out here.

watonyweng commented

@agmt5989 Please give a reproduced example.

agmt5989 commented

Imagine this payload from the database
<button>dfgtest</button> $$x = {-b \pm \sqrt{b^2-4ac} \over 2a}

I have exactly two options, depending on which result I value more:
<vue-mathjax :formula="formula"></vue-mathjax>
<div v-html="formula"></div>
Which renders as shown below (courtesy of @justforuse
jfu
Is there a way you propose I go about this?

lucpotage commented

Hi @agmt5989.

Why don't you render your math directly server side? In your example your payload contains some HTML. So you could use katex.renderToString in your case. Did you consider this?

There are also other plugins that may better fit to your use case.
Example: https://github.com/waylonflinn/markdown-it-katex (didn't test it).

I want to keep this plugin as simple as possible. For richer usage, other options exist.

agmt5989 commented

I will look into that. Though it doesn't seem engineered for vue.js.