This is an MDX file Showing you What you Can Do Totally Awesome, right?
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")
blockquote
If you cannot do great things, do small things in a great way.
unordered lists
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
ordered list: replace the * with 1.
\1. item 1 \1. item 2 \1. 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.
task lists -- checklists
* [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="https://www.youtube.com/embed/k4I3bcDC4rE?start=454" />
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.
{props.pageContext.frontmatter.title}