The Ultimate Guide To Formatting On Steem (Markup and Markdown)

avatar
(Edited)

Hello steemit! Over the past few weeks I've been looking for a complete guide to all the features of steemit formatting in one place. As far as I'm aware, that guide doesn't exist yet.. so here it is!

Contents:

  • Headers
  • Breaklines
  • Text formatting
  • Page layout using HTML divisions
    • Wrap text around image
    • Inline text (straight edges)
  • Tables
  • Code
  • Quotes
  • Clickable image
  • Images
  • Links
  • Bullet points
  • Centralise
  • Embed Youtube video


If I've missed anything, let me know! I'd love it if this became the go-to guide for markup/markdown in steemit.

Headers

# Largest header
## Medium-large header
### Medium-small header
#### Small header
##### Tiny header
###### Micro header

Largest header

Medium-large header

Medium-small header

Small header

Tiny header
Micro header

Breaklines

---
***
<br>
***
<hr>






Text formatting

*Itallic*
_itallic_
<i>itallic</i>

**Bold**
__bold__
<b>bold</b>

~~Strikethrough~~
<strike>strikethrough</strike>

*__~~All~~__*

This is <sub>subscript</sub>
This is <sup>Superscript</sup>

Itallic
itallic
itallic

Bold
bold
bold

Strikethrough
strikethrough

All

This is subscript
This is Superscript


Text/image layout

<div class="justify-text">
Text or images go here.
</div>

---

<div class="pull-left">
Text or images go here.
</div>

<div class="pull right">
Text or images go here.
</div>

---

<div class="pull-left">http://i0.kym-cdn.com/photos/images/original/001/316/888/f81.jpeg</div>
Text or images go here
All text in this division will go right to the end of the line. This gives it a straight edge, unlike the jagged edge you usually get on steemit. Jagged edges are quite ugly at times and justified text can be easier on the eyes. Filler text, filler text, filler text, filler text, filler text, filler text, filler text, filler text, filler text, filler text, filler text, filler text, filler text, filler text, filler text, filler text, filler text.

If you want to make it look more like a newspaper, that's totally possible by pulling this text to the left. And that text over there > to the right. Filler text, filler text, filler text, filler text, filler text, filler text, filler text, filler text, filler text, filler text, filler text, filler text, filler text, filler text, filler text.
Filler text, filler text, filler text, filler text, filler text, filler text, filler text, filler text, filler text, filler text, filler text, filler text, filler text, filler text, filler text, filler text, filler text, filler text, filler text, filler text, filler text, filler text, filler text, filler text, filler text, filler text.

Filler text, filler text, filler text, filler text, filler text, filler text, filler text, filler text, filler text, filler text, filler text, filler text.Filler text, filler text, filler text, filler text, filler text, filler text, filler text, filler text, filler text, filler text, filler text, filler text.Filler text, filler text, filler text, filler text, filler text, filler text, filler text, filler text, filler text, filler text, filler text, filler text.Filler text, filler text, filler text, filler text, filler text, filler text, filler text, filler text, filler text, filler text, filler text, filler text.Filler text, filler text, filler text, filler text, filler text, filler text, filler text, filler text, filler text, filler text, filler text, filler text.

Table

Things to do | Do the thing to | Status
-| -| -|
Vote witness | @sisygoboom | joking
Upvote |  | Y
Comment | This post | Done
Resteem | This post |
Follow | @sisygoboom | Follow me - join the dark side
Things to doDo the thing toStatus
Vote witness@sisygoboomjoking
UpvoteY
CommentThis postDone
ResteemThis post
Follow@sisygoboomFollow me - join the dark side

Code

`write some inline text or code here`

```
Or maybe...
a whole block of it?
```

write some inline text or code here

Or maybe...
a whole block of it?

Quotes

normal text
> This text will really stand out, good for quotes, definitions and puchlines.

normal text

This text will really stand out, good for quotes, definitions and puchlines.


Clickable image link

