The Quintessential Markdown Compendium: A Complete Simplified Guide to Markdown
Guide to Markdown, Straight Ahead!
Use ctrl+f for Windows or cmd+f for Mac to search the guide
I had someone on another post ask me to teach them how I do some of the formatting that I use. This post is for that person, who, like myself only a month ago, didn't understand how to use markdown. I was pretty helpless with this stuff, but I really wanted to make my posts look nice. I am most definitely still on the learning curve here, but the more I post and try new things, the more I begin to understand how it all works. Please let me know in the comments what I am missing. I am trying to make this an all-inclusive guide, so I will amend it as needed.
Here is some formatting stuff that I use on my posts. I know that there are lots of other guides on markdown, however, I always find that there is something or another missing from them. I will do my best to include all that I know about markdown based on what I've learned per my crash course in this formatting method over the last month. It's not too difficult once you get used to it, but it can be confusing at times.
Without further ado, here is the guide!
Headers
###### header 6 ######
##### header 5 #####
#### header 4 ####
### header 3 ###
## header 2 ##
# header 1#
header 6
header 5
header 4
header 3
header 2
header 1
Spacing
Create a space right here | Create a space right here
If you're having trouble getting enough seperation between lines you can also use on a blank line to move down one more line. It can also be used for indentation if you copy/paste a few of them together
like this.
Dividing Lines/Separators/Dividers
The dividers are done like this --- and only require you to put three hyphens.
Putting --- on the next empty line will create another divider like this
Text/Font Emphasis and Formatting
Italic Text
*Italic Text*
_Italic Text_
Bold Text
**Bold Text**
__Bold Text__
Italic and Bold
***Italic and Bold***
___Italic and Bold___
Strikethrough Text
~~Strikethrough Text~~
<strike>Strikethrough Text</strike>
Italic, Bold, and Strikethrough Text
<strike>***\Italic, Bold, and Strikethrough Text***</strike>
*__~~Italic, Bold, and Strikethrough Text~~__*
Centered Text or image
<center>
Centered Text or Image
</center>
or
<center>Centered Text or Image</center>
Subscript and Superscript
This is subscript text
<sub>subscript text</sub>
This is superscript text
<sup>superscript text</sup>
Hyperlink/Embedded Link/Text Link
This is a link to my blog
This is a link to [my blog](https://steemit.com/@still.alive)
Justified Text
Justified text will look like this, and it can be useful to clean up an otherwise messy looking post or comment that you want to look better. It will make the lines of text appear to line up along the edge of the page in the way that this text is doing. Now, as you can see, I am just writing more text here so as to fill this area with more text. Yada yada yada, and even more yada, so on and so forth. Continuation of yada yada yada yada yada yada yada yada yada and, well, I think you get the idea.....
<div class="text-justify">
As you can see, the markdown used to justify text seems to work best with an empty line both above and below the lines of text that you wish to justify. It will hardly be noticeable if you don't have two or more full lines of text going across the page. Always be sure to use the forward slash / before div beneath the text or it may not close the markdown properly.
</div>
Text and Image Placement
This is how you pull text to the left, and you can also use this markdown to put images on this side as well. Text or images that follow the closure of the markdown </div> will be placed on the right. I tend to use on one empty line or more (as many times as needed) in order to get the text below that to appear normally once again.
These pull markdowns can be somewhat confusing, so I use a combination of markdowns to get the visual appearance that I am looking for. I'm definitely not a pro at this, but I try and make my writing look good by using markdown wherever I feel it is appropriate. Hopefully this helps. Images can be dropped or linked on this side as well.
|
<div class="pull-left">
Ok, so here is how the markdown will appear on the left, as such. Within this markdown you can use all the other stuff above, i.e., strikethrough text or subscript, whatever.
</div>
<div class="pull-right">
Here is some text placed on the right. Again, you can use this in order to pull images to the right as well. Use clickable images, links, whatever in this area.
</div>
Blockquote
Use > at the beginning of a line to start a blockquote.
> This text would be in a quote format. Add the actual quotation marks if you'd like, as i did below.
> * This will appear as a note or bulletpoint attached to the quote.
"Quotes will look something like this. You can fill out this space as you'd like and skip to the next line when you are finished." - Me
- Check out this quote note. If you'd like, it could be used to include information about the author, the quote, or their name. It's all up to you.
Bullet points, Numbered Lists, and Ordered Lists
I have never used bulletpoints or numbered lists before; here's what I've got:
- This is a numbered list. It starts with the number and a period.
- Here is another number
- These are bulletpoints attached to each number.
- Use exactly 4 Spaces at the start of the line to keep the list ordered.
- An *asterisk like this after 4 spaces will become the bullet point.
- Bullet points can also be used alone.
- Such as what I am doing here.
- You also have the option of doing a numbered only list.
- By using 4 spaces at the beginning of the line.
- Pretty neat, eh?
- Or even doing
- Something like this
- Which includes an additional 4 spaces (total of 8 spaces at the beginning of this line).
- Something like this
Code I think...
I'm not even sure what the purpose of this is, but if you scroll over, maybe I'll tell you! :astonished: just kidding, I dunno. My experimentation led me to this. All I did was put 4 spaces at the beginning of the line. Maybe you could use it for spoilers? :stuck_out_tongue_closed_eyes: 4 of these ~~~~ on an empty line above and below text will also make it appear this way.
I think it's meant to be code inside of a block, only I didn't include blocks above.
It would look like this in block form. Don't fully know what it's for, though.
Here's another line of it. Only difference is I put each bit of text on a new line.
This does a similar thing. It is text enclosed in `these.`
Tables
I've never used a table on here either, but, in order to be thorough, the job must be done. This | is the character used to seperate sections of the table. On my keyboard, it looks like a vertical hyphenated line, instead of being solid. Yours might look funny too.
| Here is a table | Use the line thing between | Each section you want to | Divide |
|---|---|---|---|
| You can add | Different sections to it | By using a space | And the vertical line |
| It can be used for | Various things | Based on your needs | And intentions |
| Here are your lottery numbers | 15 | 72 | 13 |
| Let me | Know | If you | Win! |
And here it is again with all the elements for you to see...
Here is a table | Use the line thing between | Each section you want to | Divide
-| -| -| -|
You can add | Different sections to it | By using a space | And the vertical line
It can be used for | Various things | Based on your needs | And intentions
Here are your lottery numbers | 15 | 72 | 13
Let me | Know | If you | Win!
Show Formatting Marks
In order to show my work without it being formatted, I had to use the backslash symbol \ in front of formatted items, and <sub>that's why this text isn't in subscript.</sub> Otherwise, it would look like this. Using this technique, I can exclude formatting and show my markdown changes. The \ is invisible.
Clickable Images
The image to the left is clickable, and beneath it is a good way to caption pictures or include links to other pages. I did use <sub><sub>text</sub></sub> to make make the font extra small. This is a good trick for sourcing. Of course, you can also just use <sub>text</sub> once to make it slightly larger.
The clickable image is ugly when you're inputting the links and whatnot into the editor. It's also a bit confusing when you're first figuring out how to do it. Regardless, it looks really nice when finished, and it's a good way to link to content elsewhere on the internet.
Above is what the finished product will look like.
This is my process for creating clickable images. Hopefully it will help you.
- First thing, put in your closed brackets like this. [] Don't put a space in there.
- Next, you'll want to copy/paste or drag and drop the image inside the brackets. The exclamation point should be inside the brackets.
[] - Just outside of the bracket, you should type in some closed parentheses ()
- Inside the parentheses, paste the image location or a link you want to send your readers to.
(https://steemit.com/introduceyourself/@still.alive/hello-there-fellow-steemians)
The text ends up looking like this:
[](https://steemit.com/introduceyourself/@still.alive/hello-there-fellow-steemians)
In Conclusion...
I hope I was able to show you something useful here. I'm still new to markdown, and just wanted to compile all of the information that I've taken from different guides into a compendium of sorts. I designed it to be easier to understand and generally more inclusive than some of the other guides available. Hopefully it will see some use other than just being my own personal reference which it most definitely is going to be! However, I have no doubt that I left a few things out. Let me know in the comments what they are, and I'll do my best to add them. Otherwise, please make any additions you'd like to in your comment for all to see.
Does anyone else hate the editor preview sometimes? Because I hate the editor preview sometimes... It should not require so many RCs to get this post the way I want it. So many edits... Looked perfect in preview, though, that's for sure! Lol.
At least it's there now. Almost looks the way I'd like for it to. Hopefully it'll help some folks. Ya'll let me know what's missing or what needs clarification.
This post was shared in the Curation Collective Discord community for curators, and upvoted and resteemed by the @c-squared community account after manual review.