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
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
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
* [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" />
##Hey, why not wrap it up with a global component?