![Img-1638416254345.png](https://steemitimages.com/640x0/https://cdn.steemitimages.com/DQmatX65Q4tjJTjq8XwjaNmAWVeU8yaSpR4z5JRMdrfcBA5/Img-1638416254345.png)
![](https://steemitimages.com/640x0/https://i.imgur.com/E9ymaq8.png)
Let's start with a simple definition
"Markdown is a lightweight markup language that you can use to add formatting elements to plaintext documents. Created by John Gruber in 2004, Markdown is now one of the world’s most popular markup languages" source
![](https://steemitimages.com/640x0/https://i.imgur.com/yFgf4yG.png)
On this post, I will be sharing with you my favourite markdowns
SN | Markdowns |
---|---|
1. | Superscript |
2. | Subscript |
3. | Inline embedded citation |
4. | Clickable images |
5. | Sizing images |
6. | Showing the code |
7. | Nested lists and of course |
8. | Table |
![](https://steemitimages.com/640x0/https://i.imgur.com/yFgf4yG.png)
Superscript
A superscript is a written form where the alphabet(s) or value is written higher than those around it
H<sup>2</sup>O
This will appear as
H2O
![](https://steemitimages.com/640x0/https://i.imgur.com/yFgf4yG.png)
Subscript
A subscript is a written form where the alphabet(s) or value is written lower than those around it
C0<sub>2</sub>
This will appear as
C02
![](https://steemitimages.com/640x0/https://i.imgur.com/yFgf4yG.png)
Embedded inline citation
An embedded inline citation is one where the source link is not written as a link such as https:/hhj...
instead the link is within a text in a sentence.
Cryptokannon has posted an impressive writeup for the [Achievement 4: Applying Markdown](https://steemit.com/hive 172186/@cryptokannon/achievement-4-mentor-by-cryptokannon-applying-markdown) task. Katerinaramm post on [How To Use Markdown Style](https://steemit.com/steemithelp/@katerinaramm/how-to-use-mark-down-style-for-an-appealing-easy-to-read-post-in-steemit) was a major influence for this post.
The above will look like this
Cryptokannon has posted an impressive writeup for the Achievement 4: Applying Markdown task. Katerinaramm post on How To Use Markdown Style was a major influence for this post.
![](https://steemitimages.com/640x0/https://i.imgur.com/yFgf4yG.png)
Clickable images
Clickable images are my favourite. I really wanted to understand this and so I did a lot of research, practice and more practice so this particular markdown is useful to all who come across this work. It all starts with a little code
<ahref="https://steemit.com/hive-172186/@hilarysmartt/achievement-4-by-hilarysmartt-task-applying-markdowns"><img src="https://cdn.steemitimages.com/DQmatX65Q4tjJTjq8XwjaNmAWVeU8yaSpR4z5JRMdrfcBA5/Img-1638416254345.png "></a>
In this code, the first link is of the site from which you got the picture and the second is the image's link.
To get the image's link, upload the image to your blog editor, then copy the link within the parenthesis ( )
. *ps, be careful with spaces in your code, it gets tricky and you could break it.
![](https://steemitimages.com/640x0/https://i.imgur.com/yFgf4yG.png)
Sizing images
Sizing your image involves pasting the code https://steemitimages.com/0x0/
in front of your image's link. By changing the values within the 0×0
field, you are changing the h×w
ie hieght by width.
![](https://steemitimages.com/640x0/https://i.imgur.com/yFgf4yG.png)
Showing the code
By placing your content within the back-tick symbol or using the html tag for code, the code is seen. You can show your code in 2 ways
- In line
I am coming `home` to say hi.
This comes back as
I am coming home
to say hi.
- As a group
For a block of code, you put three back-ticks before and after your content.
Another fine way to show your code is to put your content within <code> something </code>
![](https://steemitimages.com/640x0/https://i.imgur.com/yFgf4yG.png)
Nested list
You can create a list in 2 ways by
* Tea
Or
1. Coffee
The above will come out as
- Tea
Or
- Coffee
To create nested list
* hey
* hi
* hello
This comes back as
- hey
- hi
- hello
- hi
![](https://steemitimages.com/640x0/https://i.imgur.com/yFgf4yG.png)
Tables
A|a
---|---|
T|t
Q|q
The above changes to
A | a |
---|---|
T | t |
Q | q |
![](https://steemitimages.com/640x0/https://i.imgur.com/yFgf4yG.png)
A little bonus is the <div>
tag. Steemit uses the HTML language, and just like other HTML docs, this tag is used to define a section in a post. 3 heavily used commands with the "div" tag are
- justify
- pull right
- pull left
<div class="text-justify">
Justify gives all the lines in the section it is applied to, a uniform look.
<div>
The above will look like this
Justify stretches each line of text in the section it is applied to. This gives all the lines in the section it is applied to a uniform look.
<div class="pull-right">
Pull-right drags each line of text in the section it is applied to, to the right. It can be applied to any kind of content - images, texts, etc
</div>
<div class="pull-left">
Pull-left drags each line of text in the section it is applied to, to the left. It can be applied to any kind of content - images, texts, etc
</div>
The above will like this
Before I end this post I want to give a shout out to @cryptosharon who created the creative horizontal rulers I have been using and hope to continue using. Check out her post on these here.
Merry Christmas in advance everybody, till next time ✌️
My
Achievement 3
Achievement 2
Achievement 1
![](https://steemitimages.com/640x0/https://i.imgur.com/E9ymaq8.png)
Hey @hilarysmartt, this is Aniqa Mashkoor one of the greeter helpers.
You have successfully completed your achievement 4 and now you can head towards completion of achievement 5. Please read and understand it first Achievement 5: Understanding The Steem Tools
Task Rate: 03
Remember that achievement 5 has 4 tasks and you have to make separate posts each for . And each task must be posted in Newcomers' Community. Get ready for a hands-on- experience of steemit tools.
Check out these beginner-level introductory courses to help you more in Steemit Crypto Academy Update [ November 11th, 2021 ] - Season 5
HAPPY STEEMING :)
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit
I appreciate this verification @aniqamashkoor, at a point i was thinking my post will go on seen because of the wait time, im happy you did, i will move to the next task
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit
Hi, @hilarysmartt,
Your post has been supported by @dilchamo from the Steem Greeter Team.
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit
Thank you very much
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit