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.
Dude. Those vertical banners are super sexy.
NEED EVEN MORE markdown? Check out muh post below. It's way past payout, but super helpful.😎
Plus, added bonus... you can just copy/paste any emoji from getemoji.com! That tip and more in the tutorial!
🌟ULTIMATE Markdown Tutorial🌟
Glad you like em! I'm going to make a post with a bunch of them in soon :)
Awesome! For some reason... I never even THOUGHT about vertical banners... I like to think I'm smarter than the average bear... but then sometimes... 🤦🏼
Soooo cool!
Markdown Skill = 100
Loving those vertical banners. Definitely learned a few new tricks from this post so thank you!
Thank you very much, I'm glad the post helped out :)
These banners are so cute! I don't think I have seen vertical ones so far?! Thanks for teaching me how to use smaller text and for all the other formatting tricks!
They are pretty cool looking for sure, I got the idea from one of @monchhchi23's post and just had to make them for the SteemMonsters community!
You're welcome :)
Great support. Thanks a bunch!
Anyone have an idea how to import translated version of the post. It looks like [This Text in /language/]?
Thanks for your consideration.
<sub>and<sup>tags to create a function that transcends both of their normal usage for superscripts and subscripts! That's very clever! Bravo! Thanks for sharing this post in PYPT, as I am sure many people will benefit from it! 😊Thank you very much! That trick seems to be the one that slips under the radar from most, I learned that one from @penderis :)
the artwork is awesome. Thank you for the tips and tricks, I find the steem editor sucks. It's always great to learn how to make a post look a little more presentable!
I'm glad you found some handy tips from the post buddy! It has its moments for sure, just have to work with what we got :D
Oh heh, I just tried it out and I really love the banner idea, I cant believe I actually got it to work lol! It will take a bit to get used to the mark down on this one! 😂✌👍
It's one of my favourites for sure! I'm going to get some different looking banners made for people to use when I have the time to get round to it :)
Cool!✌👍
I love the verticle banners! I definitely need to try using markdown now! I didn't realise you could do so much stuff! bookmarking this post now, thank you!