An extensive Markdown guide with tips and tricks you may not know yet ;-)steemCreated with Sketch.

in #steemit7 years ago (edited)

SteemMarkdown.pngMarkdown 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.
DescHTMLResultMarkdownResult
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

Mind the space between # and the header,
if you don't have the space, it is considered a tag!!

And you can only have 5 tags in total.

TEXT FORMATTING

DescHTMLResultMarkdownResult
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 printNo alternativeUse HTML
Strikethrough<del>Strikethrough</del>Strikethrough~~Strikethrough~~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:

  1. First ordered list item - notice the . after the number
  2. Another item. As you see the numbering is automatic
    1 Unordered sub-list. notice, no . after the number
    2 Sub part 2
  3. Actual numbers don't matter, just that it's a number
  4. Ordered sub-list
  5. 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;
iceberg-1421411_960_720[1].jpg

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>

Centered Text or Image

if you want text both centered and bold, put ** around the text, after <center> and before </center>

aligning text and images:

Image left, text right of image.
Image right, text left of image.

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:

DescHTMLResultMarkdownResult
Bold<b>Bold</b>Bold**Bold**Bold

Of course you could use this for some formatting, but it is quite limited.

Header 1Header 3Final 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:

EnglishNederlands
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.

Sort:  

Awesome. That's what I was looking for.

You're welcome

great post
I'm keeping this open lol

The @OriginalWorks bot has determined this post by @blevley to be original material and upvoted it!

OW2.gif

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

Coin Marketplace

STEEM 0.18
TRX 0.16
JST 0.029
BTC 76620.76
ETH 2903.43
USDT 1.00
SBD 2.57