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](https://www.gatsbyjs.com/ "the gatsbyjs home page")

GatsbyJS Home Page

blockquote

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

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.

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:

then, you can call them

In MDX, you can import components:

You can also use any type of html in html code

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.

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