Markdown & Mdx

Markdown Examples

Since *.mdx is a combination of markdown and React components, I would like to introduce the basic usages of markdown. Click below to see each example.

Mdx

Pre-build components

The blog includes several React components that are ready to use for your blog posts. You don't need to import to use them.

You can expand each list to view each component.

Create your own component

You can build your own React component or use pre-existing component to include inside your post

Example:

import React from "react"

const Link = ({ href, children }) => {
  return (
    <a style={{ margin: "1rem 0" }} href={href}>
      {children}
    </a>
  )
}

export default Link

Then import into your *.mdx or *.md post

---
title: mdx import example
---

import Link from "../src/link.jsx"

<Link href={"/"}>Some Link</Link>

If you don't like to import your component, you can add it as shortcode to skip import

Shortcodes

By adding your components as shortcode inside src/components/PostTemplate/index.js, you can reference them anywhere in Mdx without import.

Example:

// ...
render() {
  // ...
  const mdxComponents = {
    // ...
    // Use the below components without having to import in *.mdx
    Link
  }
}

Mdx as componet

It is also possible to use *.mdx as a component in different files.

What's next? 🤔

- Customize your blog

- Deploy Blog on Netlify💫