cloudacy / vue-markdown-render Goto Github PK

View Code? Open in Web Editor NEW

59.0 59.0 10.0 262 KB

A simple markdown parser for Vue using markdown-it.

License: MIT License

TypeScript 34.64% HTML 10.31% Vue 55.05%

markdown-it vue vuejs

vue-markdown-render's People

Contributors

Stargazers

Watchers

Forkers

lukaszmoskwa brianfryer pgbiel paulopereira-benner machinaexphilip filiphazardous machinechatllc alextheyounga jakudlaty keddydigital

vue-markdown-render's Issues

Compatibility with @vue/cli-plugin-unit-jest

When I'm testing my component with https://cli.vuejs.org/core-plugins/unit-jest.html and my component contains import VueMarkdown from 'vue-markdown-render';, then the Jest test runner fails with:

● Test suite failed to run
--
44 |  
45 | /drone/src/node_modules/vue-markdown-render/dist/VueMarkdown.js:1
46 | ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import Vue from "vue";
47 | ^^^^^^
48 |  
49 | SyntaxError: Cannot use import statement outside a module

I can resolve the error by mocking vue-markdown-render with

jest.mock('vue-markdown-render', () => (                                                             
  (fn: (...args: any[]) => void) => fn                                                               
));

But with all other 3-rd party modules, I don't have to do this.

How to add newlines?

I was using the package vue-markdown, but was passing to vue-markdown-render because the first one is a dead project. The problem is that when I passed to vue-markdown-render, I noticed that all the <br /> I used to make additional newlines were kept as text. What should I do?

How to install plugins?

I would like to have the katex plugin for markdown-it in the component. How do I go about doing this?

Vue 3 support

Thanks for this library, but it seems like it doesn't support Vue 3 with Typescript (correct me if I'm wrong).

Trying a basic example:

import { defineComponent } from "vue";
import VueMarkdown from "vue-markdown-render";

export default defineComponent({
  components: { VueMarkdown },
});

I get the following error on the components: { VueMarkdown } line:

No overload matches this call.
  The last overload gave the following error.
    Type 'Component<DefaultData<never>, DefaultMethods<never>, DefaultComputed, Record<string, any>>' is not assignable to type 'Component<any, any, any, Record<string, ComputedGetter<any> | WritableComputedOptions<any>>, MethodOptions>'.
      Type 'ComponentOptions<never, DefaultData<never>, DefaultMethods<never>, DefaultComputed, Record<string, any>, Record<string, any>>' is not assignable to type 'Component<any, any, any, Record<string, ComputedGetter<any> | WritableComputedOptions<any>>, MethodOptions>'.
        Type 'ComponentOptions<never, DefaultData<never>, DefaultMethods<never>, DefaultComputed, Record<string, any>, Record<string, any>>' is not assignable to type 'ComponentOptions<any, any, any, 
Record<string, ComputedGetter<any> | WritableComputedOptions<any>>, MethodOptions, any, any, any>'. 
          Type 'ComponentOptions<never, DefaultData<never>, DefaultMethods<never>, DefaultComputed, 
