Skip to content

ymmooot/markduck

master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
logo

markduck

version dependencies codecov prettier typescript

Render markdown with your Vue components.

Installation

$ npm install markduckjs
or
$ yarn add markduckjs

Usage

<template>
  <markduck :markdown="markdown"/>
</template>

<script>
import markduck from 'markduckjs';
import gemojiToEmoji from 'remark-gemoji-to-emoji';
import rehypePrism from '@mapbox/rehype-prism';
import 'prismjs/themes/prism.css';

import UnorderedList from '/your/custom/components/UnorderedList.vue';
import ListItem from '/your/custom/components/ListItem.vue';
import FigureImage from '/your/custom/components/FigureImage.vue';

export default {
  data() {
    return {
      markdown: '# your markdown :duck:',
    };
  },
  components: {
    markduck: markduck({
      remarkPlugins: [gemojiToEmoji],
      rehypePlugins: [rehypePrism],
      components: {
        ul: UnorderedList,
        li: ListItem,
        img(nodeData) {
          if (nodeData.attrs.alt) {
            return FigureImage;
          }
          return undefined;
        },
      },
    }),
  },
};

Options

components

Register Vue components corresponding to each HTML element.

type

Object

type ComponentRegisterFunc = (data: VNodeData) => VueConstructor<Vue> | undefined;

type ComponentRegisterOption = {
  [keyof: string]: VueConstructor<Vue> | ComponentRegisterFunc;
};

default

{}

remarkPlugins

Remark plugins.
A part of lists is here 👉 github.com/remarkjs/remark/blob/master/doc/plugins.md#list-of-plugins

type

Array of Plugin or [Plugin, Settings] (Plugin and Settings are from Unified.)

default

[]

rehypePlugins

Same as remarkPlugins.
Rehype plugins will run after remarkPlugins.

sanitizeScheme

Demo

Clone and run:

npm run demo

Flow of conversion from markdown to Vue

            remark-parser       remark-rehype      createElement
your markdown      ->      mdast      ->      hast      ->      vue
                            ↑                  ↑
                  your remark plugin     your rehype plugin