An extensive Markdown guide with tips and tricks you may not know yet ;-)
Markdown is a simplified way of formatting data, without needing to know HTML.
However it has some shortcomings, you sometimes need to know some HTML to be able to create a nice lay-out.
Because the Steemit Markdown editor is not really powerful, I created this cheat-sheet, and added some tips and tricks you may not know about, yet.
HEADERS
I always advise to use headers if you're creating a long(er) post, it makes it some much easier to read.
Desc | HTML | Result | Markdown | Result |
---|---|---|---|---|
Header 1 | <h1>header 1</h1> | header 1 | # header 1 | header 1 |
Header 2 | <h2>header 2</h2> | header 2 | ## header 2 | header 2 |
Header 3 | <h3>header 3</h3> | header 3 | ### header 3 | header 3 |
Header 4 | <h4>header 4</h4> | header 4 | #### header 4 | header 4 |
Header 5 | <h5>header 5</h5> | header 5 | ##### header 5 | header 5 |
Header 6 | <h6>header 6</h6> | header 6 | ###### header 6 | header 6 |
if you don't have the space, it is considered a tag!!
And you can only have 5 tags in total.
TEXT FORMATTING
Desc | HTML | Result | Markdown | Result |
---|---|---|---|---|
Bold | <b>Bold</b> | Bold | **Bold** | Bold |
Italic | <i>Italic</i> | Italic | *Italic* | Italic |
Bold & Italic | <b><i>Bold&Italic</i></b> | Bold & Italic | ***Bold&Italic*** | Bold&Italic |
Bold & Italic | <b>Bold</b>&<i>Italic</i> | Bold & Italic | **Bold**&*Italic* | Bold&Italic |
Small print | <sup>Small print</sup> | Small print | No alternative | Use HTML |
Strikethrough | <del>Strikethrough</del> | ~~Strikethrough~~ |
LINES
You can add a line by adding --- or *** with a space in front and after.
LISTS
You can have unordered lists by entering
* listitem 1
* listitem 2
* subitem 1
* subitem 2
This gives:
- listitem 1
- listitem 2
- subitem 1 - notice extra space at the beginning
- subitem 2
You can enter more on the line under a list-item, this will be part of this item.
***Mind the space between * and the text! ***
Or ordered lists:
- First ordered list item - notice the . after the number
- Another item. As you see the numbering is automatic
1 Unordered sub-list. notice, no . after the number
2 Sub part 2 - Actual numbers don't matter, just that it's a number
- Ordered sub-list
- And another item,
multiple lines this time.
To avoid a line being part of the listitem, just enter an extra line-break (press enter or enter <br />).
IMAGES
A vastly underestimated part of a post is the correct use of images. You can define the location of an image (left, center or right), but also the size of an image.
There are a few ways to include an image in a post. You can drag/drop an image from a location (pc), copy to the clipboard (ctrl/c) and paste into the editor (ctrl/v) or choose "selecting them" under the editor field.
In all of these cases the image is copied to Steemit (actually steemitimages.com) and will be placed into the editor immediately.
Don't be in a hurry, if the image is uploading and you move the cursor somewhere else in the text, the image will be placed where the cursor is at the moment, not when you started the upload!!
However, I would not copy the files here because there are some limitations.
An image you have copied like this cannot be resized to look good in you post. At least I haven't found how yet.
Scaling can be done by adding https://steemitimages.com/[width]x[height]/
before the image URI.
This is the original image copied to Steemitimages.com;
Here you have the resized version, using the Steemitimages.com function for scaling, but from the original URI:
https://steemitimages.com/0x100/https://cdn.pixabay.com/photo/2016/05/28/13/04/iceberg-1421411_960_720.jpg
And here you have the same, but then using from steemitimages.com;
https://steemitimages.com/0x100/https://steemitimages.com/DQmZjp699K4iHsykYwFuoW6UAksqod7MHmjZgQocGhY6Fdi/iceberg-1421411_960_720.jpg
As you can see, the latter one does not scale. So the best solution would be to use the original image, or copy it to a location where the scale functionality does work.
Keep in mind; scaling an image does NOT reduce its physical size. A huge image will still waste a lot of bandwidth.
Aligning
You can left-align, center and right-align.
Centering is easy, just enclose the text or image you want to have centered with <center>Centered Text or Image</center>
if you want text both centered and bold, put ** around the text, after <center> and before </center>
aligning text and images:
To accomplish this you can use one of these 2 classes:
<div class="pull-left">Text or Image URL</div> or <div class="pull-right">Text or Image URL</div>
TABLES
You use tables you enter:
Desc | HTML | Result | Markdown | Result <--- This part is the table header
------ | -------- | -------- | ------------- | ------------ <---- This defines that this is a table
Bold | <b>Bold</b> | Bold | **Bold** | Bold <----- The first table row
This creates:
Desc | HTML | Result | Markdown | Result |
---|---|---|---|---|
Bold | <b>Bold</b> | Bold | **Bold** | Bold |
Of course you could use this for some formatting, but it is quite limited.
Header 1 | Header 3 | Final Header | ||
---|---|---|---|---|
Column 1 | Column 3 | Final column | ||
Column 2 | Column 4 |
You can right-align a column by adding : after the -----, like I did in this table: ------ | -------- | -------- | ------------- | -----------:
Also a possibility:
English | Nederlands | |
---|---|---|
Here the text is in English, as most of you can read. | En hier is het in het Nederlands. | |
And some more text, but you have virtually no influence on the width of the columns. | En nog meer NL. Als we dit nu wat langer maken wordt de tekst meer uitgelijnd. |
Hyperlinks
Hyperlinks are generally done by using [Go to Steemit Homepage](https://www.steemit.com "Possible title of link")
Go to Steemit Homepage.
Essentially it is [](). The [] contains the text the users sees, in () you enter the URI. The space and text is what pops up when the cursor hovers over the link.
It is unfortunately not yet possible to determine if a hyperlink opens in the current tab, a new tab or a new page.
Adding an @ before a name, like @blevley, will send a signal to the user that they are mentioned in a post.
ADDED:
There is a lot being said about copy/paste and using information from external sources.
If you use text without altering it, the best thing is to make this clear by inserting > in front of the text.
This give this effect, which is clear for all.
The second line does not have the >, but follows the same layout
To start a new line just make sure there is one empty line between te last line and the new one.
I hope this helps in mastering the beast called Markdown, if you have any questions or remarks, just contact me.
Awesome. That's what I was looking for.
You're welcome
great post
I'm keeping this open lol
#bellyrubchallenge WINNER! Congrats!:))
@originalworks
The @OriginalWorks bot has determined this post by @blevley to be original material and upvoted it!
To call @OriginalWorks, simply reply to any post with @originalworks or !originalworks in your message!
Do you like what @OriginalWorks does? Give it an upvote to support this project and keep it free!
For more information, Click Here!
I added a small piece about referencing text from another site.
Really good post !!
I've read a few different Markdown tutorials on Steemit, but I think this one is my favorite. Not only is it cleanly laid out, but it is Steemit-oriented, which is helpful. Thanks for writing it. Upvoted and resteemed.
You're welcome, I hope it helps in creating more compelling content.
This post recieved an upvote from minnowpond. If you would like to recieve upvotes from minnowpond on all your posts, simply FOLLOW @minnowpond Please consider upvoting this comment as this project is supported only by your upvotes!
This post has received a Bellyrub and 1.51 % upvote from @bellyrub thanks to: @kid4life. Send SBD to @bellyrub with a post link in the memo field to bid on the next vote, every 2.4 hours. Be sure to vote for my Pops, @zeartul, as Steem Witness Hope you enjoyed your bellyrub!
Good post. Maybe you could have added how to do this?
Resteemd
Peace
Do you mean add a hyperlink? It clarify that a bit better.
Thanks.
This post recieved an upvote from minnowpond. If you would like to recieve upvotes from minnowpond on all your posts, simply FOLLOW @minnowpond
good info