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.
(Disclaimer: Credits to the owner for this awfully cute photo.)
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.
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:
...
(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:
(Don't forget to have a new line/line break before the header text when using --- and === or else it wouldn't work.)
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.)
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
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.)
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
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...
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.)
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
Unnumbered List
(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.)
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.