How to post like a pro - Complete guide to Markdown formatting

avatar

Hive supports a mixture of Markdown & HTML when creating posts. This is fairly standard regardless of the front-end you choose to post from. Only partial support of Markdown & HTML are supported. This guide will cover 98% of the functionality you will need to make your posts look awesome.

This is an updated version of my previous Markdown 101 guide.

I have personally grown to love using Markdown as it allows me to write as I normally will but easily add formatting and style to my posts. I also use Markdown for notes while developing.

I will cover some HTML elements in this guide as well as they relate to posting on Hive.

Headers

Almost every post will benefit from headers, this allows you to visually break down posts into sections and avoids the initial information overload most long-form posts create.

Headers correspond directly to HTML H tags, typically H1, H2, H3, H6 tags to create similar sections in HTML content. Header tags have always had some influence on Search Engine Optimization (SEO) but more importantly on readability.

You want to use header tags to highlight keys sections of your posts and engage your audience. The most common header tag is the H1 which is simply a # in markdown. If you want to highlight a section of your post you would use the # pound sign at the start of a line.

This is the most common header (##)

There are six headers available, each one is smaller than the last. To create a smaller header, just add # to your header.

  • Header 1 #
  • Header 2 ##
  • Header 3 ###
  • Header 4 #####
  • Header 5 #####
  • Header 6 ######

Headers do wonders for making your posts more readable and reduces reading fatigue. In fact, I would go so far to say headers will increase how many people read your content by a rather significant margin.

Generally it is good practice to only use one main H1 (#) once in your document and use H2 (##) or H3 (###) for your other headers.

You also want to make sure you have a space between the pound signs and your text. It is also generally accepted under Markdown that your first line of text will follow immediately on the next line of a header although most Markdown parsers will accept a blank line.


Emphasis

Emphasis are the "air quotes" of markdown and HTML.



They are important for highlighting or "emphasizing" keywords. Think of when your mother and father would annunciate words when speaking to you.

Although there are two ways to do emphasis * and _ I suggest only using the * syntax as that is the most popular and clearest. There are two emphasis options, bold and italics.

Use **bold** syntax to turns something bold.



Italics is the same format but instead of two * you use one. *this is italics*.

Finally you have strikethrough that allows you to cross out text. This can be used for removing old text but leaving it there for posterity sake. It can also be used creatively.

You can do strikethrough by using ~~ before and after your text you want to ~~strikethrough~~.

As a final note, you can embed italics inside of bold or vice versa. This isn't used much but good to know. Just combine them like this:

***italics* inside of bold** or *vice **versa***


Horizontal lines

Horizontal lines can be created using ***, ___, or --- but I suggest using --- syntax for consistency.


Horizontal lines are good for breaking up sections inside of a header tag. It doesn't always work and I find it works best for small sections using a horizontal line before and after like this section.


One thing you might notice when using horizontal lines, if you do not leave a new line you will get some weird formatting, typically unexpected H1 type header. If you see headers where you don't expect them, check to see if you forgot to leave a new line on top/bottom of your horizontal rule.

I personally like to use horizontal lines between header sections as you can see I have done in this post. You can also choose to use graphical headers by using images.


Lists

There are two types of lists; ordered list and unordered list. The most popular is the unordered list, which is typically referred to as bullet points.

Unordered List

To do an unordered list, you simply use * in front of your items.

Shopping List
  • Eggs
  • Thick Toast
  • Cinnamon
  • Powered Sugar
  • Maple Syrup

This was created using the following syntax:

###### Shopping List
* Eggs
* Thick Toast
* Cinnamon
* Powered Sugar
* Maple Syrup

Ordered List

An ordered list is the same idea, just using numbers.

Creating French Toast
  1. beat eggs
  2. add cinnamon
  3. dip toast
  4. fry toast
  5. cover with powered cinnamon & drown in maple syrup
###### Creating French Toast
1. beat eggs
2. add cinnamon
3. dip toast
4. fry toast
5. cover with powered cinnamon & drown in maple syrup

Like emphasis you can combine these with any combination

  • Succeed on Hive
    1. add value
    2. post regularly
    3. engage audience
* Succeed on Hive
   1. add value
   2. post regularly
   3. engage audience

You can create sub items to your lists by using indents.

Making Toast
  • Collect two slices of bread
    • Open Bag
    • Pull out two slices
    • Close bag
  • Put bread in toaster
  • Toast
###### Making Toast

* Collect two slices of bread
    * Open Bag
    * Pull out two slices
    * Close bag
* Put bread in toaster
* Toast

Formatting

Markdown has some formatting but it lacks certain features that can be supplemented with HTML. The most common are:

  • Centering <center> </center>
  • Line Break </br>
  • Sub script <sub></sub>
  • Paragraphs <p></p>

You can also center a header.

This is a centered H1 header

# <center> This is a centered H1 header </center>

You can also use <table> although for simple tables there is a special markdown syntax you should use instead.


Linking

Linking is really easy and in most cases completely automatic. There is also a special link for usernames where you can just type in the username and Hive will automatically hyperlink to their profile page. For example @themarkymark.

One thing I think confuses people with this feature is punctuation. You can use commas, periods, and any other punctuation immediately after the username, and it will still be hyperlinked.

For example @themarkymark.

If you want to hyperlink something, but have a customized anchor text then you would use syntax similar to images but without the leading !.

My profile Page

[My profile Page](https://peakd.com/@themarkymark)

One thing people get confused with is hyperlinking with images.

This image is hyperlinked to my witness voting page.

[![](https://i.imgur.com/50dD8mn.gif)](https://hivesigner.com/sign/account-witness-vote?witness=themarkymark&approve=1)    

It's kind of confusing syntax, but basically you put an image using syntax in the space where you would usually use the anchor text.


Images

If you found this post, you most likely already know how to do images on Hive, but for the sake of completeness, I will cover them. There are also a few tricks you can do I will show you.

![ALT TEXT](IMAGE URL)

Alt text is primarily an SEO feature but also is used for text-only browsers. You can also center images by enclosing it with <center>![ALT TEXT](IMAGE URL)</center> tags.

Have you ever wanted to pull images to the left or right of your text?

This is with the image on the left.
This is with the image on the right.
<div class="pull-left">https://images.hive.blog/0x0/https://images.hive.blog/DQmNVx4k9XGFQYA7VPt8b9oitLQMaqp1JmAF8SMGhfK2ZXD/image.png</div> This is with the image on the left.

---

<div class="pull-right">https://images.hive.blog/0x0/https://images.hive.blog/DQmNVx4k9XGFQYA7VPt8b9oitLQMaqp1JmAF8SMGhfK2ZXD/image.png</div> This is with the image on the right.

Code Formatting

If you are a programmer and want to highlight some awesome code you want to share, you can use the standard github syntax for code. There are two ways to do this, lead a line with four spaces, or surround it with . Hive doesn't support syntax highlighting like Github does.

function test() {
 console.log("look ma’, no spaces");
}
```
function test() {
 console.log("look ma’, no spaces");
}
```

Whenever I specify commands to run in tutorials or code, I will use backticks to turn them into code blocks to make it easier to read and understand.

You can also use backticks to highlight preformatted text you don't want to be parsed and formatted.


Quotes Aka blockquotes

This is really simple and most people probably already know this.

Life is 10% what happens to you and 90% how you react to it.
Charles R. Swindoll

To create a blockquote, just need to add > to the start of the line. If you have multiple paragraphs you will need to use a > for each line or you get a new line without the blockquote and may run into formatting issues. You may notice the name is a bit smaller, this is a subscript using <sub></sub> tags that work really nice for citation. You will notice I do it for source for my images. You can see them both in action here:

> Life is 10% what happens to you and 90% how you react to it.
<sub>Charles R. Swindoll</sub>

You can nest blockquotes like this.

Hello

Hi

> Hello
> > Hi

I personally am not a big fan of blockquotes as they are rendered different depending on the front-end style and I usually use my own syntax to do quoting.

“You must be the change you wish to see in the world.”
Gandhi

*“You must be the change you wish to see in the world.”*
<sub>Gandhi</sub>

I basically use quotes in italics and do a sub text command on the next line.
I feel this looks better and is consistent. YMMV.

Finally, if you have blank lines in your quotes, just use a > on the blank line as such.

Michael says "Hello".

Bob responds, "Hi!".

> Michael says "Hello".
> 
> Bob responds, "Hi!".

Tables

Creating simple tables is really easy with markdown and not a commonly seen feature. A simple table looks like this:

First HeaderSecond Header
Content cell 1Content cell 2
Content column 1Content column 2

To create this table is as simple as:

First Header | Second Header
------------ | -------------
Content cell 1 | Content cell 2
Content column 1 | Content column 2

Tables can do wonders for making data more readable in posts and one of my favorite Markdown features.


Inline Code Characters

A feature that came real handy in this article is the ability to show formatting syntax inline by using the ` (backtick) character to avoid triggering the formatting.

This is not the standard apostrophe but the one under the ESC key that is shared with the tilde key ~. This will allow you to show special formatting syntax without triggering formatting. I also use it to highly commands typically entered in terminal windows like on Linux. For example:

sudo apt update

`sudo apt update`

Securely chat with me on Keybase

Why you should vote me as witness



0
0
0.000
59 comments
avatar

Aah I didn't know about the strikethrough thingies, good to know! Learn something new every day :-)

0
0
0.000
avatar

My posts aren't getting enough attention, will surely look into it, Thank you for the guidance. Followed you 😊❤️

0
0
0.000
avatar
(Edited)

Excellent publication. Thanks for refreshing these things in my head.

Although we are aware that not always a good markdown is necessary to receive good votes. Sure, the title of your post was:

How to post like a pro.

It wasn't:

Publish with markdown so as to aim for good votes.

Lol

Best regards.

0
0
0.000
avatar
(Edited)

Amazing work, 🙌 This is a really great and simplified guide to markdown. I also learned a few things that I didn't know already. Upvoted and Rehived.

Best wishes, keep up the good work!

0
0
0.000
avatar

It might be worth adding something that took me a while to figure out. None of the searches I processed listed this information, I figured it out through trial and error.

When using the centre option, everything following will center, even when /Center is used.

To realign left, < BR > (I can’t get the back tick to work) must be added (I’m sure < p > would work as well).

A couple other side notes:

  • dash ‘-‘ also produces bullet points and is easier to add than the alternative, *

  • if one wants space between headers, br needs to be used on the next line

  • to get text beside a photo, the image needs to be small enough to allow space; markdown doesn’t accept HTML code sizing. Either download or design a small enough variation, or edit.

  • emphasis and bold star * codes don’t work after punctuation, so the * must be placed before the period, question mark, or whatever.

  • more than one < sub > can be used to create even smaller text than the small text. one sub two subs three subs four subs

  • two lines ____ with italic font in between cad serve perfectly as block quote or links

  • larger headers can also be used for block quotes, or links.

  • headers and spacing can be applied differently than standard use, for creative and visual appealing formatting (especially for poets)



Mark, thank you for your list. There were a few things that I didn’t already know, and one partially behaviours I’ve been trying to get to work for me. Very handy.

0
0
0.000
avatar

When using the centre option, everything following will center, even when /Center is used.

This isn't really true, but there are some oddities that do cause a center to be unclosed. But most cases <center></center> works fine.

emphasis and bold star * codes don’t work after punctuation, so the * must be placed before the period, question mark, or whatever.

Sure they do. You just can't have a space between it.

0
0
0.000
avatar

to get text beside a photo, the image needs to be small enough to allow space; markdown doesn’t accept HTML code sizing. Either download or design a small enough variation, or edit.

You can resize images via code:

Tiny Picture links back to my blog:
                             

By combining the resize and making it an image link you can have nice sized images for a line of icon links.
<center><sub>Tiny Picture links back to my blog:</sub></center><center><a href="https://peakd.com/@bashadow"><img src=https://images.hive.blog/100x50/https://files.peakd.com/file/peakd-hive/bashadow/CSiw0Xl5-avatar3.png></a></center>
This is the segment that allows the resize https://images.hive.blog/100x50/

To add blank spaces between the images use the HTML Code &nbsp; I find stringing 5 blank spaces works pretty good.

0
0
0.000
avatar

You must have seen me bitching about Markdown yesterday. LOL

0
0
0.000
avatar

Someone brought it up in POB discord, and I linked my original article back on Steem (2017). I figured it was due for an update. I think knowing Markdown is very important and something everyone should learn.

0
0
0.000
avatar

I've bookmarked it to refer to. I'm still not a fan of it, though. I prefer HTML.

0
0
0.000
avatar

Agreed. I didn't know this stuff. I've seen something before tbat tiuched on italics and bold but i had forgotten that. I need to play around with it to make it more reflexively accessible.

0
0
0.000
avatar

Thanks for this! I've bookmarked it so I can refer to it now and again. Line-breaks were one thing I was struggling with (I don't know why I didn't just try the HTML tag!).

0
0
0.000
avatar

This is a great guide and very useful, I have cross posted it to the Hive Affiliates Community to be included in our knowledgebase for newbies and for growing as a content creator.

There is one question I have about the <center></center> element, when posting 3speak videos they wrap the video embed in that, but there is a problem with it since it makes the whole post centered, is there some way to make it work correctly and not just remove that element which I currently do?

0
0
0.000
avatar

Thanks for this. Wasn't aware you could mix MD with HTML. May start giving that a shot.

0
0
0.000
avatar

Yeah, I can hyperlink with a image now thank you, this is awsome and I did not know that before hahha cool 🍀
!BEER 🍻
!giphy markdown madness

Posted using Dapplr

avatar

Great resource for a bunch of collections I think.

0
0
0.000
avatar

Posting "like a pro" is one thing, but the success of posts is influenced by many factors on the Hive blockchain. There are a lot of people, who post "like a pro", and their posts are still ignored or overlooked.

0
0
0.000
avatar

We're working on this flaw. There are some community updates coming soon along with proposal requests to help improve on curating/moderating. I can't promise it will fix everything 100%. I can promise, though, we're trying to improve things.


Posted via proofofbrain.io

0
0
0.000
avatar

Awesome! I've been looking for something like this for a while now!

0
0
0.000
avatar

Hello, very good your publication, I have learned some details of the use of Markdown, I did not know and I want to use to improve my publications. Thank you very much for sharing your knowledge. Regards

0
0
0.000
avatar

Thanks for sharing this guild it will really work a long way for me

0
0
0.000
avatar

Thanks for sharing this, already know some of them but your detailing gift me with some new tricks

0
0
0.000
avatar

It quite easy on desktop, but on mobile is kind of a nightmare.

0
0
0.000
avatar

Great guide to find it always at hand. Markdown has some plugins but they are paid. Very useful the final instruction for Linux. I use Xubuntu. Greetings and thanks for sharing this guide @themarkymark.

0
0
0.000
avatar

Typing like a pro is very essential,but the message what is been typing is going to pass is very much vital too

0
0
0.000
avatar

Genial por fin puedo centrar mis imágenes! Util información gracias.

0
0
0.000
avatar

Hello @themarkymark such a great post. There is so much I can now do, which my app never allowed me to do before. Thank you!! Matt

0
0
0.000
avatar

Thanks a lot for the useful guide! Bookmarked for later :)

0
0
0.000
avatar

Re-hived and bookmarked. This is awesome. Thank you.

0
0
0.000
avatar

Superb! Bookmarked! It will be my guide on formatting my blogs here.
Thank you! 🙂

0
0
0.000
avatar

Muy completa tu explicación. Lo felicito. Aprendí nuevas cosas con solo leer

0
0
0.000
avatar

Thanks for the tutorial. Some items I already knew and use daily. I did have one item that baffles me.

When I click on the ordered list feature, type my 1st list item; then new paragraph under that, when I begin the 2nd list item, it displays #2 in the markdown draft, but reverts to number 1 in the preview.

What am I doing wrong?

0
0
0.000
avatar

Wow thanks for sharing, this is amazing, I feel like a newbies.

0
0
0.000
avatar

This publication is certainly very complete. But I have a question, why when I create double column
what should go to the left stays on the right side and there is no way to make it go to the left side? If it is assumed that I am using the correct codes, that should not happen.

0
0
0.000
avatar

Thank you and I was meaning to get back to this, but the powercuts are sowing havoc over here.
Reblogged for future refs and to let others see it.

0
0
0.000
avatar

Very interesting and detailed guide on post formatting. Thanks for taking out time to come up with this. Really educating. Bookmarked!


Posted via proofofbrain.io

0
0
0.000
avatar

What are the best ways to embed symbols not found on standard keyboards? I know on Windows, I can use the alt key and the number pad to fill a lot of these needs. Linux so far does not seem to offer that kind of functionality, although I admit I have not delved very deep. At any rate, it might be a useful follow-up if you want to write it before I get around to it myself.

0
0
0.000
avatar

Each platform usually has a tool for entering in symbols.

Like on Windows there is the Character Map Tool

Mac OS has a character palette

image.png

On Linux, there are multiple character map tools depending on the desktop you are using.

For example, GNOME.

image.png

0
0
0.000
avatar

Awepost post @themarkymark, thanks a lot for this input.
It will be very useful to have all of it explained so clearly!

0
0
0.000
avatar

Sweet resource Markymark, thanks for putting it together

0
0
0.000
avatar

Nice writeup. I just hope I'll be able to master all so that I'll be a pro in my postings on hive...

0
0
0.000
avatar

Wow! It's been very helpful, just what's I'm looking for! Thanks a lot!

0
0
0.000
avatar

Hi, your post is amazing and I really liked it.

I have a question, is it possible to put an "anchor link" here in ecency? I would love to know, thank you!

0
0
0.000
avatar
(Edited)

Estaba buscando algo como esto no sabía como poner líneas horizontales, excelente publicación para alguien nuevo como yo, gracias. Me lo guardaré.

0
0
0.000