How to Style Your Blog Post on Steemit Using Markdown

in #steemit7 years ago (edited)

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

Headers

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

Emphasis

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


Lists

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:

  1. Item 1
  2. Item 2
  3. Item 3
  4. 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

Links

[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.


Blockquotes

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



Horizontal Line

Use three underscore ___, hyphens ---, or asterisks ***
eg
``***``` gives a line


Tables

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:

MarAirNed
100150200

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.


Line Break

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.




Image Alignment

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.

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.

This is a text to show you how it works. You could see the bird is aligned to the right.





Text Alignment/Format


Use this <center>Text to be centered here</center>. Eg. <center>I want this text centered</center>
Appears as:

I want this text centered




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.

Sort:  

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.