The Ultimate Guide To Formatting On Steem (Markup and Markdown)
Words
767
Reading
4 min
Listen
Play
9y
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
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 class="pull-right">https://static.pexels.com/photos/433635/pexels-photo-433635.jpeg
Links
https://steemit.com/@sisygoboom
@sisygoboom
[Link is hidden in text](https://steemit.com/@sisygoboom)
https://steemit.com/@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>
I usually prefer decentralized stuff...
but i guess this is acceptable.
Embed youtube video
https://www.youtube.com/watch?v=xZmpCAqD7hs