lucpotage / vue-katex Goto Github PK

View Code? Open in Web Editor NEW

125.0 125.0 22.0 2.02 MB

Vue plugin for KaTeX

License: MIT License

JavaScript 86.32% Vue 13.68%

katex vue

vue-katex's People

Contributors

Stargazers

Watchers

vue-katex's Issues

Checking for rendering completion

Is there any way to check if rendering is complete so I can hide / show components when necessary? If not are there any workarounds that you can think of?

v-katex auto render, not rerendering

Hello Community,

I am trying to use v-katex:auto to auto render a value from an input. I bind the value to output to my input but it's not working. Does anyone have an idea?

Need for more examples

It seems that some important feature of katex does not be included in vue-katex such as \tag and \begin{matrix}. If it is not true, maybe more examples can be included to help using it. Thanks.

TypeError: undefined is not an Object (evaluation 'r2.prototype.$katexOptions = a2')

Error trying to install VueKatex plugin due to possible changes in Vue3. I am facing this error only when I try to install the Vue-Katex plugin:

import 'katex/dist/katex.min.css'
import VueKatex from 'vue-katex'

const app = createApp(App)
app.use(VueKatex, {
  globalOptions: {}
})

This is possibly due to the migration to Vue3 according to this [reddit post]:(https://www.reddit.com/r/vuejs/comments/j99qgn/help_vue_js_3_cannot_read_property_prototype_of/)

// Before 
Vue.prototype.$http = () => {}

// After 
const app = Vue.createApp({})
app.config.globalProperties.$http = () => {}

Ps. This is my first issue so please guide me on how to author these for future reference. Apologies if I break any unspoken rules 🙏🏽

options are ignored when using v-katex:auto={ options }

Heys guys,

maybe someone can help me out here. I want to use $-signs as delimiters and i tried this code-snippet:

v-katex:auto="{delimiters: [{ left: '$', right: '$', display: false }],}"

For some reason the delimiters are are still standard. Any ideas?

Katex not render on Chrome Browser

I can't see katex in chrome browser (firefox is ok)
This is in firefox browser

Please help me !!!!
@lucpotage
@shadskii

Cannot Render Using Nuxt

When using Nuxt, it seems nothing actually appears on the page.

Here's a brief example on what I'm doing inside a component below. None of the following ways produce any rendered text. Is this an issue relating to Nuxt?

<template>
    <div class="page-wrapper">
      <div v-katex:auto> \(\frac{a_i}{1+x}\) </div>
      <katex-element expression="'\\frac{a_i}{1+x}'"/>
      <KatexElement> \(\frac{a_i}{1+x}\) </KatexElement>
    </div>
</template>

<script>
import VueKatex from 'vue-katex'
import 'katex/dist/katex.min.css'

components: {
        'katex-element': VueKatex
    },

</script>

v-katex 里面如果有标签怎么办？

v-katex 我试了一下，文本是可以的，但是如果里面有标签是不支持的，这个怎么解决？

How can i use mhchem at the same titme?

I imported the mhchem.min.js with script tag;
but it did'nt work;

Release new version to npm

The latest version of this package has not been release to npm. The current version on npm is trailing by two minor versions (0.2.0 on npm vs 0.2.2 on github).

@lucpotage I believe that this project is important and I would like to continue to contribute to it. I can provide a lot more help to you if I am able to take a more hands on role in this project. I would like to discuss with you what this would entail. Please email me at [email protected].

I look forward to working with you. 😄

Jake

Uncaught ReferenceError: require is not defined

when building a vite app that uses vue-katex, the build breaks due to const merge = require('deepmerge')
i've been able to fix this manually by copying the katex-directive.js code in my plugin.js file, and changing the line above to import merge from 'deepmerge'

Katex adaptif for vue 3?

Does it works?

how to use katex in vueJS ,is there some demo,like the angular-katex

Hi ,how to use katex in vueJS ,is there some demo,like the angular-katex, which allow lable

<!-- Tag element -->
<katex>x^2</katex>

<!-- Attribute -->
<div katex>x^2</div>

<!-- Attribute value -->
<div katex="x^2"></div>

<!-- expr attribute value -->
<katex expr="x^2"></katex>

<!-- Bind to scope
  $scope.tex = {pow: 'x^2'}
  -->
<katex bind="tex.pow"></katex>

<!-- Set display mode -->
<katex expr="x^2" display-mode></katex>

The README.md of this repo should include a link to the CSS

In the readme of this project, neither the installation or usage instructions mention that you need to include the CSS file found here https://github.com/Khan/KaTeX#usage in order for the SVGs to render correctly.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.9.0-alpha2/katex.min.css" integrity="sha384-exe4Ak6B0EoJI0ogGxjJ8rn+RN3ftPnEQrGwX59KTCl5ybGzvHGKjhPKk/KC3abb" crossorigin="anonymous">

It would be good for first time users if it mentioned it or included adding the CSS as a step. Thanks!

How to render katext in textarea, input???

Hi @lucpotage and @shadskii
I have a problem ! I want to render katex in textarea but i can't do it.
This is my textarea

<textarea class="w-100" v-katex:auto="options"> {{ form.selectedKatex }}</textarea>

This is my options

        data() {
            return {
                options: [
                    {left: "$$", right: "$$", display: true},
                    {left: "$", right: "$", display: true},
                    {left: "\\(", right: "\\)", display: true},
                    {left: "\\[", right: "\\]", display: true}
                ]
            }
        },

Please help me !!!

Can't inject in Laravel Nova field

Hi! I tried to make Laravel Nova field from vue-katex, but don't works(

https://nova.laravel.com/docs/3.0/customization/fields.html

Field file:

<template>
    <panel-item :field="field">
        <template slot="value">
        <div v-katex="'\\frac{a_i}{1+x}'"></div>
        <div v-katex:display="'\\frac{a_i}{1+x}'"></div>
        <div v-katex="{ expression: '\\frac{a_i}{1+x}', options: { throwOnError: false }}"></div>
        <div v-katex:auto>
            \(\frac{a_i}{1+x}\)
        </div>
        <div v-katex:auto="{ options }">
            \(\frac{a_i}{1+x}\)
        </div>
        <katex-element expression="'\\frac{a_i}{1+x}'"/>
        </template>
    </panel-item>
</template>

<script>
    import Vue from 'vue';
    import VueKatex from 'vue-katex';
    Vue.use(VueKatex);

export default {

    components: {
        VueKatex
    },

    props: ['resource', 'resourceName', 'resourceId', 'field'],
}
</script>


<style>
    @import "../../../node_modules/katex/dist/katex.min.css";
</style>

But nothing rendered:

No errors in browser console

How to handle katex errors.

How can I handle errors which are throwing to console by katex itself? I want to show this error messages in my vue component directly to users.
Example:

To render latex I am using:
<div v-katex:auto="{options}" :key="item.text">.... </div>

how to use this by CDN way

Support Auto-Render

Hi,
is there any plan to support the auto-render extension?
I'm looking for a way to render all the math in some text without having to specify directives or KatexElement components for each expression since the text is retrieved dynamically and these wouldn't work...

Problems while using mhchem

Hello Community,

I am using vue-cli as my develop tool. I was trying to use mhchem extension to enter the chemical formulas for my webapp, like the README said: "This extension isn't part of core KaTeX, so the script should be separately included. Place it after the line that calls katex.js." I was trying to include it in index.html but failed ( I think the problem is because index.html is alive before the components in vue). I am willing to know how/where to include this extension in my webapp? Thanks for replying

Content containing HTML

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

Core-js not found error

ERROR in ./node_modules/vue-katex/dist/vue-katex.es.min.js
Module not found: Error: Can't resolve 'core-js/modules/es6.object.assign'

ERROR in ./node_modules/vue-katex/dist/vue-katex.es.min.js
Module not found: Error: Can't resolve 'core-js/modules/es6.number.constructor'

ERROR in ./node_modules/vue-katex/dist/vue-katex.es.min.js
Module not found: Error: Can't resolve 'core-js/modules/es6.function.name'

I just tried to install this in a new vue project to test it out and am getting the above error.

how to force re-rendering when content changes?

Hi! Great project, enjoy using it so far :)
I have a span-element with the v-katex:auto attribute, to which I pass user input. How can I call the renderMathInElement function from my component?