Record<string, any>, Record<string, any>>' is not assignable to type 'ComponentOptionsBase<any, any, any, Record<string, ComputedGetter<any> | WritableComputedOptions<any>>, MethodOptions, ... 4 more 
..., {}>'.
            Types of property 'components' are incompatible.
              Type '{ [key: string]: VueConstructor<Vue> | FunctionalComponentOptions<any, PropsDefinition<any>> | ComponentOptions<never, any, any, any, any, Record<...>> | AsyncComponentPromise<...> | AsyncComponentFactory<...>; } | undefined' is not assignable to type 'Record<string, Component<any, any, any, Record<string, ComputedGetter<any> | WritableComputedOptions<any>>, MethodOptions>> | undefined'.
                Type '{ [key: string]: VueConstructor<Vue> | FunctionalComponentOptions<any, PropsDefinition<any>> | ComponentOptions<never, any, any, any, any, Record<...>> | AsyncComponentPromise<...> | AsyncComponentFactory<...>; }' is not assignable to type 'Record<string, Component<any, any, any, Record<string, ComputedGetter<any> | WritableComputedOptions<any>>, MethodOptions>>'.
                  Index signatures are incompatible.
                    Type 'VueConstructor<Vue> | FunctionalComponentOptions<any, PropsDefinition<any>> | ComponentOptions<never, any, any, any, any, Record<...>> | AsyncComponentPromise<...> | AsyncComponentFactory<...>' is not assignable to type 'Component<any, any, any, Record<string, ComputedGetter<any> | WritableComputedOptions<any>>, MethodOptions>'.
                      Type 'ComponentOptions<never, any, any, any, any, Record<string, any>>' is not assignable to type 'Component<any, any, any, Record<string, ComputedGetter<any> | WritableComputedOptions<any>>, MethodOptions>'.
                        Type 'ComponentOptions<never, any, any, any, any, Record<string, any>>' is not assignable to type 'ComponentOptions<any, any, any, Record<string, ComputedGetter<any> | WritableComputedOptions<any>>, MethodOptions, any, any, any>'.
                          Type 'ComponentOptions<never, any, any, any, any, Record<string, any>>' is not assignable to type 'ComponentOptionsBase<any, any, any, Record<string, ComputedGetter<any> | WritableComputedOptions<any>>, MethodOptions, ... 4 more ..., {}>'.
                            Types of property 'directives' are incompatible.
                              Type '{ [key: string]: DirectiveFunction | DirectiveOptions; } | undefined' is not assignable to type 'Record<string, Directive<any, any>> | undefined'.
                                Type '{ [key: string]: DirectiveFunction | DirectiveOptions; }' is not assignable to type 'Record<string, Directive<any, any>>'.
                                  Index signatures are incompatible.
                                    Type 'DirectiveFunction | DirectiveOptions' is not assignable to type 'Directive<any, any>'.
                                      Type 'DirectiveFunction' is not assignable to type 'Directive<any, any>'.
                                        Type 'DirectiveFunction' is not assignable to type 'DirectiveHook<any, any, any>'.
                                          Types of parameters 'binding' and 'binding' are incompatible.
                                            Property 'name' is missing in type 'DirectiveBinding<any>' but required in type 'DirectiveBinding'.

I'm not an expert in Typescript or in the differences between Vue 2 and 3, but it seems like the types that Vue is expecting for components might have changed.

For me, I wanted to add an option to the markdown-it-anchor that I pass as a plugin to vue-markdown-renderer, and override the default slugify function. So I did the following in the :

<script>
const customSlugify = ...;

const anchorPlugin = (vueMarkdownItInstance: MarkdownIt) => {
  vueMarkdownItInstance.use(MarkdownItAnchor, {
    slugify: customSlugify
  });
};

const plugins = [anchorPlugin, /* other plugins */];
<script>

And then I just pass the plugins to vue-markdown-renderer in the tag as you normally would do.

Is punycode dependency necessary?

I don't see any explicit usage of it in the codebase.

got error with vue2

instrument.js:108 
        
       TypeError: Object(...) is not a function
    at ./node_modules/vue-markdown-render/dist/VueMarkdown.js (VueMarkdown.js:3:1)
    at __webpack_require__ (bootstrap:766:1)
    at fn (bootstrap:129:1)
    at ./node_modules/cache-loader/dist/cjs.js?!./node_modules/@vue/cli-plugin-babel/node_modules/babel-loader/lib/index.js!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./src/views/chatgpt/index.vue?vue&type=script&lang=js& (index.vue?6fbd:18:1)
    at __webpack_require__ (bootstrap:766:1)

Recommend Projects

React

A declarative, efficient, and flexible JavaScript library for building user interfaces.
Vue.js

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript

TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
TensorFlow

An Open Source Machine Learning Framework for Everyone
Django

The Web framework for perfectionists with deadlines.
Laravel

A PHP framework for web artisans
D3

Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

javascript

JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
web

Some thing interesting about web. New door for the world.
server

A server is a program made to process requests and deliver data to clients.
Machine learning

Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Visualization

Some thing interesting about visualization, use data art
Game

Some thing interesting about game, make everyone happy.

Recommend Org

Facebook

We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft

Open source projects and samples from Microsoft.
Google

Google ❤️ Open Source for everyone.
Alibaba

Alibaba Open Source for everyone
D3

Data-Driven Documents codes.
Tencent

China tencent open source team.

cloudacy / vue-markdown-render Goto Github PK

vue-markdown-render's People

Contributors

Stargazers

Watchers

Forkers

vue-markdown-render's Issues

Compatibility with @vue/cli-plugin-unit-jest

How to add newlines?

How to install plugins?

Vue 3 support

Vite Build Failed due to VueMarkdown TS Error

Tables do not get css-styled.

it's ok to transform markdown, but style...emm,it's nice,thank you!

Use target _blank for links in markdown

How to handle plugin options?

Is punycode dependency necessary?

got error with vue2

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent