Achievement 4 : Applying Markdown

in Newcomers' Community2 years ago (edited)

Achievement 4 : Applying Markdown

Objectives of this task are:

  • Newcomers have basic Markdown skills.
  • Newcomers are able to use some advance markdown with the given markdown template.

A post needs to be nicely formatted to be able to be read easily.
Steemit supports Markdown and you can achieve an attractive result, by using basic syntax & easy to remember commands.
There are also tools that you can use as editors, such as

Below are the collections of basic markdown and some advance markdowns code/template that you can apply into your post for little variation on presentation of your post. These were compiled by @katerinaramm and the original post is here

Image Source


Headlines and sub-headlines are important elements as they show the structure of your post and guide the eye of the reader.

There are two ways to create a headline.

(a) You insert at the start of the row a # symbol. As the number of the hashtag symbol # increases, the headline size decreases.

For instance:

Headline 1

Headline 2

Headline 3

Headline 4

Headline 5
Headline 6

The above are created with this code:

# Headline 1
## Headline 2
### Headline 3
#### Headline 4
##### Headline 5
###### Headline 6

Tips for Headlines (only for H1 & H2)

Instead of adding the #, you can add your title and underneath three dashes or three times the equal sign.

This will be a headline 2

This will be a headline 1

Tip You can make the headline centered, italic, strikethrough as follows

  • centered headline # <center>Headline here</center>
  • italics headline #Headline`
  • Strike through #Headline& Headline


You can do a number of things with text. One thing you can do when writing an essay on steemit, is justify your text.

Justify Text

<div class="text-justify">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eget purus a tortor egestas placerat sit amet vitae sem. Nullam sit amet finibus justo. Donec volutpat ipsum leo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Suspendisse sit amet dignissim ante.

The Output will be

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eget purus a tortor egestas placerat sit amet vitae sem. Nullam sit amet finibus justo. Donec volutpat ipsum leo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

(without the justify command > )

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eget purus a tortor egestas placerat sit amet vitae sem. Nullam sit amet finibus justo. Donec volutpat ipsum leo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

Align text into two cells

Sometimes you may need to write something in two languages or input it in two different columns.

<div class="pull-right">
TEXT RIGHT Cras pellentesque, diam ut fringilla luctus, massa mauris fringilla magna, sed consequat mi odio in ante.
TEXT LEFT Cras pellentesque, diam ut fringilla luctus, massa mauris fringilla magna, sed consequat mi odio in ante.

TEXT RIGHT Cras pellentesque, diam ut fringilla luctus, massa mauris fringilla magna, sed consequat mi odio in ante.
TEXT LEFT Cras pellentesque, diam ut fringilla luctus, massa mauris fringilla magna, sed consequat mi odio in ante.

How to center text

You will need to add the <center> text here </center> to align text

How to add Subscript

You can use the <sub> text or number here </sub> to make a text or number appear below the baseline.
H<sub>2</sub>O has as output the H2O

You can also use subscript to write a note in between a text or under a photo / video

How to add SuperScript

You can use the <sup> command for a text to appar above the baseline

A reference goes here<sup>1</sup> has as output >> A reference goes here1

Tip: You can add a clickable link

