How to render katext in textarea, input???

[sontt-1215]

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 !!!

[shadskii]

Instead of trying to render the katex inside the textarea, I recommend binding the input of the textarea to another element and rendering the katex there. Try something like this

    <div v-katex:auto="options" :key="input">{{ input }}</div>
    <textarea v-model="input"> </textarea>

The key is there to force katex to rerender after every text update.

One other thing that might be the cause of your issue is that your options are not set up correctly. The options you're adding should be placed under the delimeters key. Try replacing with:

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

I've gone ahead and made a code sandbox using the method I've suggested for you to use as reference.

Hope this helps,

Jake

[sontt-1215]

@shadskii Thanks for reply !!! But i am using this way, but my client wants to show up in textarea, it's complicated :( I will look for another way.