How to Use Mark Down Style for an Appealing – Easy to Read Post in Steemit.

4년 전

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, if you use one of them please comment below. I personally prefer to use raw html syntax (for some reason I find it easier)

In the next days I will post tips about formatting a post, my part three from ‘What to Post, How to Research, Synthesis of a Blog Spot), so I thought I should also include in advance a mark down guide with the most important commands I have been using for you that might not know them all.

Ξεκινάμε! Los geht’s! Let’s start!

Click On Post

*You have the option to click the ‘Editor’ or leave as is ‘Raw Html’

In the below section we will show commands to be directly written in the post box (NO EDITOR)*


TEXT Commands

Headlines

You can put # on the left of your word/sentence to make it a headline. As the # number is increasing, the headline size decreases.

# Headline 1

Headline 1

.
.


#### Headline 4

Headline 4

.
.
###### Headline 6

Headline 6

Text

Your text can be simple, **bold** bold, *italics*italics, ~~strikethrough~~ strikethrough

List

You can use *or numbers to create a list

  • list item 1
  • list item 2
  1. Item A
  2. Item B

You can create a table!

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

Header 1Header 2
Cell 1Cell 2

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

  • 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. Suspendisse sit amet dignissim ante.

  • Instead of


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.

Allign 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. Etiam quis odio in ante sagittis congue. Duis a ante egestas, pharetra nisl non, lacinia massa. Vestibulum ut mattis enim. Nam scelerisque iaculis sem in lacinia. Phasellus dui dui, pellentesque ac dui ac, rhoncus tempor tellus.
</div>
TEXT LEFT Cras pellentesque, diam ut fringilla luctus, massa mauris fringilla magna, sed consequat mi odio in ante. Etiam quis odio in ante sagittis congue. Duis a ante egestas, pharetra nisl non, lacinia massa. Vestibulum ut mattis enim. Nam scelerisque iaculis sem in lacinia. Phasellus dui dui, pellentesque ac dui ac, rhoncus tempor tellus.


TEXT RIGHT Cras pellentesque, diam ut fringilla luctus, massa mauris fringilla magna, sed consequat mi odio in ante. Etiam quis odio in ante sagittis congue. Duis a ante egestas, pharetra nisl non, lacinia massa. Vestibulum ut mattis enim. Nam scelerisque iaculis sem in lacinia. Phasellus dui dui, pellentesque ac dui ac, rhoncus tempor tellus.
TEXT LEFT Cras pellentesque, diam ut fringilla luctus, massa mauris fringilla magna, sed consequat mi odio in ante. Etiam quis odio in ante sagittis congue. Duis a ante egestas, pharetra nisl non, lacinia massa. Vestibulum ut mattis enim. Nam scelerisque iaculis sem in lacinia. Phasellus dui dui, pellentesque ac dui ac, rhoncus tempor tellus.

You put your text in the center

<center>Text</center>

Text

Subscript Text

<sub>Text</sub>

Text

Add a Link

If you add any link, it will immediately be clickable but if you wish to add a link to a word you can use the below syntax
[Link Title](Link)
[I am a Link](https://steemit.com/@katerinaramm)
I am a Link

Blockquotes with > for something that someone has written/said

> I am a quote by someone famous

I am a quote by someone famous

Separate your themes - paragraphs with an easy-to-make rule

If you use three or more hyphens, asteriscs, or underscores a horizontal rule will be created

--- or *** or ___


Adding Code (text in a grey area with possibility of having commands not affecting the text inside)

You can check here

And I have found it to work in two ways:

a. Adding two back-ticks before and after the markdown syntax

**this is a bold word** - output - this is a bold word

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

<code> > goodmorning </code> output will be >>>>>>

goodmorning


Images

In order to add an image all you got to do is (a) have the image :) and (b) drag and drop it in the editor
You can put the image in the center by putting the <center>Image</center> or you can put it inline with text, on the right or left

The order for left is as follows

