Introduction
Finally! A while back, a friend asked me how to do blockquotes using the SteemIt editor since I do have background using Markdowns. I haven't really explored the editor, in fact I haven't posted a blog yet. I did some experimenting and compiled them, hence, this blog. Hope this could help others starting out without much background in using HTML or Markdown.
Before you start, here's a cute husky to motivate you!
(Disclaimer: Credits to the owner for this awfully cute photo.)
What exactly is Markdown?
Basically, Markdown is the thing you put to the text of your content to make it look nicer and easier to read. Instead of writing stuff like <h3> Hi! I'm awesome!</h3>, you would only have to write #Hi! I'm awesome which produces the same thing. You won't bother yourself writing those greater-than and less-than signs which will surely make yourself miserable if you're not familiar with HTML.
Here are some things you might want to remember.
Headers
Use headers to define sections of your content. You can use six different headers by starting the text with at most six number signs (#) followed by a space.
# Largest header
## Slightly large header
...
##### Slightly small header
###### Smallest header
RESULT:
Largest header
Slightly large header
...
Slightly small header
Smallest header
(Do not forget the space after the number signs, or else it will be treated as a plain hashtag.)
You may also use === for H1 or --- for H2 alternatively but I do suggest you use # and ## to make it more readable and distinct.
Largest header
===
Slightly large header
---
RESULT:
Largest header
Slightly large header
(Don't forget to have a new line/line break before the header text when using --- and === or else it wouldn't work.)
Emphasis
Emphasizing words or phrases helps your readers remember points about your blog. You can bold or italicize using *.
You can **bold** or *italicize* your text.
You might also want to put ~~strikethroughs~~.
You can even ***combine*** ~~**them**~~.
RESULT:
You can bold or italicize your text.
You might also want to put strikethroughs.
You can even combine them.
(Do not leave spaces before and after your text.)
Blockquotes
You might want to quote something in your blog to refer someone or something. You can also use quotes to indicate replies. You'll probably know this if you use forums like Reddit.
You can do this by adding a > and a space before your text. You can also nest them as shown below. However, note that you need to have a new line to break the quote.
> This a quote
Quoted the same as above.
>> Quote again
Like I said.
>>> Another quote
This would still be quoted even though there is no >
This also.
This wouldn't be
RESULT:
This a quote
Quoted the same as above.Quote again
Like I said.Another quote
This would still be quoted even though there is no >
This wouldn't be
Links and Images
You can use links to create shortcuts or references to your previous blogs or an external website. You can do this by enclosing your text with [] followed by the link and/or tool tip (the tiny box with a text you see when you hover the text) enclosed in parenthesis ()
[The whole text has the link.](https://www.google.com)
I just want the [link](https://www.google.com) word to have the link.
RESULT:
The whole text has the link.
I just want the link word to have the link.
Images also work the same as other links. All you need to do is start the link with ! and the text as the alternative in case your image has problems loading.
RESULT:
(Basically, the syntax for links would be something like [Link Text or Alternative Text](Link). Don't forget the ! if you're linking an image. Be careful not to put a space between[] and (). Trust me, this mistake is very common.)
Horizontal Rule and Line Breaks
Basically you can add this gray line by adding three - on a line.
---
RESULT:
(You should not have any text directly preceding the --- or else it would be rendered as a header. )
You can just press Enter to put a line break. However, if you want to put many line breaks, you have to put \ to 'escape' the Enter character or else it would just be omitted as shown below. (Please do help me explain this 'escape' thingy in the comments.
Hello
Hello
Hello
\
\
\
\
Hello
RESULT:
Hello
Hello
Hello
Hello
Code Blocks
This is what I've used to show you how the text looks like before it is rendered. Anything enclosed in this block will not be rendered and will just be plain text or code as you can see in a text editor.
You can use this by enclosing your text or code in two ``` tags. I added \ to prevent it from being rendered for example purposes.
\```
# Markdown here and there
Some random text over here!
> A quote...
\```
RESULT:
# Markdown here and there
Some random text over here!
> A quote...
Tables
You can also make tables. It's just harder than the thing you do in a word processor but trust me, it's way easier than writing HTML yourself. You can use | to define the columns. You can define the alignment of the whole column content by placing a : on the left or right as shown below.
| HEADER 1 | HEADER 2 | HEADER 3 |
| ------------- | :------------- | --------------: |
| Item 1 | left-aligned | right-aligned |
| **Item 2** | *italicized* | ~~***more***~~ |
| Item 1 | left-aligned | right-aligned |
RESULT:
| HEADER 1 | HEADER 2 | HEADER 3 |
|---|---|---|
| Item 1 | left-aligned | right-aligned |
| Item 2 | italicized | |
| Item 1 | left-aligned | right-aligned |
(Take note that you can only assign the alignment of the column after the column header. You can also omit the outer | and it will still render the same.)
Lists
You might even use this if you're blogging recipes or instructional stuff. This is better understood by looking at the example below.
Numbered List
1. Item 1
2. Item 2
Some description or text for Item 2. This is automatically indented
6. Item with wrong number will still have the right number when rendered
1. Item with another wrong number
Unnumbered List
+ Item 1
+ Item 2
+ Item 3
RESULT:
Numbered List
- Item 1
- Item 2
Some description or text for Item 2. This is automatically indented - Item with wrong number will still have the right number when rendered
- Item with another wrong number
Unnumbered List
- Item 1
- Item 2
- Item 3
(You may opt to use - or * for unnumbered lists but I do suggest you use + for consistency. Let's leave the - for the horizontal rule and the * for the emphasis thingy.)
Conclusion
You need to explore these things yourself to know how will they actually behave. I might not have included other errors/mistakes you should avoid but it's okay, the fun lies in discovering and experiencing them firsthand. Please do comment anything I have missed out or any other thing you might want to share or ask. Hopefully, I'll be sharing tips using HTML together with this Markdown on my next blog.
No wonder I almost flunked my CMSC2.
Try taking CMSC 22 and CMSC 100. xD
Thanks for the offer but no, thank you. I heard a lot of people don't like CMSC 100 because 100x the horror!!!!
very Informative I learn a lot here please keep blogging
Good job sharing this one. Will try it some time. Thanks for sharing this useful info for all of us. :)
Salamat bro :) nandito yung mga hinahanap ko.
Congratulations @landster! You have completed some achievement on Steemit and have been rewarded with new badge(s) :
Click on the badge to view your Board of Honor.
If you no longer want to receive notifications, reply to this comment with the word
STOPway to go @landster keep sharing and stay awesome!
Congratulations! This post has been upvoted from the communal account, @minnowsupport, by landster from the Minnow Support Project. It's a witness project run by aggroed, ausbitbank, teamsteem, theprophet0, someguy123, neoxian, followbtcnews, and netuoso. The goal is to help Steemit grow by supporting Minnows. Please find us at the Peace, Abundance, and Liberty Network (PALnet) Discord Channel. It's a completely public and open space to all members of the Steemit community who voluntarily choose to be there.
If you would like to delegate to the Minnow Support Project you can do so by clicking on the following links: 50SP, 100SP, 250SP, 500SP, 1000SP, 5000SP.
Be sure to leave at least 50SP undelegated on your account.