Ever wonder how some post's presentation is well formatted and how you could do it similar?
If you take a little time to learn Markdown and HTML, you'll be able to have a post stand out more than usual. Let's take a look at the Mardown Cheat Sheet but do it Steemit style! Not all the methods work but I will share with you ones that currently do on here.
Headers
Code:
# STEEMIT!
## STEEMIT!
### STEEMIT!
#### STEEMIT!
##### STEEMIT!
###### STEEMIT!
Result:
STEEMIT!
STEEMIT!
STEEMIT!
STEEMIT!
STEEMIT!
STEEMIT!
To add the underline or a spacer for your page, you can use:
Code:
# STEEMIT!
---
Result:
STEEMIT!
Emphasis
Emphasis, or italics, is STEEMIT!
Strong emphasis, or bold, is STEEMIT!
Combined emphasis with STEEMIT!
Strikethrough uses two tildes. STEEMIT!
There are couple different ways to do this.
Code:
*STEEMIT!* or _STEEMIT!_.
**STEEMIT!** or __STEEMIT!__.
***STEEMIT!*** or **_STEEMIT!_**.
~~STEEMIT!~~
Result:
STEEMIT! or STEEMIT!.
STEEMIT! or STEEMIT!.
STEEMIT! or STEEMIT!.
STEEMIT!
Lists
Here's where it can start getting a little more advanced and not everything on the Markdown Cheat Sheet works the same here.
Here is what is known to work.
Code:
1. Actual numbers don't matter, just that it's a number
1. It will come out to the next number
4. And another item.
You can have properly indented paragraphs within list items.
<br>
To have a line break without a paragraph, you will need to use a little Html `<br>`although the spacing is a bit larger than normal. If you know a different way that works on here, let me know!
Note that this line is separate but within the same paragraph.
* Bullet list can use asterisks
- Or minuses
+ Or pluses
Result:
- Actual numbers don't matter, just that it's a number
- It will come out to the next number
- And another item.
You can have properly indented paragraphs within list items.
To have a line break without a paragraph, you will need to use a little Html<br>
although the spacing is a bit larger than normal. If you know a different way that works on here, let me know!
Note that this line is separate but within the same paragraph.
- Bullet list can use asterisks
- Or minuses
- Or pluses
Links
Code:
[STEEMIT!](https://www.steemit.com)
URLs and URLs in angle brackets will automatically get turned into links.
http://www.steemit.com or <http://www.steemit.com> and sometimes
example.com (but not on Github, for example).
Result:
URLs and URLs in angle brackets will automatically get turned into links.
http://www.steemit.com or http://www.steemit.com and sometimes just
steemit.com (but not on Github, for example).
Code and Code Blocks
Code:
I love `STEEMIT!` because it is `AWESOME!`
Result:
I love STEEMIT!
because it is AWESOME!
I was unable to figure out a way to show the Code Block properly so I had to upload an image to show the example. You need to have ```
at the beginning and end of your code.
Code:
Result:
This is how you do a Code Block on STEEMIT!
If you are a Coder, you most likely know how to do this already!
3.times {print "STEEM! "}
Tables
In order to center with text in a column, you will have to use HTML to do this unless there is another markdown way that works on here. If there is, please let me know!
Code:
Colons can be used to align columns.
| Tables | <center>Are</center> | Cool |
| ------------- |-------------| -----:|
| column 3 is | <center>right-aligned</center> | $1600 |
| column 2 is | <center>centered</center> | $12 |
| zebra stripes | <center>are neat</center> | $1 |
There must be at least 3 dashes separating each header cell.
The outer pipes (|) are optional, and you don't need to make the
raw Markdown line up prettily. You can also use inline Markdown.
Markdown | Less | Pretty
--- | --- | ---
*Steemit* | `is` | **AWESOME!**
1 | 2 | 3
Result:
Colons can be used to align columns.
Tables | Cool | |
---|---|---|
column 3 is | $1600 | |
column 2 is | $12 | |
zebra stripes | $1 |
There must be at least 3 dashes separating each header cell.
The outer pipes (|) are optional, and you don't need to make the
raw Markdown line up prettily. You can also use inline Markdown.
Markdown | Less | Pretty |
---|---|---|
Steemit | is | AWESOME! |
1 | 2 | 3 |
Blockquotes
Code:
> You can use this when quoting from an article.
> You can have a line break or add another bracket
>
> to continue within the same blockquote
Result:
You can use this when quoting from an article.
You can have a line break or add another bracket
to continue within the same blockquote
Align Image, Text
This method uses HTML to align images and text.
Code:
<div class="pull-right"><img src="https://steemit.com/images/favicons/favicon-196x196.png"></div>
You can enter your text after the `<div>` code to have it appear to the left of the image. This can help shorten the amount of time having to scroll through and reading a post. Some readers do appreciate the formatting of your post. I know I do and I enjoy formatting my posts using this method. This also can give a better presentation to add a little extra to your post.
The text will automatically wrap around when your text is long enough and depending on the size of the image you use. If you
Result:
You can enter your text after the <div>
code to have it appear to the left of the image. This can help shorten the amount of time having to scroll through a post. Some readers do appreciate the formatting of your post. I know I do and I enjoy formatting my posts using this method. This also can give a better presentation to add a little extra to your post.
The text will automatically wrap around when your paragraph is long enough and depending on the size of the image you use.
I borrowed this method from @krnel from his post on aligning images. You can check out his post for different ways on how to do it.
https://steemit.com/steemit-help/@krnel/how-to-align-images-in-steemit-posts-left-right-and-center
Great! Very helpful - resteemed and upvoted!
Thanks. I appreciate the resteem!
This is the post I was looking for! Great tutorial on how to use the markdown. You are my hero 😎
Thank you. I appreciate the comment.
Thanks. I can just connect to everything just said. Very helpful! :)
I am happy it was helpful :)
Hi @bitcoinparadise, I just stopped back to let you know your post was one of my favourite reads and I included it in my Steemit Ramble. You can read what I wrote about your post here.
This an Awesome Post @bitcoinparadise "Thanks For Sharing" this Info your the Best!!!!
I appreciate the kind words. Thank you!
great post @bitcoinparadise ... good idea to bring together what works on Steemit as a reference
Thank you @shadowspub. Just trying to help out the new users ;)
I'd say you are doing a good job of doing so :)
Thanks for sharing, I need to use more Align Image &Text markdown !
It can make things stand out. Go for it!
Need to save this right now, thank you
I hope it helps ;)
This is a useful Steemit formating tutorial!
I know you know that, I'm just naming my bookmark, heh.
Hahah Thank you. That's what it's here for 😉 I'm going to try make revised versions of posts I have done in the past for you newer Steemians. A lot to sift through and a lot has changed.
Steem on!
Good article @bitcoinparadise. The only way to center the text is by using HTML?
Thank you. As far as I know, yes...
THANK YOU FOR THIS POST!! I've already asked some others how to wrap text around images, and now I finally have it.
btw: for centering stuff you can also simply do this:
Looks like this:
Great to hear :)
Yes, I mentioned how to center in the part with the tables, I figured I didn't really need to go over it on its own.
maybe I misinterpreted @emanuel.tanasa's question.
Oh! I thought you were saying that part to me. Didn't realize you were relating that part to @emanuel.tanasa. Thanks for showing him the example :P
Thank you for the example @fitzgibbon . You understood well.
ty, i found a few of these by accident... nice ! (-:
yes, great information, thanks for sharing
Hi @bitcoinparadise I hope you're doing good! This is a bit off topic, about minnowsupport and exchanges. I put notes in your direct message in SteemChat if that's okay. (I shortened this message since it's off topic.) No rush! Thanks for all your support!
Hello @karrencarrens, I've been really busy but doing great! I hope you are doing well. I don't really go on Steemit.chat. You are welcome to contact me on Discord on SteemSpeak, FTGU, or Steemit 101
Perfect! I think I figured out the answer to my questions. I'm excited about joining you guys on discord!
Great! I hope to see you there! If you need a little guide for Discord, you might want to check out this post from @sykochika.
https://steemit.com/steem-help/@sykochica/answering-common-questions-can-i-voice-chat-with-steemians-learn-how-and-where-to-discord
really i was looking for this type of pure guidance. thanks bitcoinparadise.
Here's where it can start getting a little more advanced and not everything on the Markdown Cheat Sheet works the same here.
Yes if you read my post I stated that not everything on the Markdown Cheat Sheet Works on here...
Great overview @bitcoinparadise. I'll have to bookmark this one so I don't lose it. Still no way underline?
Not that I know of, unfortunately. If you find out a way, let me know!
Thanks for the comment :)
I've used ' link descriptive text ' and it works fine.
Well, I believe if you move your mouse over the link with that, you're supposed to see a descriptive text box.
I don't think that currently works on here.
Thanx for doing this! I've been wondering how to align those pictures to the right as the text flows on the left. I'll give it a shot and see what happens.
that definately helps man!
Outstanding post.. Def worth a try.. #codenoob over here.
Nice, I didn't know about the tables yet. Thank you for sharing.
This post has been ranked within the top 50 most undervalued posts in the second half of Jul 27. We estimate that this post is undervalued by $13.80 as compared to a scenario in which every voter had an equal say.
See the full rankings and details in The Daily Tribune: Jul 27 - Part II. You can also read about some of our methodology, data analysis and technical details in our initial post.
If you are the author and would prefer not to receive these comments, simply reply "Stop" to this comment.
Thanks, I needed this.
Thanks so much!!! I really appreciate that.