Attention, you take only the last part of the image > see below

<div class="pull-left">
https://steemitimages.com/DQmSCQFPwCSaHawE7fgQtKpidX9yE4tnmjJ5U1P9DamK58M/bb2.jpg
</div>
text below

Cras pellentesque, diam ut fringilla luctus, massa mauris fringilla magna, sed consequat mi odio in ante. Etiam quis odio in ante sagittis congue. Duis a ante egestas, pharetra nisl non, lacinia massa. Vestibulum ut mattis enim. Nam scelerisque iaculis sem in lacinia. Phasellus dui dui, pellentesque ac dui ac, rhoncus tempor tellus.

If you would like the image to be alligned to the right simply replace left with right

You may also put links to images and align them next to each other - use it in text or in your signature


<center>[![alt text](https://steemitimages.com/DQmPuDai3nhKJTQSdH3GypirCFK3v5pJQR5VM8TNCWc9HgR/steem1.jpg)](https://steemit.com/@katerinaramm) [![alt text](https://steemitimages.com/DQmPBXyzCxzKDNj9iGLfMMtVNaYGgWg1b36h7XUedX2JWzF/twitter1.jpg)](https://twitter.com/katerinaramm1) [![alt text](https://steemitimages.com/DQmRo1wZ7Thg8WSH1gVMhG3yXA1wTBMPTdcpMQ6psjBnMUK/facebook1.jpg)](https://www.facebook.com/KaterinaRamm-876468415833984/) [![alt text](https://steemitimages.com/DQmSizippiMhQ9NBVK75NafrgRQM8fXDPn7MBqTCCxKBn1f/instagram1.jpg)](https://www.instagram.com/katerinaramm1/)</center>

Output

alt text alt text alt text alt text

Insert Gifs

You just copy paste the gif's address as below.
You may even put the gif in the center, or justify with the <div class="pull-left">GIF</div>command

<center>https://media.giphy.com/media/tQcR4ZFWypsA0/giphy.gif</center>

YouTube or DTube Videos

You can simply copy paste the DTube or YouTube Link and it will be embedded in the text!

More Links for Markdown
Guide github.com
Markdown Cheatsheet
Emoticons You may use

233.jpg

Thank You for visiting! Please comment below and feel free to ask or add if something is useful for you and left out from my side so that I can add it!

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!
STEEMKR.COM IS SPONSORED BY
ADVERTISEMENT
Sort Order:  trending

Cool, i am commenting to find this beautiful post back when needed, following for more, thanks. I have one question left, how did you put <div, ** etc without effect? The samples with the light gray background.

·

Hi bubke, thank you so much for asking .. I will edit the post and update this. Actually I was thinking that this one was missing, so it is a good opportunity to add it!

You can check here

And I have found it to work in two ways:

a. Adding two back-ticks before and after the markdown syntax

**this is a bold word** - output - this is a bold word

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

<code> > goodmorning </code> output will be >>>>>>

goodmorning

Thanks again and all the best!

This is an extremely good and resourceful article many will learn from, even the seasoned veterans of the Steemian world!

Thank you so very much for such a clear and straightforward to educational post. It is very much appreciated and will upvote, resteem and share this one.

Namaste :)

·

Thank You Eric for enjoying it :) I had to search for somethings every time, so I though I should include everything I use in one post (for my and possible other peoples' convenience)
Have a great weekend!

·
·

Definitely for everyone's convenience and pleasure, efficiency and peace of mind! Thanks again @katerinaramm!

Namaste :)

Κατερίνα όπως πάντα ουσιαστική έχεις ένα προσόν αξεπέραστο. Μπράβο σου.

·

Ευχαριστώ θερμά για το σχόλιό σου :)

OMG, this is so helpful! I just edited my getting started on steemit post to point to this markdown post instead of the other one! Thanks for bringing it to my attention.

·

