I rewrite the example:

<template>
  <div class="container">
    <textarea class="md-text" rows="10" v-model="content"/>
    <markdown-it-vue 
      class="md-body" 
      :content="content" 
      :options="options" 
      @render-complete=hdlCmplete 
    />
  </div>
</template>

<script>
import MarkdownText from './example'
import MarkdownItVue from '../../src'
import axios from 'axios'

export default {
  components: {
    MarkdownItVue
  },
  data () {
    return {
      content: MarkdownText,
      options: {
        markdownIt: {
          linkify: true
        },
        linkAttributes: {
          attrs: {
            target: '_self',
            rel: 'noopener'
          }
        }
      }
    }
  },
  methods: {
    hdlCmplete() {
      console.log('reder complete')
    }
  },
  mounted() {
    const url='/api/repos/delve/raw/master/README.md'
    axios.get(url)
    .then(res=>{
      this.content=res.data;
    })
    .catch(err=>console.error(err));
  },
}
</script>

And I get this in browser console:

vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in nextTick: "TypeError: Cannot read property 'length' of undefined"

found in

---> <MarkdownItVue> at src/markdown-it-vue.vue
       <Example> at example/components/example.vue
         <App> at example/App.vue
           <Root>

Just setted up a ref with component
made .use(html5media) plugin for video/audio support in mounted() {}
but nothig works, where i need to declare use?

Uncaught TypeError: Cannot read property 'apply' of undefined
    at b.use (markdown-it-vue-light.umd.min.js?eb52:1)
    at VueComponent.use (markdown-it-vue-light.umd.min.js?eb52:6)
    at <anonymous>:1:70

Thanks for this awesome project! I wonder if you can provide some typescript declaration file like @types/markdown-it-vue and @types/markdown-it-vue-light. Thanks!

The bundle size of markdown-it-vue is enormous at 5MB. In our web app markdown-it-vue makes up more than 60% of it's total size. And that's with a couple of already heavy libraries.

请问这个 包怎么在纯JS环境中使用呢？比如页面内直接引入 vue.js和这个包的某个js文件，然后页面内直接用。

How i known render fully completed?

用vue-cli3初始化工程，然后按照文档 yarn add markdown-it-vue 引入依赖
但是在如下代码当中没有任何效果，markdown-it-vue编辑器完全没有渲染出来，页面是空白的

<template>
  <div>
    <markdown-it-vue :content="content" :options="options"/>
  </div>
</template>

<script>
  import MarkdownItVue from 'markdown-it-vue';
  import 'markdown-it-vue/dist/markdown-it-vue.css';
