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

对不起，我是vue初学者。
我把vue-showdown加入到vue中后，成功解析了md内容，但样式很丑~~以为是样式污染，我建了一个干净的项目，什么样式都没有，只引用了vue-showdown，模仿 https://vue-showdown.js.org/playground/ 的功能，是最简单的代码。但解析出来的效果仍然不如官方 https://vue-showdown.js.org/playground/ 出来的效果好，请问，我是少了什么吗？比如样式？

非常感谢

Vue file:

<template>
  <div id="app">
    <VueShowdown :markdown="fileContent"></VueShowdown>
  </div>
</template>

<script>
import mdFile from "!!raw-loader!../assets/welcome.md";

export default {
  data() {
    return {
      fileContent: ""
    };
  },
  mounted() {
    this.getMDFile();
  },
  methods: {
    getMDFile() {
      this.fileContent = mdFile;
    }
  }
};
</script>

welcome.md file:

![image.png](/.attachments/image-3bc078e5-c2fb-48d8-bc00-fff6dc34fb25.png)

I download the md file from the azure devops wiki. I need to use this in my project, but articles etc. But the picture is not displayed. What is the reason?

npm install vue-showdown:
I made the necessary installation with.

main.js:

import VueShowdown from "vue-showdown";
import Mark from "./components/Mark.vue";
Vue.use(VueShowdown, {
  flavor: 'github',
  options: {
    emoji: true
  },
})
const router = new VueRouter({
  routes: [
 { path: '/mark', component: Mark}
  ]
})

Clear and concise description of the problem

There is no type declaration associated with the project, creating a Typescript error after:

import { VueShowdown } from "vue-showdown";

Suggested solution

When a user types npm install --save-dev @types/vue-showdown it should install types with it.

Alternative

No response

Additional context

No response

Description

https://vue-showdown.js.org/ 缺少默认语言处理 404

Reproduction

none

Used Package Manager

npm

System Info

none

Description

When i use vue-template in v3 chrome extension, EvalError: Refused to evaluate a string as JavaScript because 'unsafe-eval' is not an allowed source of script in the following Content Security Policy directive: "script-src 'self'".
Because v3 is denied eval completely.
I find maybe is use h function cause it：
h({
components: props.vueTemplateComponents,
setup: () => props.vueTemplateData,
template: <${props.tag}>${outputHtml.value}</${props.tag}>,
})
Is there any way to solve this problem?

Reproduction

no

Used Package Manager

pnpm

System Info

System:
    OS: Windows 11 10.0.22621
    CPU: (20) x64 12th Gen Intel(R) Core(TM) i7-12700
    Memory: 9.19 GB / 31.78 GB
Binaries:
    Node: 19.8.1 - D:\nvm\nodejs\node.EXE
    npm: 9.5.1 - D:\nvm\nodejs\npm.CMD
    pnpm: 8.6.11 - ~\AppData\Local\pnpm\pnpm.CMD
Browsers:
    Edge: Spartan (44.22621.1992.0), Chromium (121.0.2277.83)
    Internet Explorer: 11.0.22621.1
npmPackages:
    vue: ^3.3.11 => 3.3.11
    vue-showdown: ^4.2.0 => 4.2.0

Bug report

When I set the option for tables as true, there are some cases where if appears the character ` tables get misaligned.
Below I share some screenshots to make the issue understandable.

Description

The tables normally work nice! But if in the table appears the character ` as a value, the tables get misaligned.

Steps to reproduce

• You can use the README of this repo to reproduce it https://github.com/cycloid-community-catalog/infra-amazon-elk/tree/master

• The Terraform table has the values subnet_ids and vpc_id that have the values `` as default. So when you use vue-showdown to parse this README the problem appears

• Reproduction link / repo:

The repo is private, but I can share with you this piece of code that we use to parse the markdown :)

   <vue-showdown
              v-if="!_.isEmpty(readme)"
              flavor="github"
              :options="{ tables: true }"
              class="markdown__file"
              :markdown="$sanitizeHtml(readme)"/>

Expected behavior

The ideal behavior would be that the tables don't get misaligned

Screenshots

Screenshot from GitHub README

Screenshot when markdown is parsed

Environment info

• vue-showdown version: 2.4.1
• showdown version: -
• vue version: 2.6.14
• Browser: Chrome

