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

in #steemit6 years ago (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



Sort:  

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

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

Great post, thanks for this :)

No bother, thanks for the comment :)

Great content. Thanks for educating me.

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

Valuable information lives forever.

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

Yeah, can't do that on steem unfortunateley

I still use this nearly daily. Thank you.

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

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

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

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

Screenshot_20190612043139.jpg
Try steempeak ;)

Thank you :)

I upvoted this even though its already past its prime

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.

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

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

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

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

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

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

Yes friend!
Greatness ahead!

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.

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.

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!

Hi! I am a robot. I just upvoted you! I found similar content that readers might be interested in:
https://en.wikipedia.org/wiki/Filler_text

If I hadn't copy, pasted "filler text" 300 times, I'd be really offended right now...

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

No bother, glad to be of service :)

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.

Thanks for the feedback, enjoy!

Your Post Has Been Featured on @Resteemable!
Feature any Steemit post using resteemit.com!
How It Works:
1. Take Any Steemit URL
2. Erase https://
3. Type re
Get Featured Instantly � Featured Posts are voted every 2.4hrs
Join the Curation Team Here | Vote Resteemable for Witness

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.

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

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