meteorlxy / vue-showdown

:page_with_curl: Use showdown as a vue component
https://vue-showdown.js.org
MIT License
129 stars 23 forks source link

[Bug report] vue-showdown destroys subscripts in formulas #44

Closed ingodahn closed 2 years ago

ingodahn commented 2 years ago

Description

Context: I have a component with VueShowdown as a subcomponent. For typesetting formulas I use KaTeX; in particular, this parent component calls KaTeXs renderMathInElement on each mount.

That works fine - unless the formula contains an underscore for a subscript.

Example: The markdown $x_0$ is not $x_1$ is rendered as $x0isnotx1$, all in italics_

Addendum: I observed that subscripts are correctly displayed when escaped. which is not the case in the markdown I edit in the Jupyter Notebook editor in the CoCalc system. Superscripts render correctly without escaping. Is there a flavor that cares for this?

Addendum 2: With github flavor, formulas render correctly but linebreaks in markdown are rendered as <br/>. Which option avoids this?

Reproduction

https://stackblitz.com/edit/vue-showdown-ojdvzf?file=src/App.vue

Used Package Manager

npm

System Info

Meteor with Vue2 running on Win11 for development and Ubuntu20 for production.

  System:
    OS: Windows 10 10.0.22000
    CPU: (16) x64 11th Gen Intel(R) Core(TM) i9-11900H @ 2.50GHz
    Memory: 17.60 GB / 31.77 GB
  Binaries:
    Node: 16.14.0 - C:\Program Files\nodejs\node.EXE
    npm: 8.3.1 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Spartan (44.22000.120.0), Chromium (103.0.1264.71)
    Internet Explorer: 11.0.22000.120
  npmPackages:
    vue: ^2.6.14 => 2.6.14
    vue-showdown: ^2.4.1 => 2.4.1
ingodahn commented 2 years ago

Is there anybody reading these? I got another problem. The flavor that works best for me is github, but:

It seems I would have to modify the github flavor, but I don't understand how this can be done.

meteorlxy commented 2 years ago

It seems I would have to modify the github flavor, but I don't understand how this can be done.

The flavor is simply a presets of showdown options.


vue-showdown is simply a vue component wrapper for showdown.

Your problem / question seems to be a showdown issue, which is out of the scope of vue-showdown. I think you should go to the repo of showdown to get more helps.

ingodahn commented 2 years ago

Can you please send me the option settings of the github flavor so that I don't have to start from scratch? Best Ingo Dahn