Advanced formatting tips in Hive / PeakD

Introduction

When I first joined Hive, I leaned on PeakD formatting guides to learn some important tricks, quickly. Here's just a few for reference:

Those articles were very helpful and sometimes I still go back to them to see if I'm missing anything important or when I don't remember how to do something.

But after a while I starting bumping into situations where the formatting wasn't to my liking or had some limitations. By fiddling around a bit I managed to find solutions to some of those situations and that is what I aim to explain with this blog post.

Note: these solutions do not work on Ecency or Hive.blog.

hive divider green.png

First example

An imported image (it was dragged from the file explorer to the editing box in PeakD) with a paragraph of text immediately after.

This is the markdown

![mkhWAeEYzVJHWnl3DvOZ--4--16vlm_50pct.jpg]()

And this is the result

This AI image was generated at https://creator.nightcafe.studio/ by me using one of their free models.

Centering images without explicit alignment HTML

This one is easy. If you keep the default caption, which corresponds to the file name (mkhWAeEYzVJHWnl3DvOZ--4--16vlm_50pct.jpg), the caption is omited and the image aligns to the left by default, as demonstrated above. However, if you just modify the caption then image will become automatically centered:

![Mage lady casting a spell]()

Mage lady casting a spell

This AI image was generated at https://creator.nightcafe.studio/ by me using one of their free models.

Managing line break size between an image and a paragraph

In the initial example the paragraph starting with "This AI image was generated..." is displayed right below the image, without any meaningful spacing, even if you add a line break yourself with the Enter key.

If you wish to create a wider gap you can use for example  :

![mkhWAeEYzVJHWnl3DvOZ--4--16vlm_50pct.jpg]()
 
This AI image was generated at https://creator.nightcafe.studio/ by me using one of their free models.

This AI image was generated at https://creator.nightcafe.studio/ by me using one of their free models.

Without any line breaks (Enter key) before and after the   the gap is very wide, as demonstrated above. The same is true if you add one line break before and another after.

The trick to make the gap slightly smaller is to add a line break only after  , like so:

![mkhWAeEYzVJHWnl3DvOZ--4--16vlm_50pct.jpg]()
 

This AI image was generated at https://creator.nightcafe.studio/ by me using one of their free models.

Another option worth experimenting with in some situations is to replace   with  . As before, you should try and play with the Enter key line breaks and see if they affect the formatting somehow.

Quoting markdown

These next two I figured out while composing this very post 😀.
If you want to show markdown in a quote, you cannot use '>' at the beginning of the line to denote a quote, it won't work. But if you use <blockquote></blockquote> it will work:

<blockquote>
![image.png](https://files.peakd.com/file/peakd-hive/agrante/23tGXT1Rj6jXj4oHuqWwjJhvoozBSBzHtoGop6zhGQAk5TAh8Sj8iNdLnyrNga6cNQCrv.png)
</blockquote>

![image.png]()

Quoting HTML

To actually quote or escape HTML (note that markdown is not HTML), <blockquote></blockquote> won't be enough. In this case you need to place the HTML tags between 3 backquotes ```. You can see the outcome in the section just above.

hive divider green.png

Second example

An image aligned to the one side using divs:

<div class="pull-right">
https://files.peakd.com/file/peakd-hive/agrante/AJivGhZSVuDd53eXi5Gha4efhXyiHrXjkkFq4V7Cgcgi886JqKE51zaniCCBuEN.jpg
</div>

A mysterious woman draws a light spell during a starry night. She's in a planet in another galaxy. A gentle breeze makes her red hair and her green long dress flow to her left flank. What could the spell be? We don't know. All we know is that a bundle of light strings flow from her hand and linger in the hair? Is she human? Or is she alien? We cannot say. But her abilities are clearly magical and she yields them with poise and grace. Could it be a man with long hair? Possibly. Are they alone? We don't know. Such a mysterious scene. There is definitely a lot of unanswered questions left to the observer's imagination.

Preserving image captions when setting lateral alignment

But now how does one add a caption under the image, similar to the first example? When using divs the caption markdown doesn't just work in any condition. There is a small trick: there needs to be a line break between <div class="pull-right"> and the markdown with the caption and the image URL (and nowhere else):

<div class="pull-right">

![Woman draws light magic at night](https://files.peakd.com/file/peakd-hive/agrante/AJivGhZSVuDd53eXi5Gha4efhXyiHrXjkkFq4V7Cgcgi886JqKE51zaniCCBuEN.jpg)
</div>

Woman draws light magic at night

It is also possible to get a similar result with sub and center, but the end result is not italicized and there is a bigger gap between the image and the caption, which I don't like so much. The markdown version above is also simpler and faster to put in place than this HTML alternative.

<div class=pull-right>
https://files.peakd.com/file/peakd-hive/agrante/AJivGhZSVuDd53eXi5Gha4efhXyiHrXjkkFq4V7Cgcgi886JqKE51zaniCCBuEN.jpg 
<center><sub>Woman draws light magic at night</sub></center> 
</div>

_{Woman draws light magic at night}

Adding source links to captions

Oftentimes you need to source an image in the caption. In this case I couldn't make it work with markdown (it tries to display the image and fails). So the solution I found was to use the HTML solution just above.

When aligning the image to a side there are a few caveats though:

There must be an empty line break between the image URL and the caption;
The whole caption line including the center and sub tags must be in a single line without breaks;
I couldn't find a way to keep the caption snugly close to the image. If someone finds another way to place the caption closer to the image, let me know!

<div class=pull-right>
https://files.peakd.com/file/peakd-hive/agrante/AJivGhZSVuDd53eXi5Gha4efhXyiHrXjkkFq4V7Cgcgi886JqKE51zaniCCBuEN.jpg

<center><sub>Woman draws light magic at night [source](https://creator.nightcafe.studio/studio?open=creation&panelContext=%28jobId%3ACbqpZJgFulBHAcgUYZ65%29)</sub></center>
</div>

_{Woman draws light magic at night source}

If the image is going to be centered, the solution is simpler. The caption will also be placed closer to the image. No empty line breaks in this case, but the sub line must have a line break to separate it from the URL.

<center>https://files.peakd.com/file/peakd-hive/agrante/AJivGhZSVuDd53eXi5Gha4efhXyiHrXjkkFq4V7Cgcgi886JqKE51zaniCCBuEN.jpg
<sub>Woman draws light magic at night [source](https://creator.nightcafe.studio/studio?open=creation&panelContext=%28jobId%3ACbqpZJgFulBHAcgUYZ65%29p)</sub></center>

_{Woman draws light magic at night source}

hive divider green.png

I hope you find these tricks helpful to improve the formatting of your posts.

If you know any other cool tricks let me know in the comments and I will add them to this post.

Thanks for reading!

Sort:

Trending

[-]

alex-rourke (73) last month

Super useful! bookmarked. Do you know how to do the green dropdown boxes some users have on Hive. I've seen a few people use them when posting in two or more languages. I'm not sure if it's markdown or HTML.

$0.00

1 vote