How to Richly Format Your Hive Posts with HTML and Markdown

HIVE formatting.png

It's a sad fact of the 21 century that very little of our content will get read fully unless we put in the extra effort.

While the Hive community is small right now, it is more than just lack of eyeballs - the eyeballs we do have are distracted and overwhelmed with a wealth of options.

That means when someone DOES glance at our blog posts, we need to hold that attention, and try and get the viewer to become a reader.

Seeing as many of us are visual creatures, a large portion of the engagement will come from making our posts look striking and readable.

Headlines

Break up the article into skimmable headlines. Tell your reader how your article is organized into topics. This will allow the reader first of all to orient themselves within a longer article, but also the headlines alone should tell somewhat of a story.

In Markdown we use the # symbol. Each # is another level of headline. I tend to use two, making it in HTML terms a <h2>.

## Subhead

Images

Just by including images you can add visual interest and illustrate your point. Most of the Hive front-ends allow you to drag and drop in the place where you want the image to go and add the markup for you, but the manual syntax looks like this:

![Caption](url)

IPFS

What many people don't know is the Hive blog image source can be resized. Check out the URL below.

https://images.hive.blog/0x0/https://files.peakd.com/file/....png

Where it says 0x0 you can change that to the size you wish to shrink your image down to, for example 32x32 would appear like so:

IPFS

Links

Links are of course super important, and they appear a lot like the syntax for images but without the !

[Link Text](https://website.xyx)

Authority Bloggers

Keep in mind when relative/local linking that just because you used Peakd or Ecency to write your post, doesn't mean someone will be reading on those sites.

Tag a Friend

Another key item that we can use sparingly is to keep a conversation going by tagging another Hive user. We simply use their @ name like so

@makerhacks @makerhacks

Tables

Another rarely used item is the table. Most of the front-ends do not support the full syntax which would allow you to align the contents of the columns.

A markdown table is simply your text divided with the pipe symbol |. On the second line, we would ordinarily set the alignment (:- left, :-: centered, -: right) but as mentioned, this is necessary but tends to be ignored.

| Column | Column | Column  |
| :-- | --: | :-- |
| XX | 1 | 11/11/11 |
| XXXX | 2 | 22/22/22 |

Column	Column	Column
XX	1	11/11/11
XXXX	2	22/22/22

Text and Image Alignment

Speaking of alignment, we can align our text also.

Most of the time we are going to use centered or left-aligned text (remembering that our content will be read on multiple front-ends).

<center>
Centered
</center>

Centered

<div class="text-right">
Aligned right
</div>

Aligned right

We can align images too, which is handy if you want to have your text flow around your image especially. Take note that after the <div> you need a line of blank space for some reasons (it's an old bug that has stuck around).

<div class="pull-left">

![IPFS](https://images.hive.blog/32x32/https://files.peakd.com/file/peakd-hive/makerhacks/AL4XAjkboGsH12A1aJsrmFYYCKomCvRescR3qwmby6PiDu5UeKCSH5vJXkJAQac.png)
</div>
<div class="pull-right">

![IPFS](https://images.hive.blog/32x32/https://files.peakd.com/file/peakd-hive/makerhacks/AL4XAjkboGsH12A1aJsrmFYYCKomCvRescR3qwmby6PiDu5UeKCSH5vJXkJAQac.png)</div>

IPFS

Another bug is the CSS doesn't include a clear fix so we need to use a horizontal line to prevent the following text still wrapping around the floated images.

Horizontal Separator Line

To add a separator just use three hyphens or the HTML tag as normal.

--- or <hr>

Markdown and HTML Formatting Reference

Screen Shot 2022-02-21 at 1.23.17 PM.png

There is a lot that can be done with our weird mixture of markdown and HTML, the original references and the Github variant are also handy to check out:

This was a whirlwind tour around the basic formatting available on Hive front-ends. I didn't include the stuff that most people will have at the very least accessed from the toolbars on the various editors, but I have a more complete reference for you now below:

MARKDOWN	HTML
`italic or _italic_`	`<em>italics</em>`
`bold or __bold__`	`<strong>bold</strong>`
`~~strikethrough~~`	`<s>strike</s> / <del>strike</del>`
`[Link Text](url)`	`<a href="url">Link Text</a>`
`![Caption](url)`	`<img src="url" alt="Alt text">`
`# Headline 1`	`<h1>Headline 1</h1>`
`## Headline 2`	`<h2>Headline 2</h2>`
`### Headline 3`	`<h3>Headline 3</h3>`
`#### Headline 4`	`<h4>Headline 4</h4>`
`##### Headline 5`	`<h5>Headline 5</h5>`
`###### Headline 6`	`<h6>Headline 6</h6>`
`inline code`	`<code>inline code</code>`
```code```	`<code>code block</code>`
`> Blockquote`	`<blockquote>Quote</blockquote>`
	`<sup>Superscript</sup>`
	`<sub>Subscript</sub>`
`* Bullet`	`<ul><li>Bullet</li><li>Bullet</li></ul>`
`1. List`	`<ol><li>List item</li><li>List item</li></ol>`
`---`	`<hr>`