miaolz123 / vue-markdown Goto Github PK

Hi!
Trying to use the preprender prop to filter the contents but I get the error below. Any idea?

{ TypeError: this.prerender is not a function at Proxy.render (/vuenuxt/node_modules/vue-markdown/dist/vue-markdown.common.js:321:52) at VueComponent.Vue._render (/vuenuxt/node_modules/vue/dist/vue.runtime.common.js:4472:22) at renderComponentInner (/vuenuxt/node_modules/vue-server-renderer/build.js:7356:25) at renderComponent (/vuenuxt/node_modules/vue-server-renderer/build.js:7326:5) at RenderContext.renderNode (/vuenuxt/node_modules/vue-server-renderer/build.js:7242:5) at RenderContext.next (/vuenuxt/node_modules/vue-server-renderer/build.js:2382:14) at cachedWrite (/vuenuxt/node_modules/vue-server-renderer/build.js:2242:9) at renderStringNode (/vuenuxt/node_modules/vue-server-renderer/build.js:7422:5) at RenderContext.renderNode (/vuenuxt/node_modules/vue-server-renderer/build.js:7240:5) at RenderContext.next (/vuenuxt/node_modules/vue-server-renderer/build.js:2382:14) at cachedWrite (/vuenuxt/node_modules/vue-server-renderer/build.js:2242:9) at renderStringNode (/vuenuxt/node_modules/vue-server-renderer/build.js:7431:5) at RenderContext.renderNode (/vuenuxt/node_modules/vue-server-renderer/build.js:7240:5) at RenderContext.next (/vuenuxt/node_modules/vue-server-renderer/build.js:2382:14) at cachedWrite (/vuenuxt/node_modules/vue-server-renderer/build.js:2242:9) at renderStringNode (/vuenuxt/node_modules/vue-server-renderer/build.js:7431:5) at RenderContext.renderNode (/vuenuxt/node_modules/vue-server-renderer/build.js:7240:5) at RenderContext.next (/vuenuxt/node_modules/vue-server-renderer/build.js:2382:14) at cachedWrite (/vuenuxt/node_modules/vue-server-renderer/build.js:2242:9) at renderStringNode (/vuenuxt/node_modules/vue-server-renderer/build.js:7431:5) at RenderContext.renderNode (/vuenuxt/node_modules/vue-server-renderer/build.js:7240:5) at RenderContext.next (/vuenuxt/node_modules/vue-server-renderer/build.js:2382:14) statusCode: 500, name: 'TypeError' }

The pug
vue-markdown(prerender='replaceTokens()') {{ document.description }}

For example code formatting

Here's my component (a blog post).

<template lang="html">
	<div class="post">
		<h1>{{ post.title }}</h1>
		<div class="body">
			<vue-markdown :source="post.content"></vue-markdown>
		</div>
	</div>
</template>

<script>
	import VueMarkdown from 'vue-markdown';
	import { fetchPost } from './repository';
	import Prism from 'prismjs';
	import 'prismjs/themes/prism-dark.css';

	export default {
	    props: [ 'slug' ],

	    data() {
	        return {
	            post: {},
	        };
	    },

	    created() {
	        this.fetchPost(this.slug);
	    },

	    methods: {
	        fetchPost(slug) {
	            fetchPost(slug).then(this.onFetchComplete).catch(this.onFetchFailed);
	        },

	        onFetchComplete(response) {
	        	console.log(response);
	            this.post = response.data;
	        },

	        onFetchFailed(error) {
	            console.error(error);
	        },
	    },
	};
</script>

The post.content property contains the post's content in markdown format. It gets retrieved via an api call (not documented here, but irrelevant to this discussion).

As a side point, this markup does not work:

<vue-markdown>{{ post.content }}</vue-markdown>

The post content contains code blocks. These get rendered partially only, like this:

<pre>
<code class="language-php">
...
</code>
</pre>

As you can see, the <pre> element lacks the class="language-php" attribute. As a result, the code block does not get style properly by prism.

(I'm sorry for my poor English)
I use webpack to build my project.
When I use the vue-markdown, It compiled with 2 warnings.
Usually it always has warning because of the case sensitive with the plugin's name.
Can you see the problem?

Hello everyone!

I use vue-markdown component and inside it {{ news.text }}. When I navigate from News.vue to ExactNews.vue it's component destroyed and rendered again. When I navigate inside 1 component ExactNews.vue (next and previous news) component not destroyed and vue-markdown save old data (inside Vue tool in browser I see old data in sourceData -> in VueMarkdown component and inside event -> payload (old data) emitted by VueMarkdown)

How can I solve this problem???

Hi,

Thanks for this awesome markdown plugin for vue-js.

Is there a way to disable on import some of the markdown features?
Because right, I don't use neither TOC nor Katex, and those ones depend on:

for TOC: uslug + unorm = 50kb + 36kb = 86kb (gzipped)
for katex: katex = 30kb (gzipped)
So disabling those two features on import, will save 116kb, that is 40% of the size of my app.

Thanks.

I base on Meteor + Vue.

// changelog.md
# Vue markdown
...........
----------
<template>
   <vue-markdown source="./changelog.md"></vue-markdown>
</template>

But don't work, please help me

<vue-markdown>
 <material-input></material-input>
</vue-markdown>

result: undefined

Hello. Thanks for this great module!

I was wondering how I should go about handling academic paper citation. Can you add support for bibtex or pandoc module? Or is there other module that's already installed that I can use?

Thank you!

When i attach a class to the vue-markdown component it is not being styled accordingly.

Example:

<template lang="pug">
    vue-markdown(:source="mydata", class="vue-md")
</template>

<script>
import VueMarkDown from 'vue-markdown'

export default {
    components: {
        VueMarkDown
    }
}
</script>

<style lang="scss" scoped>
.vue-md {
    color: yellow !important;
}
</style>

I'd like to insert the audio/video component with costumed style.
Is there any possible to do that?

As title, I install the package, but as you can see, the javascript code can not be highlighted, I would like to know what I didn't add and what I should do!Thanks!

Hey, I just added vue-markdown to my project.
It's an isomorphic app that needs to be SEO optimized and this component seems to not render on the server.

Is it possible somehow already or does it have to be implemented?

Regards

I was wondering if there was a simple way to modify the rules. E.g.:

• Change it so it is *bold* and _italic_
• Make a #n, where n is a number, could link to some "post" in your app (i.e. swap with an auto link)
• Make a @user can convert to a link (to a user profile)

I have a simple FAQ.vue component. The content is displayed but not formatted as markdown. What am I doing wrong?

I tested the simple index.html example and understand there is a dependency on vue-markdown.js. Can you explain why the vue-markdown.js file is downloaded as a script file in the webpack-simple index.html file and not included as a dependency in the npm package? I did not see instructions in the readme for how to use vue-markdown.js?

I am using the ES6 example to import vue-markdown. I get no compilation errors and no inspector warning in Chrome. I have a large dashboard application with many vue components that is supported by a laravel backend. I plan to load vue-markdown with a large markdown file via AXIOS ajax call.
Thanks for your help,

faq.vue

<template>
<div>
    <vue-markdown>##Testing 1,2,3</vue-markdown>
    <vue-markdown :source="source"></vue-markdown>
</div>
</template>

<script>
import VueMarkdown from 'vue-markdown'

export default {

components:{ 'vue-markdown' : VueMarkdown },

  data () {
    return {
        source:"#BLAH BLAH BLAH"    }
  },
...

result on screen

##Testing 1,2,3
#BLAH BLAH BLAH

使用后没有样式

I have the same issue as #6.

"vue": "^2.4.2",
"vue-markdown": "^2.2.4"

My vue-file:

<template>
  <vue-markdown>
  	I am a ~~tast~~ **test**.
  </vue-markdown>
</template>

<script>
import VueMarkdown from 'vue-markdown'

export default {
  components: { VueMarkdown }
}
</script>

The output is just:

<div><pre><code>I am a ~~tast~~ **test**.
</code></pre>
</div>

I just followed the README.
Am I doing something wrong?

Vue-markdown does not seem to render properly with multi-line markdown unless I append   for example immediately after the opening tag. Basic markdown syntax such as headers and lists do not appear to render.

Is there any way to support latex syntax?
Like $\delta$ will be parsed as geek letter delta

parse formula: x^2. But 2 shows left-bottom of x instead of showing right-top. If I don't add Katex css lib, there will be 2 formulas, first one is correct which contained in HTML math tag, but the second it still wrong.

Is there a way to add an active class to a selected TOC item? (similar to a vue-router way)

I am not really sure how to approach this problem, as i want to implement a scroll spy (not sure if it's called that way)

Thanks. :)

In react-markdown I can custom any element replacement, for example:

export const renderers = Object.assign({}, ReactMarkdown.renderers, {
    Heading: function Heading(props: any) {
        if (!props.children[0])
            return (ReactMarkdown.renderers as any).Heading(props);

        const id = props.children[0]
            .replace(new RegExp(" ", "g"), "-")
            .replace(new RegExp("\\?", "g"), "")
            .toLowerCase();

        switch (props.level) {
            case 1:
                return <h1 id={id}>{props.children[0]}</h1>;
            case 2:
                return <h2 id={id}>{props.children[0]}</h2>;
            case 3:
                return <h3 id={id}>{props.children[0]}</h3>;
            case 4:
                return <h4 id={id}>{props.children[0]}</h4>;
            case 5:
                return <h5 id={id}>{props.children[0]}</h5>;
            case 6:
                return <h6 id={id}>{props.children[0]}</h6>;
        }
    }
});

This particular example for an instance allows me to put ids into headers, just like what github does on its own md files renderer. How do I do same using vue-markdown?

Your live editor http://miaolz123.github.io/vue-markdown/ don't support katex syntax.

What is rong with vue-markdown? Why I can't in main.js file just "use" it's once?

// main.js from vue-cli webpack start source
import Vue from 'vue'
import VueMarkdown from 'vue-markdown'
Vue.use(VueMarkdown)

... and in the one of components use <vue-markdown></vue-markdown>. Insted the warm: [Vue warn]: Unknown custom element: <vue-markdown> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

Everytime in each component where needed markdown I import vue-component again, and declare

// component.vue
import VueMarkdown from 'vue-markdown'

export default {
	name: 'EducationMaterialInstance',
	components: { VueMarkdown },
	...

I tried to work with VueMarkdown as with all the other modules. With VueMarkdown it does not work. Do I not understand something? How correctly installation of Vue Markdown?

在官方的示例里面输入\n就没有用，尽管breaks为true。

Hi there,

Thanks again for making this library. I was able to make this work exactly as advertised through a vue-cli-generated express template, but it took me a few tries as a junior developer, and I'd love to add some more content to the docs to help the 'me who first looked at this library' figure out its use on the first try.

Here's how I got the library to work. First, I had to figure out to put the setup in the .vue. component that ingests the markdown. It was confusing initially as for the most part, I've been declaring the libraries in a main.js file which handles the initial bits (Declaring Vue, vue-resource, vue-router and so forth).

The good news is that the code block you mentioned for the ES6 setup works for me:

  import VueMarkdown from 'vue-markdown'
    components: {
      VueMarkdown
    }

It may be subject to change, but the working code is here.

Anyways, I'd love to tweak the readme a bit further so that if another me comes along, he or she'd get it working on the first try :)

If you have a suggestion on how I could use this if I'm not using this properly, I'd love to give it a shot as well.

Best wishes!

Hi,

I'm having a hard time trying to access the this.$emit('rendered', outHtml)event emitted from the render method.

How do I listen to that event?

I've tried:

  created() {
    this.$on('rendered', () => {
      alert('here');
    });
  },

But no luck. Any ideas?

I'd like to be able to only parse inline tags, like <em>, <strong> and <a>.
Single line rendering, without paragraph wrap, so that:

<h2><vue-markdown>Hello. *Is it me you're looking for?*</vue-markdown></h2>

Does not render as (current situation):
<h2>Hello. <div><p><em>Is it me you're looking for?</em></p></div></h2>

But instead renders like this:
<h2>Hello. <em>Is it me you're looking for?</em></h2>

See: https://markdown-it.github.io/markdown-it/#MarkdownIt.renderInline

你好!
可以考虑支持LaTex公式吗？
比如:
使用MathJax.js(http://docs.mathjax.org/en/latest/start.html)。
使用一个属性来控制是否开启LaTex支持。

When I have something like this
<vue-markdown>{{post.description}}</vue-markdown>
And {{post.description}} changes, VueMarkdown won't hot update, any solutions?

I am rendering an with a directive using vue-markdown.

When my App loads, it seems that my Vue instance is not parsing my rendered tag and thus not calling the appropriate directive.

I'm wondering if there is a prop i need to pass to the vue-markdown instance that will allow the Vue parser to pick up my 'nested' directive.

see example below.

const Foo = Vue.directive('foo', el => console.log('Element with directive', el));

new Vue({
  el: '#app',
  components: { VueMarkdown },
  directives: {
    Foo
  }
})

<template>
<div id="app">
  <vue-markdown :html="true" source="<a href='/foo' v-foo>I have a directive</a>"></vue-markdown>
  // ^output^ <a href="/url" v-foo>I have a directive</a>
  // This <a /> is NOT registered as an element with a directive and NOT logged out.
  

  <a href="/anotherURL" v-foo>I also have a directive</a> 
  // ^This^ IS registered as an alement with a directive and logged out.
</div>
</template>```

Currently, the outHtml is sent as the payload with the rendered event.
I think it would be more helpful if you could also send a reference to the created parent <div> element.

For instance, by doing so, it gets much more easy to use a code highlighter like Prism that get the parent <div> element to parse it.

v2.2.1:
[Vue warn]: Invalid default value for prop "anchorAttributes": Props with type Object/Array must use a factory function to return the default value.

Say to use an alternative datasource instead of the native/unicode ones? Or to integrate with something like https://github.com/jm-david/emoji-mart-vue?

hash模式下怎么使用toc进行锚点定位？
How to use hash mode TOC anchor position?

when html option is on, it does not render markdown contents inside

when html option is off, it does render markdown contents inside, but keep the html tags visible.

this kind of behavior invalidates one big advantage of of using embedding html into markdown

I use your library with electron-vue.
When I run DEV mod - all is well. But after building production version I get an error

Uncaught Error: Cannot find module 'babel-runtime/core-js/get-iterator'
    at Module._resolveFilename (module.js:470:15)
    at Function.Module._resolveFilename (/home/alex/LinWin/Develop/command-editor/dist/linux-unpacked/resources/electron.asar/common/reset-search-paths.js:35:12)
    at Function.Module._load (module.js:418:25)
    at Module.require (module.js:498:17)
    at require (internal/module.js:20:19)
    at webpackUniversalModuleDefinition (/home/alex/LinWin/Develop/command-editor/dist/linux-unpacked/resources/app.asar/node_modules/vue-markdown/dist/vue-markdown.common.js:9:28)
    at /home/alex/LinWin/Develop/command-editor/dist/linux-unpacked/resources/app.asar/node_modules/vue-markdown/dist/vue-markdown.common.js:16:3
    at Object.<anonymous> (/home/alex/LinWin/Develop/command-editor/dist/linux-unpacked/resources/app.asar/node_modules/vue-markdown/dist/vue-markdown.common.js:400:2)
    at Module._compile (module.js:571:32)
    at Object.Module._extensions..js (module.js:580:10)

Import in component:

import VueMarkdown from 'vue-markdown'

export default {
	name: 'about',
	components: { VueMarkdown },
	 // ...
}

<vue-markdown> ### 你好 ### 你好 ### 你好 ### 你好 ### 你好 ### 你好 ### 你好 ### 你好 ### 你好 ### 你好 ### 你好 ### 你好 </vue-markdown>

这样子渲染不出来

Live demo is broken, can't open : http://miaolz123.github.io/vue-markdown/

If you don't mind, I hope you add this component into https://curated.vuejs.org/ and https://vuecomponents.com to let more people know what amazing job you have done!
Thanks.

I want to write text with markdown format in an textArea, and then render it to another vue-markdown div. But the vue-markdown div just show the markdown format text.

this is my code:

<div class="form-group">
            <textarea v-model="qContent" class="form-control" placeholder="从这里开始写正文" id="questionContent" style="height: 300px;"></textarea>
        </div>
        <div class="markdownArea">
            <vue-markdown id="markdownReview"></vue-markdown>
        </div>

Vue.use(VueMarkdown);
var addQaOrNote = new Vue({
    el: '#addQaOrNote',
    data: {
        qTitle: '',
        qContent: '',
        input: '',
        tags: ''
    },
    watch: {
        qContent: function (val, oldVal) {
            $("#markdownReview").html(val);
        }
    }
})

does vue-markdown's text can not be reset?

Looks like there are runtime dependencies on Babel-runtime in the vue-markdown.common.js. Babel-runtime was removed in babel 7

Since babel is used as a transpiler for builds, why is it required to be used for vue-markdown? I would think babel-runtime (babel 6) would be added as a peer dependency so consumers know to install it or it would not be included as a runtime dependency.

Are there plans to remove this or support babel 7? This is related to issue #18

<vue-markdown source="..."></vue-markdown>
文档里通常这样来用，可否这样用：

<vue-markdown> ... </vue-markdown>

========= 好吧，搞错了。

Hi,

I try to generate markdown but does'nt work:

<template>
    <vue-markdown>i am a ~~tast~~ **test**.</vue-markdown>
</template>

<script>
  import VueMarkdown from 'vue-markdown'

  export default {
    components: {
      VueMarkdown
    }
  }

</script>

output is: i am a ~~tast~~ **test**. in a <div>

I'm building a site with Contentful and I'm trying to put a class on a heading.

My code looks like the below

<vue-markdown class="f3">
  ### {{ hello.fields.heading }}
</vue-markdown>

And renders out to

<div class="f3">
  <h3>Hello</h3>
</div>

What I would really like to render out is

<h3 class="f3">
  Hello
</h3>

Is putting a class on a markdown heading possible? Sorry if this has been covered already.

Got this in console with latest version:
[Vue warn]: Invalid default value for prop "anchorAttributes": Props with type Object/Array must use a factory function to return the default value.
I'm getting content from contentful and it's getting displayed though.

使用:source没有效果

检查下了源码，发现 mounted 中 没有处理 :source 这样的方式，简单修改了下，希望作者修复下

修改前:

153   mounted() {
154     if (this.$el.childNodes.length > 0) {
155       this.source = ''
156       for (let el of this.$el.childNodes) {
157         const ext = el.outerHTML ? el.outerHTML : el.textContent
158         this.sourceOut += ext
159       }
160     }
161     rende(this)
162     this.$watch('source', () => { rende(this) })
163     this.watches.forEach((v) => {
164       this.$watch(v, () => { rende(this) })
165     })
166   },

修改后:

153   mounted() {
154     if (this.$el.childNodes.length > 0) {
155       this.source = ''
156       for (let el of this.$el.childNodes) {
157         const ext = el.outerHTML ? el.outerHTML : el.textContent
158         this.sourceOut += ext
159       }
160     }else{
161         this.sourceOut = this.source
162     }
163     rende(this)
164     this.$watch('source', () => { this.sourceOut = this.source; rende(this) })
165     this.watches.forEach((v) => {
166       this.$watch(v, () => { rende(this) })
167     })
168   },

I'm a JS and Vue.js noob so forgive me if this a dumb question.

Is there a way to parse and render markdown text from a .md file stored in my static folder? Maybe using import or webpack?

If yes I think documenting this would be a great addition :-)

我遇到的问题是这样的，我需要支持laTex公式，先用vue-markdown渲染一次后，再用mathjax渲染一次。书写LaTex公式时，需要被$或者$$包围起来，使用vue-markdown渲染后会在原来的公式前后包围一个p标签，导致mathjax无法正确解析LaTex公式，有什么办法可以解决这个问题吗？或者说通过某些配置，让vue-markdown不处理$或者$$包围的文本？