Gatsby Custom MD

Plugin that allows custom components inside markdown. Supports markdown as children.

Installation

npm install --save gatsby-custom-md

This plugin is created for use with gatsby. It requires the htmlAst form graphql query.

Usage

Import the plugin

import MD from "gatsby-custom-md"

Import the components to be added, and add them to an object.

import { Component1, Component2, ComponentN } from './file'

const components = {
  comp1: Component1,
  comp2: Component2,
  compN: ComponentN
}

Now render it.

// data.markdownRemark.htmlAst is received from graphql query.
<MD components={components} htmlAst={data.markdownRemark.htmlAst}/>

Now in the markdown file, you can use the components as follows.

# Title

[comp1]
This is first component
**Markdown is supported inside it.**
[/comp1]

[comp2]
Second Component
[/comp2]

Example usage for grid creation.

template.js

import MD from "gatsby-custom-md";
import { Row, Col } from "./grid";

let components = {
  row: Row,
  col: Col
};

export default function({ data }) {
  return (
    <Layout>
      <MD components={components} htmlAst={data.markdownRemark.htmlAst} />
    </Layout>
  );
}

export const query = graphql`
  query($slug: String!) {
    markdownRemark(fields: { slug: { eq: $slug } }) {
      htmlAst
    }
  }
`;

grid.js

import React from "react";

export const Row = ({ children })=> {
  return (
    <div className="row">
      {children}
    </div>
  );
};

export const Col = ({ children })=>{
  return (
    <div className="col">
      <div>{children}</div>
    </div>
  );
};

markdown.md

[row]
[col]
![image](./image.jpg)
*Text*
[/col]
[col]
![image](./image.jpg)
*Text*
[/col]
[col]
![image](./image.jpg)
*Text*
[/col]
[/row]

Why is this in beta ?

• This still requires a lot of testing. I have tested with most possbilities however there may still be bugs.
• This is for Layout designing only. class cannot be used to create components.
• ~Attributes are not allowed. (This maybe added in a new version)~. Attributes can now be added to shortcodes, they are available as attrs props to the component.