A reference goes here<sup>[1](</sup> has as output >> A reference goes here1


Adding links in our posts is very useful and we often need to do it numerous times.

  • When we add a steemit username, along with its @, the name becomes clickable (leading to the steemit blog page) i.e. @katerinaramm
  • When we add a link, it is automatically recognized and is clickable i.e. > >
  • We can hide a link in a word or phrase, using the below syntax
    [this will be an inline link]( transforms to >>
    This will be an inline link


You can create a table in two ways

Easy way to create a table

Copy and paste the below and add as many headers and cells you need.

Header 1 | Header 2
--------- | ----------
Cell 1 | Cell 2

Will have the output >>

Header 1Header 2
Cell 1Cell 2

Create a table using html

An HTML table is defined with the <table> tag.

Each table row is defined with the <tr> tag. A table header is defined with the <th> tag. By default, table headings are bold and centered. A table data/cell is defined with the <td> tag. source

<th> header 1 </th> <th> header 2 </th>
<td> cell 1 </td> <td> cell 2 </td>
<td> cell 3 </td> <td> cell 4</td>

The output of the above code will be

header 1 header 2
cell 1 cell 2
cell 3 cell 4


  • You can add cells by adding <td> and </td> and the in between syntax
  • You can add extra rows by adding <tr>&</tr>
  • If you wish to add an inline link you need to use the <a href="link">title</a>
  • If you use inline images, make sure that they have correct and similar dimensions, so that they can look orderly put.
  • You can use inline commands such as center, headlines, etc.


Adding Code in a post is sometimes necessary, it works in the below two ways:

a. Adding one back-tick (`) before and one after the markdown syntax

**using bold syntax** >> using bold syntax

or b. you can use <code> before and after the command </code> at the end of the word/sentence

<code> *hello* </code> output will be >> hello

You can read more info here

Quotes - Blockquotes

We often need to write a quote, a phrase that someone said or wrote.
That is when we use the > in front of the sentence

Blockquotes with > for something that someone has written/said

> “Any fool can know. The point is to understand.”
― Albert Einstein

“Any fool can know. The point is to understand.”
― Albert Einstein

Line Break

There are sometimes that we need an extra line break between text.
We can use the <br> to include an extra line space


We often need to insert videos or gifs in our posts.

YouTube videos are instantly embedded, so if you put a link it appear in text. If in any way it interferes with text or images, you can put ruler before and after it.

Gifs are also embeddable, just put the link and you can even center them with the <center> command

Tip: You need to find the url that finishes in .gif

DTube can be embedded but requires some more time than YouTube.

Scenario a: When you upload a dtube video, it automatically is embedded in your steemit post.
It also shows the link to the youtube video and to the screenshot.
For instance:


These are both the links we will need + use (the dtube link and screenshot used)

If you already have the above information, you can upload the video using this code:

<center><a href='!/v/thetroublenotes/ap0ofmc6'><img src=''></a></center>

Scenario B You do not have a steemit link where the dtube video is located, but you do have the dtube link.

You right click on the video and click on 'save snapshot' After you select folder, you upload it as a normal photo on steemit and you insert the following code (similar as above)

<center><a href='!/v/thetroublenotes/ap0ofmc6'><img src=''></a></center>

the output will be

ps The positive with this way is that you can select your own favorite shot!


If you wish to separate a theme you can upload a ruler or you can use at the beginning of the line 3 dashes, 3 stars or 3 equal signs

--- or *** or ===


How to align images

You can align your images at the center, at the left or right side.

Align left

<div class="pull-left">
text below

This is the output of the above syntax.
If you align the image to the left, the text will go to the right
This will also reduce the image's dimensions by 1/2
More text can go here
And more
And more...

Align right

<div class="pull-right">
text below

This is the output of the above syntax.
If you align the image to the right, the text will go to the left
This will also reduce the image's dimensions by 1/2
More text can go here
And more
And more... ----

Align center


This is the output of center alignment, the image dimension does not change

A simple and elegant way to insert link + caption under the aligned image

(with the help of @mobbs & @noble-noah)

<div class="pull-left"><center><sub><a href="">LINK NAME</a></sub></center></div>


and some text goes here

and some more

How can I make my image clickable (to open into a new, bigger version of my image?)

STEP 1. You upload both images (big + small dimension)



STEP 2. You remove the ![text](and the last parenthesis )

STEP 3. You add the code as:

<center><a href=""><img src=""></a></center>

The below will be the result

How to scale down an image on steemit

It is usually best if you have resized your image before you upload it on stemit. However sometimes we have no time or it is not possible. That is when you can resize it directly on steemit.

STEP 1. You upload the image
The code will look like this


STEP 2. You leave only the main image (without the alt text and the parenthesis)

STEP 3: You copy the and add to it /0x0/ so it will become

STEP 4. You paste it on the start point of your photo so that it will look like this

STEP 5. You are ready to reduce your image! Input the number of pixels you want in the first or the second 0 place holder. This will result to a scale down of the image in the desired dimensions.


This image has a dimension of 3200 x 1470

This image has a height of 600

This image has a width of 100

Note Copyright is very important when it comes to images. If you are unsure about which images to use and how to find the best ones, click here


Sometimes we see something on a post and we wonder .. How did he do it!?
It is possible to see the code in every steemit post, all we need to do is replace the (it) with (d) in the url.

For instance my post:
would become

If you replace it with d you see this image:


You can click the three dots to open the whole text and see the code.

Addition by @mathowl (thanks!)

If you see some kind of layout in a post and have no idea how to replicate it then you can just access the webpage source in your browser (right mouse click on webpage -> view page source or inspect element) and copy paste what you need :)

Use this wisely!

Extra Bonus Compilation of Markdown Templates:

Check out this post on markdown templates that you can use for your post on music, poetry, photography, recipe and fiction story Markdowns Templates Compilation

Task for Achievement 4: Applying Markdowns

Create content by applying at least 5 types of markdown provided in the above section.

The title of your post should be "Achievement 4 by @youraccountname Task : Applying Markdowns"

Please put the name of the country where you currently residing as one of your tag and this achievement tag #achievement4

We looking forward to your markdown post.


This is a publication that never goes out of style and is ideal for those who are starting to publish. Although it may seem a little difficult at first, with practice it becomes easy and even fun. Thank you for this publication!

Hi @nancybriti yes agree with you, I actually just use some of them on my post, applying them on our post actually fun as you said. Glad this post helps 😊

 last year 

Very well described in simple terms, understood clearly

 2 years ago (edited)

I found at least a couple typographical errors in this tutorial, such as where it says "/center>center>" instead of just "/center>". (There were open brackets before these, but if I included them, steemit would interpret them rather than showing them.)

Thank you, though, for the informative post. I enjoyed doing this achievement.

Hi @jeffbradt Happy New Year to you and family! Thank you for pointing that out, I will edit it shortly. Great that you enjoy this task series. See you around more!

 2 years ago (edited)

This is super cool @cryptokannon. My new recruits will learn a lot from it. Resteemed

Nice! Glad it helps. Don't forget to tell your recruits about our Pro Minnow Program and Steem Greet community here 😃

Thanks @cryptokannon. I have been on Steemit since 2018. Although I left about 5 months ago, I was not fully here. Am I expected to also do the Pro Minnow program?

@focusnow I think you have sufficient knowledge of how steem works already and don't need for the Pro Minnow Program. We appreciate it if you could help spread the words about this program to the people that you bring into steemit and we also have a program for existing steemian that have been in steem for over 6 months but their all-time author rewards still below 500SP, you can check this with the tools


Details about the 500SP Minnowsupport Program

We will think of how to compensate you based on how many newusers you can bring into the program. Thank you.

@cryptokannon. I am not just going to bring in many ordinary users, I will bring in people that will make small investments on this platform. I originally planned to do that on Hive, but there was zero support. So I decided to come back to the platform I left few months ago. The organization and newbie support I saw here in the last few days is phenomenal. So my small group of friends started signing up yesterday. I have forwarded to them the achievement posts from achievement 1 to 4. I also reblogged them to my page. I will follow up their training in our WhatsApp group. I will set a target to onboard 7 persons each week. Whatever support we will get from you in the future to build our community here will be appreciated. I will be messaging you about our progress through discord. Thanks

 2 years ago 

Wow! I would really love to be part of this

 2 years ago (edited)

@cryptokannon Hello, pls how do i check my authur reward

Hi @izraelinspired you can check here with this tool
scroll down to post and click on any of the active posts then see "summary" tab.

 2 years ago 

Ok thanks.

 2 years ago 

This details are really useful. I was wondering how to edit some parts when I write articles in steemit. Thank you very much @cryptokannon guiding us to be more creative 😊🙏

 last year 

Saludos @criptokannon aca mi logro 4.


Omg, this is very informative and useful for me... Thank you very much

 2 years ago (edited)

This the most relevant post i've ever seen
Thanks @cryptokannon.
I @bright-obias would like to apply for the steem greeters support"
Below is the application link 👇

wow that's great

Very useful your publication! I have 3 years on the platform and I still have to learn a lot. Thanks for taking the time to share this laborious post.👍

A thorough expose on the use of Markdowns for maximum impact on steemit. But I am yet to understand most as explained, this I would continue to study and attempt to apply them as often as possible to engender mastery.

Thanks indeed @cryptokannon for this all important teaching!

Hey @whyaskwhy spiderman glad it helps 😊

 2 years ago (edited)

Thanks so much for designing all this. It's a great detailed post about markdown editors. Its very useful information for the newbies and the rest of the steemians.

Those were compilations of our steemian post on markdowns from before and I compile them all in this one post so steemian can easier come back to this post when they need to try some extra new markdown on their post

This is awesome @cryptokannon. This is a very powerful platform that will help many newbies to grow here and achieve a lot. You're doing wonderful @cryptokannon

 2 years ago 

Hi @cryptokannon. I made my Introductory post 2 days ago and I haven't been verified.

Should I still go ahead with making other achievement posts. I made sure I did everything you asked before making the post.

Thank you very much as you visit my post: Achievement 1

How can I use this to promote receive verification code online

This is such a useful information, thanks!

How i wish i know this platform since before now, i learn alot from you and also be rewarded and earn ,with guidance, i never see any platform like steem, i will also promote this great oppurtunity to my farmily members, friends, and other, in order not to losse any.

 2 years ago 

@cryptokannon, thank you for compiling all these assignments. Right away, i am on mine.
But i have done my achievement 3 since 4days now, it has not been voted.
Here is my achievement 3 entry

 2 years ago 

This was very helpful and has boost my steemit ability

 2 years ago 

@cryptokannon and @steemcurator01, my i have done my achievement 4 since 5 days ago and it has not been voted on. It will expire in 2 days time, please look into it.

This is my link.

 2 years ago 

I love this markdown guide..!
Well done @cryptokannon..!

Thanks for the compilation of all the Markdown commands.
Just bookmarked that post.


Upvote & resteem

We have just created a new community we are from Pakistan. The place where we used to work earlier never told us about any of these achievements but we are glad to see these now. This will definitely help us all to improve our posts and grab your attention :)
Thanks a lot for this :)



About to do this one, thinking of maybe using text from something I posted on Facebook, or maybe an old blog about Steemit.

This is awesome. Thanks for the heads up. Once I get back to writing blogs, i'll for sure use this as a reference!

Nice glad it helps. Looking forward to your writings 😊

 2 years ago 

This post is most advance and helpful to us. Thanks
I will post for my achievement 4 In a short time.
Hope you are all support me...
Thanks for the post ⛄⛄

 2 years ago 

I posted my achievement 4 task, 5days ago. But there was no response from any curator. I Don't know what's the problem. Please check this @cryptokannon

 2 years ago 

Very clear and so helpful ❤️👊☺️

 2 years ago 


 2 years ago 

Muy útil esta información, gracias por suministrarla, seria bueno que también la publiquen en español!

This formatting is quite complicated... adding images is so easy, but the formatting of text and the looks has too much options and if you are not used in this kind of formatting it just becomes a hazle to do.

@mycryptostalker hi yes it's a little bit hard and such a hassle at the beginning, but once you look into it and try putting some on your post, it's not that difficult actually once you getting used to it. There are the ready-made template for each niche too that you can just copy/paste and add in your own contents.
For a post on music, poetry, photography, recipe, and fiction story Markdowns Templates Compilation

This is so long but I will have to come back to it often...😉

its very helpful for new comers

 2 years ago 

This achievement seems a little challenging, but as always.....I'm up for it😁😁🥰🥰! Let's begin

 2 years ago 

Gracias por todo el apoyo brindado y el material facilitado para dicho aprendizaje. Aquí el Logro 4

 2 years ago 

Saludos a la comunidad, acá les tengo mi logro 4... espero que les guste

 2 years ago 

I may have forgot to post the link to my achievement 4 attempt, so forgive me please if I am leaving links everywhere:

 2 years ago 

buen día aquí les dejo mi entrada de mi Logro 4

 2 years ago 

Hola amigos, espero todos esteen bien, aqui les dejo mi ." LOGRO4

 2 years ago 


I composed this in my blog so I could see the formatting and it got posted only to the #usa hashtag. Normally I compose my documents in Word and copy and paste them. Is there a better way so I can easily see the formatting as I type and also post in multiple places?



#usa #achievement4

 2 years ago 

Oh no, my Achievement 3 verified tag isn't even showing ... I feel underdressed. :)

 2 years ago 

I noticed that none of my achievement task posts so far have been visited

This helps a lot! Thank you so much @cryptokannon

 2 years ago 
 2 years ago 

Hola administradores de steemit aquí les envío mi logro 4 espero que haya cumplido con las especificaciones dadas para esta tarea

 2 years ago 

Hello @cryptokannon, aquí esta mi publicación, ¡Saludos!

 2 years ago 

Saludos aquí Mi logro 4

 2 years ago 

Thank you very much we find these to be very useful and I’m extremely enjoying it here.

 2 years ago 

Thank you very much, this was, it's still, and will continue to be very useful.
My brain just got opened 😁

 2 years ago (edited)
 2 years ago 

The application at the first sight is not that easy but I believe I will be good in it às time goes on.

 2 years ago 

thanks for this @cryptokannon have gone thru it successfully and have learnt much on the mardowns
here is my achievement post

 2 years ago 

This is very educative and is grateful. Here is my entry for achievement4 post

But I have realized that none of my achievement posts so far have been visit

 2 years ago 
 2 years ago 

Thank you very much for this task. Please this is my entry

 2 years ago 

Thanks very much for educational teachings @cryptokannon,indeed I have really learned just too much .God will bless you for me🙏 is my entry for my own achievement4 task👇

 2 years ago 

Thanks for the heads up on these markdown styles. I will begin using them ASAP

I am enjoying this already so much that I am testing it on my comment section to be sure it works. My posts will be cooler now than ever before
Thanks. -Wonderful
 2 years ago 

excelente publicacion,desde que comense hacer mis post siempre tuve la duda de como disminuir el tamaño de las imágenes y otras dudas mas . agradecida de que cada día y a través de ustedes pueda aprender cosas nuevas.

 2 years ago 

Hola.. gracias por tan buena informacion me ayudo mucho a mejorar mi post, aqui les dejo mi logro 4. Saludos.

 2 years ago 

Here is my achievement task 4 entry
Achievement 4 by @olyorji Task : Applying Markdowns

Very useful information.

Thank you

The Steemit Team

Thank you for putting out to the top for more exposure 😊

 last year 

Thank you @cryptokannon to
guiding us .
it is a beautiful guideline from you to Newcomers.
they will improve their (html) posting skills on steemit.

 last year 
 2 years ago 

Thank you @cryptokannon
This is great support!
Steemit is a whole university.
Happy and long life.

I just helping to put all previous steemian post on markdowns under this one post so everyone can just refer back to this post when they need to step up their game on their post-presentation 😊

 last year 

¡Saludos! Aquí dejo el enlace de mi logro número 4

 last year 

Achievement 4 by @rexgeorge Task: Applying markdowns
Above is my achievement 4 post, @crytokannon please review

 last year 

Thank you for this wonderful lesson. Below is my achievement 4 on Steemit.

 last year 

BIG thanks From Me.. @cryptokannon

 last year 

Este es mi Logro 4¡¡¡

@akcares, where is the link. It is not here

Coin Marketplace

STEEM 0.18
TRX 0.05
JST 0.022
BTC 16531.96
ETH 1212.15
USDT 1.00
SBD 2.21