Your guide is fantastic, I have shared it already with someone who is on their way to steemit (just waiting the activation)! It shows that you took a great amount of time to research and put everything together.
There is so much to learn here, I am always surprised with what's going on and all the new things. I just need more time : )

Thank you again, you are doing great here! Keep it up!

Exceptionally useful post. Bravo Katerina!

PS. Μολις συνηδειτοποιησα οτι σε ειχα κανει unfollow (μαλλον μεσω κινητου που παταω οτι να'ναι) για αυτο και δεν εβρισκα τα post σου τελευταια. Εκανα follow ξανα! Ελπιζω να μην μου εχεις θυμωσει ;)

·

Εννοείται ότι σου θύμωσα, σε έκανα κι εγώ unfollow και είδα πριν ότι πέραν του unfollow μου έκανες και μιουτ!!
Ατιμη Τζίνα, τίποτα δε σου ξεφεύγει! χαχαχαχα
Νόμιζα ότι είχε γίνει εσκεμμένα και σε είχα κάνει κι εγώ unfollow .. Τώρα θα σε κάνω follow αφού πρώτα σε κάνω μιουτ και ανμιουτ...
Είμαι Τοξότης, δεν ξεχνάω :P
Ευχαριστώ πολύ :)

·
·

Κλαιω 😂😂😂😂

Εχει παθει το ιδιο και η Ρουθ αλλα ακομα και η αδερφη μου, πιστεψε με δεν γινεται εσκεμμενα. Στο Filota αντι για "Αγαπω το αρθρο" ειχα γραψει σε "γα$$"...Μαλλον πρεπει να σταματησω να μπαινω απο το κινητο 😂😂😂

·
·
·

Εγώ εσκεμμένα δεν έχω ακόμα κάνει log-in από κινητό γιατί θα πάει μείον το Voting Power και δε θα ξεκολλάω! χαχαχαχα

This is very helpful, thanks @katerinaramm

Helpful information all around! A lot of things I didn’t know about

This is super duper clear and deserves a resteem! Good going madame!

·

Thank you so much, it is dearly appreciated :)

παει to vp μου πέθανε, θα το αφησω σκ να ξεκουραστει, έφερα το δεύτερο λογαριασμό να βοηθήσει λιγο XD

·

Μιλάς κι εσύ για το VP σου που είναι στο 60-70 .. Το δικό μου καταφέρνω και φτάνει 40 και έχω δει κι έναν κοινό μας φίλο που όλο στον 9 τον βρίσκω :P
Καλό ΣΚ φίλε μου

·
·

Για αυτό το ξεκουράζω γιατί αλλιώς θα πάει στο 40 και μετα στο 0 😂😂🤣🤣

Just discovered a goldmine here :)
A very educational and resourceful post, thanks for sharing and keep it up dear.

Γεια σου Κατερίνα . Σήμερα αξιώθηκα να το διαβάσω..Πραγματικά έχω έλλειψη χρόνου. Το έβαλα στη λίστα με τα αγαπημένα μου που αφορούν το steemit γιατί θα με βοηθάει στη σύνταξη μιας και με τις 'εντολές' δυσκολευόμουν.. Αν έχεις και κάποια συμβουλή για διαμόρφωση μεγέθους φωτογραφίας θα ήταν επίσης χρήσιμη. Ευχαριστώ θερμά . Καλή συνέχεια.

·

Γεια σου και ευχαριστώ θερμά για το σχόλιό σου!
Δυστυχώς για αλλαγές στο μέγεθος φωτογραφίας δεν υπάρχει τίποτα, μπορείς μόνο να επέμβεις πριν να εισάγεις τη φωτογραφία στη δημοσίευση.
Μήπως όμως εννοείς κάτι άλλο; Αν θέλεις δώσε μου ένα παράδειγμα του τι θα ήθελες να κάνεις για να βρούμε λύση και αν χρειάζεται να το προσθέσουμε στον οδηγό.
Μέχρι τώρα έχω κάνει 3 προσθήκες στο αρχικό κείμενο λόγω ερωτήσεων που μου έκαναν :) και έχω περιθώριο για αλλαγές άλλες 4 ημέρες μέχρι το payout

