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.
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
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](
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 <br>:
 before and after the <br> 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 <br>, like so:
</blockquote>
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.
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">
</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.
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
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.
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!