Trying to install this on a Vue 3 app, but noticed that the latest version is not published on NPM? Is there any reason for this?
https://www.npmjs.com/package/vue-showdown

Description

Argument of type '{ markdown: string; }' is not assignable to parameter of type 'App & { install: (app: App, ...options: any[]) => any; } & Record<string, unknown>'.
Type '{ markdown: string; }' is missing the following properties from type 'App': version, config, use, mixin, and 11 more.

which text = ref("")

Reproduction

tsc noEmit & implicitAny

Used Package Manager

npm

System Info

System:
    OS: macOS 12.6
    CPU: (8) arm64 Apple M1
    Memory: 95.61 MB / 8.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 16.17.0 - ~/.nvm/versions/node/v16.17.0/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 8.15.0 - ~/.nvm/versions/node/v16.17.0/bin/npm
  Browsers:
    Chrome: 112.0.5615.137
    Safari: 15.6.1
  npmPackages:
    vue: ^3.0.0 => 3.2.47 
    vue-showdown: ^4.0.0 => 4.0.0

I'm having trouble making the options work. I've also tried loading showdown as a plugin (rather than component) with the same result. For example, the code below doesn't render the emoji as I would expect.

I'm using
"vue": "2.6.12",
"vue-showdown": "2.4.1",

<template>
  <div>
    <VueShowdown
      markdown="**Testing 123**  :smile"
      :options="{ emoji: true }"
    />
  </div>
