How to Style Your Blog Post on Steemit Using Markdown
Markdown is a lightweight markup language with plain text formatting syntax.
I was chatting with my friend today when he mentioned that I should help members of a group we belonged to on how to use markdown to format our posts on steemit. This made me remember how difficult it was for me as a newbie to have all those nice formated posted on my blog. So, I decided to take it a step forward and do a post on it.
So here we go
Put a
#
and give space and type the header. Example below:One
#
Header
Two #
gives a header smaller than one #
. Eg
Header
With Six #
making the smallest header. Eg
Header
# H1
## H2
### H3
#### H4
##### H5
###### H6
Gives you below
H1
H2
H3
H4
H5
H6
Italics
Use *
before and after the word. Eg. *airhawk-project*
gives you airhawk-project
Or you can use underscores _
Eg. _airhawk-project_
gives you airhawk-project
Bold
For strong emphasis, aka bold, use double asterisks **
Eg. **airhawk-project**
gives you airhawk-project
or use double underscores__
Eg. __airhawk-project__
gives you airhawk-project.
Combined emphasis with **
with _
Eg. **airhawk-project _looks good_**
gives airhawk-project looks good
Strikethrough
This uses two tildes. ~~
Eg. I love ~~steam~~ steem
gives you I love steam steem
Ordered List
Use as shown below
1. Item 1
5. Item 2
2. Item 3
3. Item 4
Notice the numbers are scattered (1,5,2,3), just use an actual number. It would appear as shown below:
- Item 1
- Item 2
- Item 3
- Item 4
Unordered List
Use asterisks*
,plus+
or minus-
before the item
* Item 3a
+ Item 3b
- Item 3c
* Item 4d
Gives you below:
- Item 3a
- Item 3b
- Item 3c
- Item 4d
[This is bitfairy's blog](https://steemit.com/@bitfairy).
Appears as This is bitfairy's blog.
[Text here](in-line link url here)
. Wondering which of the brackets come first? Imagine the square bracket as an Enter key on a PC. That way you always know the square bracket is where the text is and the regular bracket is where the link url is.
This is for showing quotes. Use >
before typing the word you want in quote.
They say "don't try this at home" so I'm coming over to your house to try it.
Anonymous
Use three underscore
___
, hyphens ---
, or asterisks ***
eg
``***``` gives a line
Pipes |
are used to make tables. You can use colons :
to align the contents. There must be at least three dashes ---
to separate the headers
Eg
Mar |Air| Ned
:---|---|---:
100|150|200
Shows as the table below:
Mar | Air | Ned |
---|---|---|
100 | 150 | 200 |
Notice the alignment of 200 is aligned to the right as the:
is on the right. You can still use without :
and content would be auto-aligned.
Use <br>
to force line break.
The dogs were chasing me, and I had no choice but to scale the fence. The policemen were called, and I was arrested for breaking and entry into private property. I tried to plead with the policemen, but they said I would spend the night in jail.
<br>
The next day I was released but my wallet was lost while I was running. Thankfully, I found a driver that I paid with steem.
It would appear like this:
The dogs were chasing me, and I had no choice but to scale the fence. The policemen were called, and I was arrested for breaking and entry into private property. I tried to plead with the policemen, but they said I would spend the night in jail.
The next day I was released but my wallet was lost while I was running. Thankfully, I found a driver that I paid with steem.
Left Align
<div class="pull-left"><img src="https://steemitimages.com/DQmUCZ6R6J6gTxpwB1VJwWhEXwMj7rkw5hqtC78om1FsBdt/animal180.jpg" /></div>
This is a text to show you how it works. You could see the bird is aligned to the left.
Right Align
Just repeat the same thing for right by replacing left with right in pull-left, as shown below:
<div class="pull-right"><img src="https://steemitimages.com/DQmUCZ6R6J6gTxpwB1VJwWhEXwMj7rkw5hqtC78om1FsBdt/animal180.jpg" /></div>
This is a text to show you how it works. You could see the bird is aligned to the right.
Use this <center>Text to be centered here</center>.
Eg. <center>I want this text centered</center>
Appears as:
Use this <sup>Text here</sup>
to make your texts in superscript.
Example, <sup>I want this text to be in superscript </sup>.
You can see that this second sentence is normal.
Appears like this: I want this text to be in superscript . You can see that this second sentence is normal.
Image is from pixabay.com. Thanks for visiting my blog. See you next post.
very useful post for those in the steem community! This post is definitely being saved as one of my "toolkit" posts. The better knowledge there is in helping to format ones page is essential. Resteemed and upvoted! keep it up!
Thanks a lot. I'm glad to be of help.
Great info! Will definitely use this as a resource!
Thank you.
This is amazing
Thanks a lot
Nice tutorial.. Have taken note of all this... Thanx for sharing....resteemed
Oh. Thanks a lot.
This is a wonderful tool guild, nice work @bitfairy
Thanks a lot for stopping by.