·
·

Εννοώ αν μπορείς να κάνεις κάποια προσθήκη π.χ. 600χ400 ,στον αλγόριθμο που βγάζει όταν εισάγεις φωτογραφία ώστε να αλλάξεις το μέγεθός της . Σε ευχαριστώ για το χρόνο σου .

·
·
·

Το έψαξα λίγο και κάποιες εντολές που παλαιότερα δούλευαν, τις δοκίμασα και δε δουλευουν τώρα. (Τις είδα σε δημοσιεύσεις ενός έτους πριν)
Αν χρησιμοποιήσεις το <div class="pull-left">photo</div> η φωτογραφία μειώνεται στο μισό, αλλά πάει στη δεξιά ή αριστερή μεριά.
Αν βρω κάτι στο μέλλον θα το ανεβάσω!

·
·
·
·

Σε ευχαριστώ και πάλι !

·
·
·
·
·

Βρήκα πως γίνεται αυτό που έψαχνες! Το έχω γράψει αναλυτικά εδώ > https://steemit.com/steemit/@katerinaramm/markdown-guide-ii-extra-questions-bonus-tip-to-find-the-formatting-of-any-post
(κανε σκρολλ, ειναι το 3ο τιπ στη σειρά)

Ουσιαστικά αφαιρείς τα περιττά απο τη φωτο, προσθέτεις στην αρχή της το https://steemitimages.com/0x0/

Επειτα πειράζεις όποιο από τα δύο μηδενικά θέλεις, και αυτό μικραίνει τη φωτογραφία χωρίς να τη χαλάει (ή στρετσάρει)

Π.χ.

EXAMPLE

This image has a dimension of 1680 x 945

https://steemitimages.com/DQmcYcCSdbUoQDPz53BkHdkidUJ53x54Aorp7GbBQWnqkHX/16122017.jpg


This image has a dimension 600 x 320

https://steemitimages.com/600x0/https://steemitimages.com/DQmcYcCSdbUoQDPz53BkHdkidUJ53x54Aorp7GbBQWnqkHX/16122017.jpg


This image has a dimension of 187 x 100

https://steemitimages.com/0x100/https://steemitimages.com/DQmcYcCSdbUoQDPz53BkHdkidUJ53x54Aorp7GbBQWnqkHX/16122017.jpg

·
·
·
·
·
·

Το διάβασα και στην καινούρια ανάρτηση. Σε ευχαριστώ

Thank you for this wonderful tutorial on mark down. I find them very useful. I will continually study them to improve my typing skills here on Steemit Community.

Thanks for sharing that with us

·

I am happy and sharing with the hope it will be useful for everyone :)

I will be using this for a resource. Thanks!

·

Thank you!
Please let me know if there is something else I have left out!

Μπράβο Κατερίνα πολύ χρήσιμο άρθρο!

·

Ευχαριστώ :) 🌞🌞

Thank you @katerinaramm, VERY helpful post 😉!!!

·

Ευχαριστώ Αλίνα :)

Great job @katerinaramm!

·

Thank you Rebecca :) I appreciate you visiting my blog 💙

Thank you for the advice and illustrative examples. I didn't know that. I think this post will be useful for many users

Beautiful. You made it easier for many people who are confused about how to post properly. Thank you for your kind help.

Wow a lot of reading but now I have research to do so I can post this Achievement!! Thanks for the info 😁

As a follower of @followforupvotes this post has been randomly selected and upvoted! Enjoy your upvote and have a great day!

This is very helpull. Thank you

Great insight!!

Wow
Simply awesome
Thank you

This post from four years ago is still very much super helpful. Thanks alot

This post received a free Upvote. Get your free Upvote NOW! Just follow @upvoteforfree