[![Clickable Image](https://pbs.twimg.com/profile_images/949787136030539782/LnRrYf6e_400x400.jpg)](https://steemit.com/@sisygoboom)

Clickable Image


Images

![Awkward Stock Photo](http://www.apimages.com/Images/Ap_Creative_Stock_Header.jpg)

<div class="pull-left">https://i.imgur.com/jg8EGWe.jpg</div>
<div class="pull-right">https://static.pexels.com/photos/433635/pexels-photo-433635.jpeg</div>

Awkward Stock Photo

You can also put text here and stuff. What kind of stuff? You'll want to use lots of filler text, filler text, filler text, filler text, filler text, filler text, filler text, filler text, filler text, filler text, filler text, filler text, filler text, filler text, filler text.

Links

https://steemit.com/@sisygoboom
@sisygoboom
[Link is hidden in text](https://steemit.com/@sisygoboom)

https://steemit.com/@sisygoboom
@sisygoboom
Link is hidden in text


Bullet points

- one
- two
    - 2.1
    - 2.2

* works with asterisk as well

<ol>
<li>HTML also works if you're having problems</li>
<li>Or fancy having an ordered list</li>
<ul>
<li>Far more freedom</li>
<li>Such freedom</li>
</ul>
<li>See?</li>
<ol>
<li>When do the possibillities end?</li>
</ol>
</ol>
  • one
  • two
    • 2.1
    • 2.2
  • works with asterisk as well
  1. HTML also works if you're having problems
  2. Or fancy having an ordered list
    • Far more freedom
    • Such freedom
  3. See?
    1. When do the possibillities end?

Centalize

<center> I usually prefer decentralized stuff...
 but i guess this is acceptable.</center>

I usually prefer decentralized stuff...
but i guess this is acceptable.


Embed youtube video

https://www.youtube.com/watch?v=xZmpCAqD7hs





0
0
0.000
38 comments
avatar

Great guide. Thanks.

I was still using "a href" To make my pictures clickable. Now I know how to do it without writing HTML. For some reason I wasn't able to find it before your formatting guide.

0
0
0.000
avatar

Glad i could be of service :0 i was using href as well for ages, it's so messy that i decided not to include it haha.

And it is really hard to find some of the tricks, I was so sick of having to look through multiple guides for different things that I just decided to put it all in one post.

0
0
0.000
avatar

Probably for the best, especially if you can get away from using the extremely verbose HTML tag. I probably won't be using it anymore, as long as I remember the syntax...

It's a great idea because now you have it saved in your blog and you can reference it whenever you want!

0
0
0.000
avatar

Awesome, thanks for this! I've been wondering how to center images forever now.

0
0
0.000
avatar
(Edited)

Finally, I've been waiting for someone to post this kind of guides. This is very useful to me and so the rest of the Steemit user I'm sure they are going to like it. Thanks.

0
0
0.000
avatar

Congratulations! This post has been upvoted from the communal account, @minnowsupport, by sisygoboom from the Minnow Support Project. It's a witness project run by aggroed, ausbitbank, teamsteem, theprophet0, someguy123, neoxian, followbtcnews, and netuoso. The goal is to help Steemit grow by supporting Minnows. Please find us at the Peace, Abundance, and Liberty Network (PALnet) Discord Channel. It's a completely public and open space to all members of the Steemit community who voluntarily choose to be there.

If you would like to delegate to the Minnow Support Project you can do so by clicking on the following links: 50SP, 100SP, 250SP, 500SP, 1000SP, 5000SP.
Be sure to leave at least 50SP undelegated on your account.

0
0
0.000
avatar

Great guide! you are awesome. I really needed a post like this

0
0
0.000
avatar

Honestly, I'm really glad to see people still viewing, using, sharing and commenting on this months after publication, glad to help!

0
0
0.000
avatar

Great content. Thanks for educating me.

0
0
0.000
avatar

You're welcome, glad to see my guide still being used :)

0
0
0.000
avatar

I am using this post as a formatting guide referenced in Steeve at the moment. Thanks for writing this down :-)

0
0
0.000
avatar

It's an honour to a part of such an awesome project!

0
0
0.000
avatar

Thanks for the helpful post! I'm new to Steem and trying to figure out all the formatting stuff. Very helpful!

0
0
0.000
avatar

No bother pal, great to see this still being used :)

0
0
0.000
avatar

Will be a great reference for me. Thanks very much for this!!!

0
0
0.000
avatar

You're welcome man :) great to see this still being used.

0
0
0.000
avatar

I upvoted this even though its already past its prime

0
0
0.000
avatar
(Edited)

Even to this day, it's still the most complete guide out there. I still use it for reference sometimes. And all the markup/markdown still works brilliantly on the majority of interfaces.


I always intended it to be the reference point for styling posts.

0
0
0.000
avatar

Have there been updates that you can add to your guide. Alternatively redux on this with add ons like graphical ideas.

That would be upvoted.

And more importantly original content.

Posted using Partiko Android

0
0
0.000
avatar

What new features are there? I haven't been keeping up with this so closely.

0
0
0.000
avatar

Great and useful article, hopefully @steemit add WYSIWYG editor in future.

0
0
0.000
avatar

Thanks, heartwarming to know people are still finding this useful :) WYSIWYG?

0
0
0.000
avatar

is an acronym for What You See Is What You Get. In computing, a WYSIWYG editor is a system in which content (text and graphics) can be edited in a form closely resembling its appearance when printed or displayed as a finished product, such as a printed document, web page, or slide presentation.

WYSIWYG implies a user interface that allows the user to view something very similar to the end result while the document is being created

0
0
0.000
avatar

Hi @sisygoboom, very good guide! I want to colour some text in several colors. Is this possible?

0
0
0.000
avatar
(Edited)

Yeah, can't do that on steem unfortunateley

0
0
0.000
avatar

I still use this nearly daily. Thank you.

0
0
0.000
avatar

Thanks man, love that it's still getting used even now nearly 2 years later :D

0
0
0.000