markduck

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