The Things You Can do Using MDX

Creating pages programatically is amazing. You can write your heart's content, then put up the pages as fast as if you were using a Wordpress blog. MDX let's you leverage all the advantages of React and Gatsby taking Markdown to the next level.

David Ben Horin                

Life is like day and night. Always in flux.

This is an MDX file Showing you What you Can Do Totally Awesome, right?

H1 text uses a single #

h2 uses two ##

h3 uses three ###

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

this is a value statement. 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

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

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" />

You should also be able to call graphql query results. Next class.



You Might Also Like: