The Ultimate Guide To Formatting On Steem (Markup and Markdown)
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.
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 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 |
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
[](https://steemit.com/@sisygoboom)
Images
<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>
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
- HTML also works if you're having problems
- Or fancy having an ordered list
- Far more freedom
- Such freedom
- See?
- When do the possibillities end?
Centalize
<center> I usually prefer decentralized stuff...
but i guess this is acceptable.</center>
but i guess this is acceptable.
Embed youtube video
https://www.youtube.com/watch?v=xZmpCAqD7hs
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
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!