Markdown Cheatsheet for Making Amazing Posts on Steemit

in #steem6 years ago (edited)

Hey everyone, yesterday I posted 5 tips on how to grow your Steemit account and I got a few more questions about how to make your articles better on Steemit. I decided to compile a little cheatsheet for editing your posts in the markdown editor!

Markdown Cheatsheet Table of Contents:

  1. Header Tags
  2. Strikethrough Text
  3. Bold & Italic Text
  4. Blockquote
  5. Lists
  6. Links
  7. Image Sizing
  8. Center Align Text or Images
  9. Tables


1. Header Tags

Code:

<h1> header text here </h1>
<h2> header text here </h2>
<h3> header text here </h3>
<h4> header text here </h4>
<h5> header text here </h5>
<h6> header text here </h6>

Example:

header 1

header 2

header 3

header 4

header 5

header 6



2. Strikethrough Text:

 

Code:

~~text~~

 

Example:

This is strikethrough text



3. Bold & Italic Text:

 

Code:

_This text is italic_
**This text is bold**
_**This text is bold & italic**_

 

Example:


This text is italic
This text is bold
This text is bold & italic



4. Blockquote

 

Code:

<blockquote> "This is a blockquote"</blockquote>

 

Example:

"This is a blockquote"


5. Lists

 

Code:

* This is a bulleted list
* This is a bulleted list
* This is a bulleted list

1. This is a numbered list
2. This is a numbered list
3. This is a numbered list

 

Example:

  • This is a bulleted list
  • This is a bulleted list
  • This is a bulleted list
  1. This is a numbered list
  2. This is a numbered list
  3. This is a numbered list


6. Links

 

Code:

[This is an inline-style link](https://steemit.com/@khaleelkazi)

 

Example:


This is an inline-style link



7. Image Sizing

 

Code:

https://steemitimages.com/300x800/yourimagelinkhere
Example:
https://steemitimages.com/300x800/https://steemitimages.com/DQmVR5t8KNisAZFWEn7hSMo26vV9g52cRJ4QkYzhLJnBzzD/image.png

 



8. Center Align

 

Code:

<center> insert your image or text here</center>

 

Example:


insert your image or text here



9. Tables

 

Code:

Tables | Are | A
--- | --- | ---
Great | Display | Tool
1 | 2 | 3

 

Example:

TablesAreA
GreatDisplayTool
123


Thanks for reading! I hope you find this info useful for making better posts on Steemit! There's a lot more info I have to share about the Markdown editor, so expect a part 2 soon!

If you have any questions or would like me to make a post about something specific, please let me know in the comments and I'll get right back to you!

Sort:  

(I am temporarly upvoting my comment for visibility)

This post is not bad... but there are like... 100 very similar tutorials on Steemit.

I will upvote 10 people, which will paste a link to similar tutorials as response to this comment:


https://steemit.com/steemit/@thecryptofiend/markdown-basics-for-beginners

The current post is not something that anyone should be reading.

Sure, there's 100s of similar tutorials on just about everything all over the internet. This tutorial is just 1 man's take on how to style articles in markdown and I made it to share with my followers.

On top of that as time goes by tutorials like this, and others talking about sp vs steem, or understanding voting power get buried by the new content.

Nothing wrong with these coming out on a regular basis to help the minnow learning curve

This blog is all about learning and sharing. And actually this is what I am learning. I don't know the markdown commands well and when I look at the Github page on markdown I get frustrated. This is simple and clean a tool I will refer to. I already changed the way I post after looking at this.

Thanks @mineopoly! I’m glad it’s helpful!

You are correct there are 100's if you know where & what to search. Here is one as an example as requested by @noisy. The problem is it was released a year ago and as a newbie sometimes we don't know what we don't know and even if we were to scroll through days of feeds there is no gaurantee we would stumble accros this. So I think it's good to rehash a few things time to time. Thanks for taking the time @khaleelkazi.

This is a great guide especially for those who aren't familiar with HTML.

I also use the "a href" tag as well:

https://www.w3schools.com/tags/att_a_href.asp

Thanks for this! It reminds me to use these more.

Thanks @sequentialvibe, I hope it helps a lot of people out!

excellent bro..very easy to understand ... too better than markdown styling guide on github...github is very complicated..

Thank you! I'm glad you like it!

K.. swag! Used your tips already making a link quote, excellent!! [link](htt blahblah) works perfect. I think new users will find this useful. There are many kinds of people and we can't always check old posts so it's good to remind people like me who really don't know how to use it.

Thanks @artjohn!! I’m glad I could help you with your links!! Posts look so much cleaner when you can do in-line linking!

An excellent resource for those of us just starting out, thank you, there were a few on here I didn't know about

Thanks! I'm glad it helps!

Right!! This is what I was waiting for. I used busy.org that had a lot of shortcuts made easy. Your post today is useful for people like me who don't use markdown enough. I will have to resteem this. Especially number 8 centering was what I had trouble with. This is the truth. I don't know these things well yet. But I miss your question at the end that gives a personal touch.^^

Haha I’m about to post with a QOTD soon for the article today! Thanks for sharing this post, I really appreciate it!

This is simple and clear. Thank you.

About sizing images - does this apply to both increasing and decreasing the sizes? And is there a limit?

Also, I've been trying to post a cartoon avatar I created on Portrait Illustrator Maker as my portrait but the url has repeatedly refused to load. Could you please advise on what I may be doing wrong?

Thanks for the kind words!

I've only ever needed to use the image resizing to decrease the size of an image. I don't think it works to increase the size of an image.

Could you paste the url in a reply here so I can test it out and then get back to you?

Thank you.
Alert: I'm terribly IT challenged. I don't know whether there's a specific url for a created image.

http://illustmaker.abi-station.com/index_en.shtml

I'm not 100% sure of how to use that, I think you need to save the image to your desktop and then copy/paste it into markdown. If you're trying to post it as your profile image on Steemit, then you need to paste it as a specific URL. The link you sent is to the editor itself, not your specific image. Hope that helps! Let me know if you get it working or have more questions.

That should help. Thank you.

Oh yes, it's very useful and justified, since your examples show specific steps for creating an excellent post! Thank you @khaleelkazi

Thank you for reading! I'm glad you find it useful!

Loading...

Didn't know about 2, 6, 7, and 9. This is gonna help a lot.

Have been using <a href='url link' thing for links. This is much easier :D

I’m glad you learned a few things! The in-line links are sooo much better than href! Thanks for reading!

Yeah it is! Really helping me save time on my postings :D

There are some like boarders when someone uses like a quote or a text from somewhere else. How do you do that?

Coin Marketplace

STEEM 0.25
TRX 0.11
JST 0.032
BTC 61041.41
ETH 2947.17
USDT 1.00
SBD 3.85