A short example of formatting and post layout
This is a small post describing some tips and tricks for markdown and formatting. These are preferences and tips I've picked up over time, they're by no means the only way to do things. Use whatever you like and don't be afraid to experiment.
<br> this markdown trick creates a blank line
Image placement
You can pull certain images to the side of text, like the vertical banner to the left, by using the markdown below. You can replace 'left' for right or top.
<div class="pull-left"><img src="https://cdn.steemitimages.com/yourimage" /></div>
If you want to centralize your images on the page you can use the markdown below.
<center>your image here</center>
Just the basics
If you're looking to add some emphasis to your writing you can do so with the markdown below.
*italics* or _italics_ **bold** or __bold__
**bold and _italics_** ~~strikethrough~~
italics or italics bold or bold
bold and italics strikethrough
Making tables
Sometimes tables can be used to neatly organize information within your posts. They occupy the full width of your page so take that into consideration when forming your post.
I haven't even tested how many columns you can add, can't be arsed.
Title 1|Title 2|Title 3|
-|-|-|
Add|Your|Text|
And|Then|More|
| Title 1 | Title 2 | Title 3 |
|---|---|---|
| Add | Your | Text |
| And | Then | More |
Quotes, Links, and Headings
Whenever you are referencing something said by someone else, you can use the > symbol to capture the words in quotes.
Wow, I didn't realize the quote line went past the image on the left hand side. I could of avoided this if I moved this segment to the banner above.
what a nice way to credit a quote
<sub>small text</sub> small text
<sub><sup>smaller text</sup><sub> smaller text
<sub><sup>[smaller text with a link in it](your link here)</sup></sub>
# Heading 1
## Heading 2
### Heading 3
#### Heading 4
##### Heading 5
Heading 1
Heading 2
You get the idea...
Use your eyes
Simple is effective, less is more, blah blah blah.
Do you even give a shit? Design is different for everyone and it's always going to differ from person to person. Our styles adapt and change over time when we see other people using certain techniques to present their work in various ways.
Some posts are super ugly though, there is no denying it. Using some simple formatting techniques and making good use of space can make all the difference to a post. You can see the difference in styles between the top and bottom of this post. Which do you prefer?
(I added a line break above that last paragraph by using ---)
# <center>Finally</center>Finally
Here is a cool one to end with...
<div class="text-justify"> </div>
You can add <div class="text-justify"> to the start of your post and </div> to the end and it'll make all the text bodies in between finish at the far right margin.
look at how neat the text looks at the right side of the margin, wow. look at how neat the text looks at the right side of the margin, wow. look at how neat the text looks at the right side of the margin, wow. look at how neat the text looks at the right side of the margin, wow. look at how neat the text looks at the right side of the margin, wow. look at how neat the text looks at the right side of the margin, wow. look at how neat the text looks at the right side of the margin, wow.