Release version 0.2.2 to npm

Master is currently at 0.2.2 but the latest version on npm is 0.2.1. One of the projects I work on is currently using 0.2.1 but is experiencing a bug with it. I fixed that bug in my last PR and bumped the version to 0.2.2.

Thanks,

Jake

Not rendering on build

Hello, when I build, the KaTeX does not render properly. It looks like it is halfway through its processing or something because it duplicates the expression but with only the numbers/letters:

It works absolutely fine running dev:

I would love your help with this.
Thanks,
Joshid

p.s. i have pasted the two versions of the generated html below

Dev:
<div data-v-73e562e7="" class="_question"><math xmlns="http://www.w3.org/1998/Math/MathML"><semantics><mrow><mfrac><mrow><msup><mi>l</mi><mn>2</mn></msup><msup><mi>a</mi><mn>3</mn></msup></mrow><mrow><msup><mi>l</mi><mn>5</mn></msup><mi>a</mi></mrow></mfrac><mo>=</mo></mrow><annotation encoding="application/x-tex">\frac{l^{2}a^{3}}{l^{5}a}=</annotation></semantics></math>l5al2a3=</div>

Build:
<div data-v-73e562e7="" class="_question"><math xmlns="http://www.w3.org/1998/Math/MathML"><semantics><mrow><mfrac><mrow><msup><mi>l</mi><mn>2</mn></msup><msup><mi>a</mi><mn>3</mn></msup></mrow><mrow><msup><mi>l</mi><mn>5</mn></msup><mi>a</mi></mrow></mfrac><mo>=</mo></mrow><annotation encoding="application/x-tex">\frac{l^{2}a^{3}}{l^{5}a}=</annotation></semantics></math>l5al2a3=</div>

lucpotage / vue-katex Goto Github PK

vue-katex's People

Contributors

Stargazers

Watchers

Forkers

vue-katex's Issues

Example

Recommend Projects

Recommend Topics

Recommend Org