</template>
<script>
import { VueShowdown } from 'vue-showdown'
export default {
  components: {
    VueShowdown,
  }
</script>

renders as:
Testing 123 :smile

Hello,

I attempted to add Vue Showdown into a Vue 3 app following the steps shown here. Unfortunately, the component does need seem to render. Is Vue Showdown compatible with Vue 3? Is the a JSFiddle or otherwise that proves this out?

Thank you.

Remember to upgrade vuepress after these issues are fixed:

• vuejs/vuepress#1107
• vuejs/vuepress#1113

找到一个方案：https://www.npmjs.com/package/showdown-highlight
按照 https://vue-showdown.js.org/zh/guide/#extensions-2 这里的方案试了一下，发现不行

请问有计划支持highlight.js吗

index.js

import Vue from 'vue';
import App from './App.vue';

Vue.config.productionTip = false;
import VueShowdown from 'vue-showdown'

// the second parameter of Vue.use() is optional
Vue.use(VueShowdown, {
  // set default flavor of showdown
  flavor: 'github',
  // set default options of showdown (will override the flavor options)
  options: {
    emoji: false,
  },
})

new Vue({
  render: h => h(App),
}).$mount('#app');

Vue template code :

<template>
  <div>
    <vue-showdown :markdown="fileContent"></vue-showdown> 
  </div>
</template>
<script>
import fileMd from 'raw-loader!../README.md'
export default {
  name: 'app',
  data() {
    return {
      fileContent: '## __Hello__',
    }
  },
  mounted() {
    this.fileContent = fileMd
  },
}
</script>

Markdown script :

Result of my test page:

Result demo page :

See commit e459de8 :

After adding alias for vue-showdown, vuepress dev works well, but vuepress build failed with:

Error: Cannot find module 'vue-showdown'

Build details: https://travis-ci.org/meteorlxy/vue-showdown/builds/470968700#L473-L491

Cannot rebuild a minimal repro repo, and cannot locate the error by now. So have to revert it in c4fe4f6

Clear and concise description of the problem

When we use vueTemplate, if an incorrect syntaxe is provide to the compiler, the render disappear from the page and an error is throw in the console.

You can easily reproduce it here: https://vue-showdown.js.org/playground/. Just active vueTemplate and add <mycustomelement> into the input to throw the error.

Noticed that, the error is throwing only when the project is run in production mode. In dev mode, the render don't crash and warnings are display into the console.

Suggested solution

Add a try catch to the render function. If vueTemplate can't render the let showdown render it without vueTemplate option.

// vue-showdown.ts
return () => {
  try {
    return props.vueTemplate
      ? h({
          setup: () => props.vueTemplateData,
          template: `<${props.tag}>${outputHtml.value}</${props.tag}>`,
          components: props.vueTemplateComponents,
        })
      : h(props.tag, {
          innerHTML: outputHtml.value,
        });
  } catch (renderError) {
    // Handle the exception and return only showdown render without vueTemplate
    return h(props.tag, {
      innerHTML: outputHtml.value,
    });
  }
}

Alternative

No response

Additional context

No response

thanks for your great work.
I'm going to use extension showdown-katex，and want put some options to this extension，after read your document and showdown-katex document but still did not find a way to do it. could you tell some suggestion?

I want to use showdown-highlight, an extension showdown for syntax highlighting. VueShowdown installed as vue plugin. There is no issue but the extension is not working. I was checking all dependency related extension and there is no issue. Here is my code snippet:

  //main.js
  import ShowdownHighlight from 'showdown-highlight/lib'

  Vue.use(VueShowdown, {
  // set default flavor of showdown
  flavor: 'github',
  // set default options of showdown (will override the flavor options)
  options: {
    emoji: true,
  },
  extensions: [ShowdownHighlight]
})

and

  //Component.vue
  <VueShowdown :markdown="fileContent"/>

based on the following documentation, extension installed as object or array.

I've tried the following:

plugins/showdown.js

import Vue from 'vue'
import { VueShowdownPlugin } from 'vue-showdown'

Vue.component('vue-showdown', VueShowdownPlugin)

I've also tried:

Vue.use(VueShowdownPlugin, {
  options: {
    emoji: true,
  },
})

which results in a Cannot read property 'install' of undefined error.

nuxt.config.js

plugins: [
  { src: '~/plugins/showdown.js', mode: 'client' },
],

component

<VueShowdown markdown="`vue-showdown` is easy to use :kissing_heart:" />

And I get this error:

I base on meteor + vue .
I try to import .md file to render vue template

<template>
  <div>
       <VueShowdown :markdown="fileContent"></VueShowdown>
  </div>
</template>
<script>
import Vue from 'vue'
import VueShowdown from 'vue-showdown'

// the second parameter of Vue.use() is optional
Vue.use(VueShowdown, {
  // set default flavor of showdown
  flavor: 'github',
  // set default options of showdown (will override the flavor options)
  options: {
    emoji: true,
  },
})
import mdFile from './README.md'
export default {
  name: 'VueMarkdown',
  data() {
    return {
      fileContent: '',
    }
  },
  mounted() {
    this.getMDFile()
  },
  methods: {
    getMDFile() {
      this.fileContent = mdFile
    },
  },
}
</script>

But it got error :

 [Vue warn]: Failed to resolve async component: function () {
    return module.dynamicImport('./Vue-Markdown.vue');
  }
Reason: Error: Cannot find module './README.md'

Does it work with above topics?

Description

I just wanted to report a security issue with latest Vue2 version "vue-showdown 2.4.1". Perhaps it is sufficient to update ansi-regex dependent package to 5.0.1 to close this issue.

Reproduction

empty

Used Package Manager

npm

System Info

I just wanted to report a security issue with latest Vue2 version "vue-showdown 2.4.1". Perhaps it is sufficient to update ansi-regex dependent package to 5.0.1 to close this issue.

Hi, quick question: I'm working on an app where content can be "dynamically loaded" and I wanted to allow users to use regular markup, alongside with other vue components. For example:

# some heading  
`something else`
<some-component />
blah blah blah

I don't really mind the syntax, but I just want to use vue-components between text in markup.

is it possible in vue-showdown? Or perhaps you have some hints how could I achieve something similar? Thanks!

Clear and concise description of the problem

Hi !
I just discover your plugin for Showdown with vue 3 and it's absolutely amazing !!

I propose here a little improvment to add possibility to use custom component with vueTemplate options.
Add an options vueTemplateComponents where we can pass custom to h render function like that.

Suggested solution

I see that in this issue you had a render function h.

So I propose something like this:

// user component
<template>
    <VueShowdown :markdown="myMarkedown" :vue-template="true" :vue-template-components="{ myCustomComponent }" />
</template>

<script setup>
import myCustomComponent from '@/components/myCustomComponent'
</script>

In your plugin code

// Plugin code
render (h) {
  return h({
    template: `<${this.tag}>${this.outputHtml}</${this.tag}>`,
    components: vueTemplateComponents // add custom component pass throw vue-template-components props
  })
},

Alternative

No response

Additional context

No response