<p dir="auto">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.
<p dir="auto">This is an updated version of my previous <a href="https://peakd.com/steemit/@themarkymark/markdown-101-how-to-make-kick-ass-posts-on-steemit" target="_blank" rel="noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">Markdown 101 guide.
<p dir="auto">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.
<p dir="auto">I will cover some HTML elements in this guide as well as they relate to posting on Hive.
<h2>Headers
<p dir="auto">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.
<p dir="auto">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.
<p dir="auto">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 <code># in markdown. If you want to highlight a section of your post you would use the <code># pound sign at the start of a line.
<h2>This is the most common header (##)
<p dir="auto">There are six headers available, each one is smaller than the last. To create a smaller header, just add # to your header.
<ul>
<li>Header 1 #
<li>Header 2 ##
<li>Header 3 ###
<li>Header 4 #####
<li>Header 5 #####
<li>Header 6 ######
<p dir="auto">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.
<p dir="auto">Generally it is good practice to only use one main H1 (#) once in your document and use H2 (##) or H3 (###) for your other headers.
<p dir="auto">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.
<hr />
<h2>Emphasis
<p dir="auto">Emphasis are the "air quotes" of markdown and HTML.
<p dir="auto"><center><br /><br />
<span>
<img src="https://images.hive.blog/0x0/https://steemitimages.com/DQmRhLXVeC247nwkPDAJrSCKjSpvswdPztGVAtpBDZ6o56H/giphy.gif" />
<p dir="auto">They are <em>important for <strong>highlighting or "emphasizing" keywords. Think of when your mother and father would annunciate words when speaking to you.
<p dir="auto">Although there are two ways to do emphasis <code>* and <code>_ I suggest only using the <code>* syntax as that is the most popular and clearest. There are two emphasis options, bold and italics.
<p dir="auto">Use <code>**bold** syntax to turns something <strong>bold.
<p dir="auto"><center><br /><br />
<span>
<img src="https://images.hive.blog/0x0/https://steemitimages.com/DQmeK5p1Jr4mrwPx9Ce9VYbvVjHDd9hteT9Q6yVnpnMB2p5/giphy.gif" />
<p dir="auto"><em>Italics is the same format but instead of two <code>* you use one. <code>*this is italics*.
<p dir="auto">Finally you have <del>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.
<p dir="auto">You can do <del>strikethrough by using <code>~~ before and after your text you want to <code>~~strikethrough~~.
<p dir="auto">As a final note, you can embed <strong><em>italics inside of bold or <em>vice <strong>versa. This isn't used much but good to know. Just combine them like this:
<p dir="auto"><code>***italics* inside of bold** or *vice **versa***
<hr />
<h2>Horizontal lines
<p dir="auto">Horizontal lines can be created using <code>***, <code>___, or <code>--- but I suggest using <code>--- syntax for consistency.
<hr />
<p dir="auto">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.
<hr />
<p dir="auto">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.
<p dir="auto">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.
<hr />
<h2>Lists
<p dir="auto">There are two types of lists; <strong>ordered list and <strong>unordered list. The most popular is the unordered list, which is typically referred to as <em>bullet points.
<h4>Unordered List
<p dir="auto">To do an unordered list, you simply use <code>* in front of your items.
<h6>Shopping List
<ul>
<li>Eggs
<li>Thick Toast
<li>Cinnamon
<li>Powered Sugar
<li>Maple Syrup
<p dir="auto">This was created using the following syntax:
<pre><code>###### Shopping List
* Eggs
* Thick Toast
* Cinnamon
* Powered Sugar
* Maple Syrup
<h4>Ordered List
<p dir="auto">An ordered list is the same idea, just using numbers.
<h6>Creating French Toast
<ol>
<li>beat eggs
<li>add cinnamon
<li>dip toast
<li>fry toast
<li>cover with powered cinnamon & drown in maple syrup
<pre><code>###### Creating French Toast
1. beat eggs
2. add cinnamon
3. dip toast
4. fry toast
5. cover with powered cinnamon & drown in maple syrup
<p dir="auto">Like <em>emphasis you can combine these with any combination
<ul>
<li>Succeed on Hive
<ol>
<li>add value
<li>post regularly
<li>engage audience
<pre><code>* Succeed on Hive
1. add value
2. post regularly
3. engage audience
<p dir="auto">You can create sub items to your lists by using indents.
<h6>Making Toast
<ul>
<li>Collect two slices of bread
<ul>
<li>Open Bag
<li>Pull out two slices
<li>Close bag
<li>Put bread in toaster
<li>Toast
<pre><code>###### Making Toast
* Collect two slices of bread
* Open Bag
* Pull out two slices
* Close bag
* Put bread in toaster
* Toast
<hr />
<h1>Formatting
<p dir="auto">Markdown has some formatting but it lacks certain features that can be supplemented with HTML. The most common are:
<ul>
<li>Centering <code><center> </center>
<li>Line Break <code></br>
<li>Sub script <code><sub></sub>
<li>Paragraphs <code><p></p>
<p dir="auto">You can also center a header.
<h1><center> This is a centered H1 header
<p dir="auto"><code># <center> This is a centered H1 header </center>
<p dir="auto">You can also use <code><table> although for simple tables there is a special markdown syntax you should use instead.
<hr />
<h2>Linking
<p dir="auto"><span>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 <a href="/@themarkymark">@themarkymark.
<p dir="auto">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.
<p dir="auto"><code>For example @themarkymark.
<p dir="auto">If you want to hyperlink something, but have a customized anchor text then you would use syntax similar to images but without the leading !.
<p dir="auto"><a href="https://peakd.com/@themarkymark" target="_blank" rel="noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">My profile Page
<p dir="auto"><code>[My profile Page](https://peakd.com/@themarkymark)
<p dir="auto">One thing people get confused with is hyperlinking with images.
<p dir="auto"><a href="https://hivesigner.com/sign/account-witness-vote?witness=themarkymark&approve=1" target="_blank" rel="noreferrer noopener" title="This link will take you away from hive.blog" class="external_link"><img src="https://images.hive.blog/0x0/https://steemitimages.com/DQmPkQhAQceC7aHr4Gy5GKv7LMoiy47P7PyaNCeZBHMpFke/white-bg-with-drop-shadow.gif" />
<p dir="auto">This image is hyperlinked to my witness voting page.
<pre><code>[](https://hivesigner.com/sign/account-witness-vote?witness=themarkymark&approve=1)
<p dir="auto">It's kind of confusing syntax, but basically you put an image using <img src="https://images.hive.blog/768x0/" srcset="https://images.hive.blog/768x0/ 1x, https://images.hive.blog/1536x0/ 2x" /> syntax in the space where you would usually use the anchor text.
<hr />
<h2>Images
<p dir="auto">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.
<p dir="auto"><code>
<p dir="auto">Alt text is primarily an SEO feature but also is used for text-only browsers. You can also center images by enclosing it with <code><center></center> tags.
<p dir="auto"><strong>Have you ever wanted to pull images to the left or right of your text?
<div class="pull-left"><span><img src="https://images.hive.blog/0x0/https://images.hive.blog/DQmNVx4k9XGFQYA7VPt8b9oitLQMaqp1JmAF8SMGhfK2ZXD/image.png" /> This is with the image on the left.
<hr />
<div class="pull-right"><span><img src="https://images.hive.blog/0x0/https://images.hive.blog/DQmNVx4k9XGFQYA7VPt8b9oitLQMaqp1JmAF8SMGhfK2ZXD/image.png" /> This is with the image on the right.
<hr />
<pre><code><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.
<hr />
<h1>Code Formatting
<p dir="auto">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 <code>. Hive doesn't support syntax highlighting like Github does.
<pre><code>function test() {
console.log("look ma’, no spaces");
}
<pre><code>```
function test() {
console.log("look ma’, no spaces");
}
```
<p dir="auto">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.
<p dir="auto">You can also use backticks to highlight preformatted text you don't want to be parsed and formatted.
<hr />
<h2>Quotes <code>Aka blockquotes
<p dir="auto">This is really simple and most people probably already know this.
<blockquote>
<p dir="auto">Life is 10% what happens to you and 90% how you react to it.<br />
<sub>Charles R. Swindoll
<p dir="auto">To create a blockquote, just need to add <code>> to the start of the line. If you have multiple paragraphs you will need to use a <code>> 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 <code><sub></sub> tags that work really nice for citation. You will notice I do it for <strong>source for my images. You can see them both in action here:
<pre><code>> Life is 10% what happens to you and 90% how you react to it.
<sub>Charles R. Swindoll</sub>
<p dir="auto">You can nest blockquotes like this.
<blockquote>
<p dir="auto">Hello
<blockquote>
<p dir="auto">Hi
<pre><code>> Hello
> > Hi
<p dir="auto">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.
<p dir="auto"><em>“You must be the change you wish to see in the world.”<br />
<sub>Gandhi
<pre><code>*“You must be the change you wish to see in the world.”*
<sub>Gandhi</sub>
<p dir="auto">I basically use quotes in italics and do a sub text command on the next line.<br />
I feel this looks better and is consistent. YMMV.
<p dir="auto">Finally, if you have blank lines in your quotes, just use a > on the blank line as such.
<blockquote>
<p dir="auto">Michael says "Hello".
<p dir="auto">Bob responds, "Hi!".
<pre><code>> Michael says "Hello".
>
> Bob responds, "Hi!".
<hr />
<h2>Tables
<p dir="auto">Creating simple tables is really easy with markdown and not a commonly seen feature. A simple table looks like this:
<div class="table-responsive"><table>
<thead>
<tr><th>First Header<th>Second Header
<tbody>
<tr><td>Content cell 1<td>Content cell 2
<tr><td>Content column 1<td>Content column 2
<p dir="auto">To create this table is as simple as:
<pre><code>First Header | Second Header
------------ | -------------
Content cell 1 | Content cell 2
Content column 1 | Content column 2
<p dir="auto">Tables can do wonders for making data more readable in posts and one of my favorite Markdown features.
<hr />
<h1>Inline Code Characters
<p dir="auto">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.
<p dir="auto">This is not the standard apostrophe but the one under the ESC key that is shared with the tilde key <code>~. 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:
<p dir="auto"><code>sudo apt update
<pre><code>`sudo apt update`
<hr />
<p dir="auto"><center>Securely chat with me on <a href="https://keybase.io/officialmarky" target="_blank" rel="noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">Keybase<br />
<center><span><img src="https://images.hive.blog/0x0/https://steemitimages.com/DQmcWxV1dpA1eAtw2ipwZiWZkydyVNU5LaLa2Ak1GUnbGmS/The-Marky-Mark.png" />
<h1><center> <a href="https://peakd.com/witness-category/@themarkymark/why-you-should-vote-for-themarkymark-as-witness" target="_blank" rel="noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">Why you should vote me as witness
<p dir="auto"><a href="https://hivesigner.com/sign/account-witness-vote?witness=themarkymark&approve=1" target="_blank" rel="noreferrer noopener" title="This link will take you away from hive.blog" class="external_link"><img src="https://images.hive.blog/0x0/https://steemitimages.com/DQmPkQhAQceC7aHr4Gy5GKv7LMoiy47P7PyaNCeZBHMpFke/white-bg-with-drop-shadow.gif" />
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!).
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
Via Tenor
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:
It wasn't:
Lol
Best regards.
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!
My posts aren't getting enough attention, will surely look into it, Thank you for the guidance. Followed you 😊❤️
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.
<p dir="auto">There is one question I have about the <code><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?You must have seen me bitching about Markdown yesterday. LOL
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.
I've bookmarked it to refer to. I'm still not a fan of it, though. I prefer HTML.
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.
Aah I didn't know about the
strikethroughthingies, good to know! Learn something new every day :-)Ftfy
Hah, fair!
Re-hived and bookmarked. This is awesome. Thank you.
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?
Thanks a lot for the useful guide! Bookmarked for later :)
Thanks for sharing this guild it will really work a long way for me
Muy completa tu explicación. Lo felicito. Aprendí nuevas cosas con solo leer
Thank you very much for this useful guide @themarkymark!
Really wish hive supported LaTeX equations with the $$ syntax!
Awesome! I've been looking for something like this for a while now!
Typing like a pro is very essential,but the message what is been typing is going to pass is very much vital too
Thanks for sharing this, already know some of them but your detailing gift me with some new tricks
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
Dude!!! Thank you!!!
Great resource for a bunch of collections I think.
Thanks for this. Wasn't aware you could mix MD with HTML. May start giving that a shot.
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
Genial por fin puedo centrar mis imágenes! Util información gracias.
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.
It quite easy on desktop, but on mobile is kind of a nightmare.
Wow thanks for sharing, this is amazing, I feel like a newbies.
Thank you for your help!
What an educative article... wow... nice one
View or trade
BEER.!PIZZA
$PIZZA@themarkymark! I sent you a slice of on behalf of @cre47iv3.
Learn more about $PIZZA Token at hive.pizza (2/10)
Thank you for updating this tool!
Superb! Bookmarked! It will be my guide on formatting my blogs here.
Thank you! 🙂
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.
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.
Very interesting and detailed guide on post formatting. Thanks for taking out time to come up with this. Really educating. Bookmarked!
It will be very useful to have all of it explained so clearly!Awepost post @themarkymark, thanks a lot for this input.
Sweet resource Markymark, thanks for putting it together
Nice writeup. I just hope I'll be able to master all so that I'll be a pro in my postings on hive...
Wow! It's been very helpful, just what's I'm looking for! Thanks a lot!
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!
Very helpful indeed, wowww
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é.
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.
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.
@scholaris Great news indeed!
I feel like it is great news. I'm looking forward to seeing it myself.
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.
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
On Linux, there are multiple character map tools depending on the desktop you are using.
For example, GNOME.