Achievement 4 by @rebolegi Task: Applying Markdowns

in hive-172186 •  3 years ago 

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

StyleSyntaxExampleOutput
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~~This is strike-through
Subscript<sub> </sub>H<sub>2</sub>OH2O
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 1Header Column 2Header Column 3
Row 1 Column 1Row 1 Column 2Row 1 Column 3
Row 2 Column 1Row 2 Column 2Row 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

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.

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

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



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

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

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.




Center an image

<center>https://cdn.steemitimages.com/DQmQr4YYHeVQabJkuMT9K1tjNzwJD2AjDdc8z3FnQWyW8a6/achievement4medium-min.jpg</center>

OUTPUT



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

Achievemnt #4


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

Achievemnt #4


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

Authors get paid when people like you upvote their post.
If you enjoyed what you read here, create your account today and start earning FREE STEEM!
Sort Order:  

verified, R2

Thank you.

c/upvote done via this post How Do I Get My Achievements Verified?