All the Things You Can Do Using MDX Markdown

Here is a nice reference guide to all the types of syntax you can use with MDX Markdown text.

David Ben Horin                

A reference guide to all that you can do with MDX Markdwon pages.

For my first post, I decided to work smart.

Since I started using MDX for my posts, I kept some notes on what I could do. Instead of hiding a file somewhere, I thought why not post this as a page on my app? It would be a lot easier. Especially as I try to use tags to make the last phrase italicized. All I had to do was look down a few lines and I figure it out using markdown syntax.

See the point?

Here is a nice reference guide to all the things you can do with markdown, especially using MDX

H1 text uses a single #

h2 uses two ##

h3 uses three ###

up to h6 where you use six ######

this is a value statement using h3. How does it look?

note: use a \ to use a command like # that you want to see, but not render

italics uses * at the beginning and the end of what you are italicizing italics also uses an _ underscore strong gives you bolded text. Use ** double asterik strong also gives you bolded text using double underscore __

~~ strikethrough uses the double tilde (on top of the back tick) ~~

create a horizontal line to seperate sections with a triple ___ underscore or triple --- dash

This is a quote. Use it by starting out with a >

This is the text inside the blockquote. Use >> double if the blockquote doesn't work -- that's fine. Create a styled react component that takes two props. One prop is the quote, the next is the person who said it. call the component, add the props.

[text](https://link) this is the anatomy of a markdown link. [] in brackets go the text. () parenthesis for the link. inside the parenthesis, after the link use "" quotes for the title text

example: [GatsbyJS Home Page]( "the gatsbyjs home page")

GatsbyJS Home Page


If you cannot do great things, do small things in a great way.

unordered lists

  • item 1
  • item 2
  • item 3

that's all. just put one * in front of every list item.

* item 1 * item 2

if you want to nest lists inside lists, put the * indented

* item 1 \ [tab indent] * nested item

  • item 1
    • nested item

ordered list: replace the * with 1.

\1. item 1 \1. item 2 \1. item 3

  1. item 1
  2. item 2
  3. item 3

code blocks ```js use three back ticks FOLLOWED BY the language you want to show. You can use "js" for JavaScript. For instructions on what to install "npx install ..." - don't use a language indicator

<p> this is a p tag </p> function (num1, num2) { return num1 + num2; } npm clone my-repo.git

here is the use of a picture component

images are the same as links, just with an ! in front. The alt text goes at the end of the () with the image link. You should be able to call images from graphql queries inside of MDX.

A Gatsby Logo

task lists -- checklists

  • task 1
  • task 2
  • task 3 returns checks and boxes -- pretty cool

* [x] task 1 * [x] task 2 * [ ] task 3

In MDX, you can import components:

import Youtube from "/src/components/youtube"

then, you can call them

<Youtube url="" />

In MDX, you can import components:

You can also use any type of html in html code

<button>a button</button>

Here is another component you made. It's important to realize that you can create React components with props, then render them in a page going to gatsby. This is one of the ways you can use react in a gatsby app.

import Number from "/src/components/number" <Number number="5" />
Go Back

##Hey, why not wrap it up with a global component?


You Might Also Like: