markduckjs

markduck

Render markdown with your Vue components.

Installation

$ npm install markduckjs
or
$ yarn add markduckjs

Usage

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

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

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

export default {
  data() {
    return {
      markdown: '# your markdown :duck:',
    };
  },
  components: {
    markduck: (() => {
      return 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