export default {
  components: {
    MarkdownItVue
  },
  name: 'HelloWorld',
  props: {
    msg: String
  },
  data:function () {
    return {
      options: {
        markdownIt: {
          linkify: true
        },
        linkAttributes: {
          attrs: {
            target: '_blank',
            rel: 'noopener'
          }
        }
      },
      content:"hello?"
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>

package.json:

{
  "name": "md-test",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "core-js": "^3.4.3",
    "markdown-it": "^10.0.0",
    "markdown-it-vue": "^1.0.11",
    "vue": "^2.6.10"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^4.1.0",
    "@vue/cli-plugin-eslint": "^4.1.0",
    "@vue/cli-service": "^4.1.0",
    "babel-eslint": "^10.0.3",
    "eslint": "^5.16.0",
    "eslint-plugin-vue": "^5.0.0",
    "vue-template-compiler": "^2.6.10"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "rules": {},
    "parserOptions": {
      "parser": "babel-eslint"
    }
  },
  "browserslist": [
    "> 1%",
    "last 2 versions"
  ]
}

Hi, at first thanks for this repo.

There is a typo at line 92 in markdown-it-vue.vue:

.use(MarkdownItContainer, 'warining')

And after quickly test markdown-it-vue, i was unable to use custom container:

::: warining
*here be dragons*
:::

Or with warning, info, success, ...

现在获取到的是Markdown文本,请问怎么才问获取到HTML格式的或者是纯文本格式的呢?请求指教下

If you are having trouble with a "window is undefined"–type of error while trying to use it with a universal (SSR, Server-side rendered) app, you might want to follow this guide: https://medium.com/@codebeast_/why-your-third-party-plugin-dont-work-in-nuxt-and-how-to-fix-it-d1a8caadf422

It worked like a charm for me

Hi, is there anyone notice that the console print a lots of message while using this ? how can i fix that thanks!

如题

Hi, thanks for the awesome project.

Here is a question: how to render HTML?

I tried the following options

const options = {
	icons: 'font-awesome',
	html: true,
	linkify: true
};

But it is rendering the html tags as plain text.

(I'm aware that rendering HTML may lead do XSS attacks, however I'm using it only for rendering my personal study notes on the browser)

<tempalete>
 <markdown-it-vue class="md-body" :content="markDownValue"/>
</template>
  import MarkdownItVue from 'markdown-it-vue'
 components: {
      MarkdownItVue
    },

绘制流程图 Flowchart

st=>start: 用户登陆
op=>operation: 登陆操作
cond=>condition: 登陆成功 Yes or No?
e=>end: 进入后台

st->op->cond
cond(yes)->e
cond(no)->op

绘制序列图 Sequence Diagram

Andrew->China: Says Hello 
Note right of China: China thinks\nabout it 
China-->Andrew: How are you? 
Andrew->>China: I am good thanks!

Am I missing something ?

The inclusion of markdown-it-icons adds roughly 1 to 2MB to the bundle size of my website (as it includes the whole emojione lib with it).

If I remove it, the compressed chunks size goes from 4.5 to 3mb!

Perhaps make it optional (with the import optional too)?

请问，地址栏中的anchor，在本页面点击的时候可以更新。但是拿着这串带有anchor的url，在地址栏输入之后，是到页面顶部，而不是跳转到anchor，这个怎么解决呢

作者您好，经过读了一下源码，发现其中v-model只能支持单向绑定，从editor中拉取数据到vue实例还需要在代码里添加一行（不修改其他地方的话）：

      var that = this;
      this.editor.eventManager.listen("contentChangedFromMarkdown",function () {
        // eslint-disable-next-line no-console
          that.$emit("input",that.getValue());
      });

有没有办法像Mou编辑器，调整插入的图片大小？
![Mou icon](http://25.io/mou/Mou_128.png =200x300)

Hi!

Looks great. Is there any plans to make this Vue 3 + Vite compatible?

How to show toc html not in content container but a special element?

Thank you.

Hi

I noticed that updating markdown-it-vue from 1.1.5 to 1.1.6 + using typescript. we get the following error:

  Overload 3 of 3, '(options: ComponentOptionsWithProps<{ content: { type: (StringConstructor | NumberConstructor)[]; default: string; }; options: { type: ObjectConstructor; default: () => {}; }; }, ... 4 more ..., { ...; } & {}>): VueProxy<...>', gave the following error.
    Type 'typeof MarkdownItVue' is not assignable to type 'VueConstructor<Vue> | FunctionalComponentOptions<any, PropsDefinition<any>> | ComponentOptions<never, any, any, any, any, Record<...>> | AsyncComponentPromise<...> | AsyncComponentFactory<...>'.
      Type 'typeof MarkdownItVue' is not assignable to type 'VueConstructor<Vue>'.

I think this has something todo with:

986edce

Can you add an example or fix the way to access the markdown-it instance?
The docs describe a way that the code doesn't seem to support.

What is the suggested way to over-ride the CSS? My current issue is I am wanting white text on black background, but I am not sure how to provide my own css, to override the default values.

This component is adding second scroll bar:

Can I remove it and use main browser scroll?

Hello, markdown-it-katex plugin has xss - https://www.npmjs.com/advisories/1466
As this plugin isn't maintained for a few years from now, could you please change it for another plugin? I doubt that the author will fix this high severity issue :(

the same bug list

#18
#23
#10
#6

reduce

vue-cli-plugin-webpack-bundle-analyzer

1. remove the markdown-it-icons

the plugin bundle is large. use markdown-it-font-awsome instead.

2. reduce the hilight.js lang

the support lang:

• HTML
• Json
• css
• shell
• bash
• C
• Java
• Python
• C++
• C#
• PHP
• SQL
• R
• Swift
• Go
• MATLAB
• Ruby
• Perl
• Objective-C
• Rust
• Dart
• Delphi
• D
• Kotlin
• Scala
• SAS
• Lisp
• Lua
• Ada
• Fortran
• PowerShell
• VBScript
• VBscript-html
• Groovy
• Julia
• Julia-repl
• LabVIEW
• Haskell
• ActionScript
• Scheme
• TypeScript
• F#
• Prolog
• Erlang

PR for you lang.

3. use echarts.simple only

the result

markdown-it-vue-light

the light model will remove the mermaid chart supports.

您好，我的个人项目里使用了这个仓库，非常感谢你们的工作，我遇到一个问题是通常github项目的badge语法渲染

一般来说badge是一个图片，使用的方式是能渲染的，但在gh中一般希望点击后能打开另一个链接，比如链接到npm，通常写作这样!()[图片地址] 这种嵌套在本项目中会报错。

另外请问一下是否有方法全局性地放大字体，默认版本略小。

谢谢

例如有时候需要用代码块表示程序的输出：

```
    1
2       3
```

实际显示为：

1
2       3

渲染结果为：

<pre><code class="hljs">1
2      3</code></pre>

之前在 markdown-it 提过此 issue，最后发现 markdown-it 不存在此问题，也许版本需要更新？

能否考虑将组件内置的markdown-it插件制作成单独依赖

在文本中使用img标签而不是来插入图片时（因为要调整图片参数，markdown的做不到），然而img标签被整体当做字符串输出了，问一下有解决方法吗？

我需要让 href 都加上 target="_blank" 属性，类似这个:

var md = require('markdown-it')({
  linkify: true
})
 
md.use(mila, {
  target: '_blank',
  rel: 'noopener'
})

不过你好像没暴露对应的 vue 接口？

options中设定highlight函数后，没有任何效果

在1.0.9版本中设置了options无效，
在代码114行赋值出现了问题,

const linkAttributes = this.options.linkAttributes = DEFAULT_OPTIONS_LINK_ATTRIBUTES

I'm trying to override the mermaid configuration, and there does not appear to be a way to "pass through" specific configuration parameters to the mermaid plugin.
Rather than having a single mermaidTheme option, it would be nice to have a full mermaidOptions object, which could still override the default theme and Gantt information, but would allow additional options to be passed to Mermaid.
I'm happy to help with a PR for this, if needed.

I implemented this markdown editor in my site and received the below error:

[Vue warn]: Error in render: "TypeError: _components.default is not a function"

I get this error when I wrap code in triple back-ticks before I state a valid code type (e.g. javascript) so writing ```test``` for example returns a console error 4 times (as test is 4 characters in length.)

I resolved this issue by commenting out the line (0, _components.default)([lang]); in function loadPrismLang(lang) (c. line 65.)

Please let me know if I'm doing something wrong or if my fix is unsuitable. I'm not 100% sure what that piece of code is actually doing.

Thanks

fix markdown-it-github-toc:

  md.inline.ruler.after(
    'emphasis',
    'toc',

change

  md.inline.ruler.after(
    'link',
    'toc',

如何配置导航栏

With the highlighting module included, any time there is a fenced block which is not qualified with a language, I would expect highlighting to fall back to being disabled for that block. However, I've started seeing an error like Could not find the language '', did you forget to load/include a language module? which suggest that the matching expression for enabling highlighting on a provided fenced syntax name is matching as an empty string, which triggers the logic for "I have been given a syntax, let me load that language, but I can't find it."

This seems like a new or recent bug. It could be confusion about what class names to match, but the error message doesn't share any of these details to help with diagnosis.

[edit] I suspect the error is in the matching below, but a guard condition on a non-empty string would probably fix it.

   function blockLanguage(block) {
    var match;
    var classes = block.className + ' ';

    classes += block.parentNode ? block.parentNode.className : '';

    // language-* takes precedence over non-prefixed class names.
    match = options.languageDetectRe.exec(classes);
    if (match) {
      var language = getLanguage(match[1]);
      if (!language) {
        console.warn(LANGUAGE_NOT_FOUND.replace("{}", match[1]));
        console.warn("Falling back to no-highlight mode for this block.", block);
      }
      return language ? match[1] : 'no-highlight';
    }

本地启动是正常显示，打包部署后，markdown的dom结构没渲染

hi i have issue when using emoji and add javascript syntax on markdown-it-vue

here is my code

<markdown-it-vue class="md-body" :content="markdownText" :options="options"/>

and this is the script

<script>
import MarkdownItVue from 'markdown-it-vue';
import 'markdown-it-vue/dist/markdown-it-vue.css';
import datane from '../markdown/materi.md';

export default {
  components: {
    MarkdownItVue
  },
  data() {
    return {
      options: {
        markdownIt: {
          linkify: true,
          html: true,
        }
      }
    }
  },
  computed: {
    markdownText() {
      return datane;
    }
  }
}
</script>

but the emoji and syntax not highlighted

Emoji not showing,

should be like this:

Syntax not highlighted

should be like this

is it a bug or am i missing something?

How i can render to an image not html?

SyntaxError: Invalid regular expression: /(""|"[^"]+"|''|'[^']+'|[]|[[^\]]+]|[^\s!"#%&'()*+,.\/;<=>@\[\\\]^`{|}~]+)(""|"[^"]+"|''|'[^']+'|\[\]|\[[^\]]+\]|[^\s!"#%&'()*+,.\/;<=>@\[\\\]^`{|}~]+))*/: Unmatched ')'
at new RegExp ()
at t (vendorsdataset.8bb16842.js:1)
at n (vendorsdataset.8bb16842.js:1)
at vendorsdataset.8bb16842.js:1
at Array.forEach ()
at n (vendorsdataset.8bb16842.js:1)
at vendorsdataset.8bb16842.js:1
at Array.forEach ()
at n (vendorsdataset.8bb16842.js:1)
at B (vendors~dataset.8bb16842.js:1)