Achievement 4 by @rebolegi Task: Applying Markdowns
It's a known fact that no matter how good your content is, majority readers will skim read it. So, in order to better engage your readers and encourage them to read more you'd need to better format your post, and here are some common Markdown codes to help you do that.
If you're interested in learning Steemit's Markdown in more details, you can enroll in a free course provided by @sumatranate.
TEXT
Start from the very basic, everyone should know how to style text: heading, bold, italic, paragraph, superscript, subscript, strike-through.
HEADING
Use the symbol #
before your heading text. There are 6 level of heading, note their sizes:
# This is heading 1
## This is heading 2
### This is heading 3
#### This is heading 4
##### This is heading 5
###### This is heading 6
OUTPUT
This is heading 1
This is heading 2
This is heading 3
This is heading 4
This is heading 5
This is heading 6
STYLING
Style | Syntax | Example | Output |
---|---|---|---|
Bold | ** ** or | **This is bold** | This is bold |
__ __ | __This is also bold__ | This is also bold | |
Italic | _ _ | _This is italic_ | This is italic |
Bold Italic | ___ ___ | ___Bold Italic___ | Bold Italic |
Strike-through | ~~ ~~ | ~~This is strike-through~~ | |
Subscript | <sub> </sub> | H<sub>2</sub>O | H2O |
Superscript | <sup> </sup> | X<sup>2</sup> + Y<sup>2</sup> | X2 + Y2 |
QUOTING TEXT
To quote use >
before the text/sentence/paragraph.
> “What surprises me most is “Man”... because he sacrifices his health in order to make money. Then he sacrifices money to recuperate his health. And then he is so anxious about the future that he doesn’t enjoy the present; The result being he doesn’t live in the present or the future; He lives as if he’s never going to die, and then he dies having never really lived.”
OUTPUT
“What surprises me most is “Man”... because he sacrifices his health in order to make money. Then he sacrifices money to recuperate his health. And then he is so anxious about the future that he doesn’t enjoy the present; The result being he doesn’t live in the present or the future; He lives as if he’s never going to die, and then he dies having never really lived.” Dalai Lama
TABLES
To create tables use -
and |
for row and column, see example below.
Header Column 1|Header Column 2|Header Column 3
---------------|---------------|---------------
Row 1 Column 1|Row 1 Column 2|Row 1 Column 3
Row 2 Column 1|Row 2 Column 2|Row 2 Column 3
OUTPUT
Header Column 1 | Header Column 2 | Header Column 3 |
---|---|---|
Row 1 Column 1 | Row 1 Column 2 | Row 1 Column 3 |
Row 2 Column 1 | Row 2 Column 2 | Row 2 Column 3 |
LAYOUT
Steemit editor also supports a very limited subset of HTML that can be mixed with Markdown syntax. There's a very good post, Steemit's HTML Whitelist by @snug if you want to read more about HTML in Steemit.
JUSTIFY TEXT
To justify paragraph:
<div class="text-justify">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed massa neque, cursus id maximus in, porta eget nibh. Donec eu semper purus. Etiam maximus ante in egestas accumsan. Fusce ac odio vehicula, rhoncus orci ac, varius sem. Nunc viverra, lacus lobortis gravida ultricies, mauris neque malesuada massa, ac mattis ex purus at mauris.
</div>
OUTPUT
WITHOUT JUSTIFY
Lorem ipsum mauris eu eros mollis ligula sodales tempus et et augue. Vestibulum eu turpis neque. Cras imperdiet arcu non nibh semper, non malesuada ante sagittis. In commodo, metus quis ullamcorper semper, diam turpis mollis ipsum, sollicitudin aliquam mi risus eu nibh. Mauris id leo ut nisi aliquet molestie. Sed fringilla odio ullamcorper tempus semper. Proin vel hendrerit lorem. Phasellus non nulla a augue posuere molestie. Nulla varius commodo aliquet. Vivamus eu dictum velit.
2 COLUMN TEXT
There are times when you want to display your text in 2 column format and here's how to achieve that with a little HTML code:
<div class="pull-right">
RIGHT COLUMN Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Sed massa neque, cursus id maximus in, porta eget nibh.
Donec eu semper purus. Etiam maximus ante in egestas accumsan.
</div>
LEFT COLUMN Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Sed massa neque, cursus id maximus in, porta eget nibh.
Donec eu semper purus. Etiam maximus ante in egestas accumsan.
OUTPUT
2 COLUMN TEXT WITH IMAGE
To place an image on the right column and text on the left:
<div class="pull-right">
https://cdn.steemitimages.com/DQmQr4YYHeVQabJkuMT9K1tjNzwJD2AjDdc8z3FnQWyW8a6/achievement4medium-min.jpg
</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed massa neque, cursus id maximus in, porta eget nibh. Donec eu semper purus. Etiam maximus ante in egestas accumsan.
OUTPUT
![](https://steemitimages.com/640x0/https://cdn.steemitimages.com/DQmQr4YYHeVQabJkuMT9K1tjNzwJD2AjDdc8z3FnQWyW8a6/achievement4medium-min.jpg)
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed massa neque, cursus id maximus in, porta eget nibh. Donec eu semper purus. Etiam maximus ante in egestas accumsan.
To place an image on the left column and text on the right:
<div class="pull-left">
https://cdn.steemitimages.com/DQmQr4YYHeVQabJkuMT9K1tjNzwJD2AjDdc8z3FnQWyW8a6/achievement4medium-min.jpg
</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed massa neque, cursus id maximus in, porta eget nibh. Donec eu semper purus. Etiam maximus ante in egestas accumsan.
OUTPUT
![](https://steemitimages.com/640x0/https://cdn.steemitimages.com/DQmQr4YYHeVQabJkuMT9K1tjNzwJD2AjDdc8z3FnQWyW8a6/achievement4medium-min.jpg)
Center an image
<center>https://cdn.steemitimages.com/DQmQr4YYHeVQabJkuMT9K1tjNzwJD2AjDdc8z3FnQWyW8a6/achievement4medium-min.jpg</center>
OUTPUT
![](https://steemitimages.com/640x0/https://cdn.steemitimages.com/DQmQr4YYHeVQabJkuMT9K1tjNzwJD2AjDdc8z3FnQWyW8a6/achievement4medium-min.jpg)
IMAGE
Image is important in your Steem post. The right image can help tell the story and makes your post look more appealing. There are 3 ways to place an image:
1.) URL – just place the URL of the image
https://cdn.steemitimages.com/DQmQr4YYHeVQabJkuMT9K1tjNzwJD2AjDdc8z3FnQWyW8a6/achievement4medium-min.jpg
OUTPUT
2.) Standardized Markdown Syntax
![descriptive text](full URL with http:// of https:// of image file)
![Achievemnt #4](https://cdn.steemitimages.com/DQmQr4YYHeVQabJkuMT9K1tjNzwJD2AjDdc8z3FnQWyW8a6/achievement4medium-min.jpg)
OUTPUT
3.) Standardized Markdown Syntax with optional TITLE
![descriptive text](full URL with http:// of https:// of image file "OPTIONAL TITLE")
![Achievemnt #4](https://cdn.steemitimages.com/DQmQr4YYHeVQabJkuMT9K1tjNzwJD2AjDdc8z3FnQWyW8a6/achievement4medium-min.jpg "ACHIEVEMENT 4 TITLE NOT DISPLAYED")
OUTPUT
VIDEO
Just like with images, videos could also be inserted in your post and it's as easy as placing the full URL of the video.
https://www.youtube.com/watch?v=v4qpf_Ch4Zo
So there you have it. I'm sure there are more markdown and acceptable HTML codes that I have not covered in this achievement post. That will be for another blog post later. Stay healthy everyone!💪
Achiement List:
Achievement #1
Achievement #2
Achievement #3
Reference:
Markdown Basic Syntax
Steemit's HTML Whitelist
Steem Markdown Training Module
verified, R2
Thank you.
c/upvote done via this post How Do I Get My Achievements Verified?