## 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: - https://hive.blog/hive-148441/@ziabutt383/how-to-post-on-hive-for-beginner-s - https://hive.blog/hive-143402/@axiebuzz/formatting-guide-how-to-make-your-hive-articles-stand-out-to-attract-more-views-and-upvotes - https://medium.com/@chrisgarrett/how-to-richly-format-your-hive-posts-with-html-and-markdown-bc3b348b002 - https://read.cash/@keeneek/how-i-format-my-blog-on-hive-a12a3659 - https://peakd.com/qurator/@qurator/standard-image-sourcing-for-the-qurator-project
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](https://files.peakd.com/file/peakd-hive/agrante/23swk8GpwFSgbf3ixzAXN9x6yqPuHChsqRHkVzv2HzfvktjSAF6XQSkxpGe4ZqfPEFnX5.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](https://files.peakd.com/file/peakd-hive/agrante/AJkLKU8WVKR2Ni39wK1Cyu5cP5zoSjhwVafFtMJ6u9zEwFj5ULCpcFfZzLhnJnf.jpg)

And this is the result ![mkhWAeEYzVJHWnl3DvOZ--4--16vlm_50pct.jpg](https://files.peakd.com/file/peakd-hive/agrante/AJkLKU8WVKR2Ni39wK1Cyu5cP5zoSjhwVafFtMJ6u9zEwFj5ULCpcFfZzLhnJnf.jpg) 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](https://files.peakd.com/file/peakd-hive/agrante/AJkLKU8WVKR2Ni39wK1Cyu5cP5zoSjhwVafFtMJ6u9zEwFj5ULCpcFfZzLhnJnf.jpg)

![Mage lady casting a spell](https://files.peakd.com/file/peakd-hive/agrante/AJkLKU8WVKR2Ni39wK1Cyu5cP5zoSjhwVafFtMJ6u9zEwFj5ULCpcFfZzLhnJnf.jpg) 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](https://files.peakd.com/file/peakd-hive/agrante/AJkLKU8WVKR2Ni39wK1Cyu5cP5zoSjhwVafFtMJ6u9zEwFj5ULCpcFfZzLhnJnf.jpg) `
` This AI image was generated at https://creator.nightcafe.studio/ by me using one of their free models.

![mkhWAeEYzVJHWnl3DvOZ--4--16vlm_50pct.jpg](https://files.peakd.com/file/peakd-hive/agrante/AJkLKU8WVKR2Ni39wK1Cyu5cP5zoSjhwVafFtMJ6u9zEwFj5ULCpcFfZzLhnJnf.jpg)
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](https://files.peakd.com/file/peakd-hive/agrante/AJkLKU8WVKR2Ni39wK1Cyu5cP5zoSjhwVafFtMJ6u9zEwFj5ULCpcFfZzLhnJnf.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 `

` it will work: ```

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

```

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

--- ### Quoting HTML To actually quote or escape HTML (note that markdown *is not* HTML), `

` 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. ![image.png](https://files.peakd.com/file/peakd-hive/agrante/23tGXuS5o7wSj6Xb2t7LRwKY27KKXr3AfkTLtjzJnbueap9nxichF2HizFjQY7oj2xdqE.png) ![hive divider green.png](https://files.peakd.com/file/peakd-hive/agrante/23swk8GpwFSgbf3ixzAXN9x6yqPuHChsqRHkVzv2HzfvktjSAF6XQSkxpGe4ZqfPEFnX5.png) ## Second example An image aligned to the one side using divs: ```

https://files.peakd.com/file/peakd-hive/agrante/AJivGhZSVuDd53eXi5Gha4efhXyiHrXjkkFq4V7Cgcgi886JqKE51zaniCCBuEN.jpg

``` ---

https://files.peakd.com/file/peakd-hive/agrante/AJivGhZSVuDd53eXi5Gha4efhXyiHrXjkkFq4V7Cgcgi886JqKE51zaniCCBuEN.jpg

` and the markdown with the caption and the image URL (and nowhere else): ```

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

```

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

https://files.peakd.com/file/peakd-hive/agrante/AJivGhZSVuDd53eXi5Gha4efhXyiHrXjkkFq4V7Cgcgi886JqKE51zaniCCBuEN.jpg _{Woman draws light magic at night}

```

https://files.peakd.com/file/peakd-hive/agrante/AJivGhZSVuDd53eXi5Gha4efhXyiHrXjkkFq4V7Cgcgi886JqKE51zaniCCBuEN.jpg _{Woman draws light magic at night}

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

```

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. --- 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. ``` https://files.peakd.com/file/peakd-hive/agrante/AJivGhZSVuDd53eXi5Gha4efhXyiHrXjkkFq4V7Cgcgi886JqKE51zaniCCBuEN.jpg _{Woman draws light magic at night [source](https://creator.nightcafe.studio/studio?open=creation&panelContext=%28jobId%3ACbqpZJgFulBHAcgUYZ65%29p)} ``` https://files.peakd.com/file/peakd-hive/agrante/AJivGhZSVuDd53eXi5Gha4efhXyiHrXjkkFq4V7Cgcgi886JqKE51zaniCCBuEN.jpg _{Woman draws light magic at night [source](https://creator.nightcafe.studio/studio?open=creation&panelContext=%28jobId%3ACbqpZJgFulBHAcgUYZ65%29p)} ![hive divider green.png](https://files.peakd.com/file/peakd-hive/agrante/23swk8GpwFSgbf3ixzAXN9x6yqPuHChsqRHkVzv2HzfvktjSAF6XQSkxpGe4ZqfPEFnX5.png) ## Third example Two images aligned side-by-side in the same row, size adjusted automatically to fit. The images in this example are for a [Gods Unchained](https://godsunchained.com/) card, sourced from the [official server](https://card.godsunchained.com). If it's just 2 images side by side, then using divs as demonstrated above works as intended (notice the like break before the image link): ```

![Meteorite Writhing Wolfpack](https://card.godsunchained.com/?id=2723&q=4)

![Shadow Writhing Wolfpack](https://card.godsunchained.com/?id=2723&q=3)

```

![Meteorite Writhing Wolfpack](https://card.godsunchained.com/?id=2723&q=4)

![Shadow Writhing Wolfpack](https://card.godsunchained.com/?id=2723&q=3)

--- ### More than 2 images in the same row If you need more than 2 images side-by-side then I couldn't find a way with divs. The solution I found though was to place all the images in a markdown table. The template is ``` |column1|column2|column3| |-|-|-| ``` And then you replace 'column#' with the markdown link to each image. It looks ugly and unwieldy, but it works. You can add spaces to make the markdown easier to read, but you cannot add line breaks. If you need more columns, just expand the table. ``` | ![Writhing Wolfpack](https://card.godsunchained.com/?id=2723&q=4) | ![Writhing Wolfpack](https://card.godsunchained.com/?id=2723&q=3) | ![Writhing Wolfpack](https://card.godsunchained.com/?id=2723&q=2) | ![Writhing Wolfpack](https://card.godsunchained.com/?id=2723&q=1) | |-|-|-|-| ``` | ![Writhing Wolfpack](https://card.godsunchained.com/?id=2723&q=4) | ![Writhing Wolfpack](https://card.godsunchained.com/?id=2723&q=3) | ![Writhing Wolfpack](https://card.godsunchained.com/?id=2723&q=2) | ![Writhing Wolfpack](https://card.godsunchained.com/?id=2723&q=1) | |-|-|-|-| One downside of this method is that the length of the caption changes the scaling of the image. So if you want all the images to be scaled equally, the caption length should be similar. ``` | ![Met](https://card.godsunchained.com/?id=2723&q=4) | ![Shadow](https://card.godsunchained.com/?id=2723&q=3) | ![Gold](https://card.godsunchained.com/?id=2723&q=2) | ![Diamond](https://card.godsunchained.com/?id=2723&q=1) | |-|-|-|-| ``` | ![Met](https://card.godsunchained.com/?id=2723&q=4) | ![Shadow](https://card.godsunchained.com/?id=2723&q=3) | ![Gold](https://card.godsunchained.com/?id=2723&q=2) | ![Diamond](https://card.godsunchained.com/?id=2723&q=1) | |-|-|-|-| You can use whitespace characters (i.e, ` `) until all captions are the same size, but this will make the markdown even more confusing. ``` | ![ Met ](https://card.godsunchained.com/?id=2723&q=4) | ![ Shadow](https://card.godsunchained.com/?id=2723&q=3) | ![ Gold ](https://card.godsunchained.com/?id=2723&q=2) | ![Diamond](https://card.godsunchained.com/?id=2723&q=1) | |-|-|-|-| ``` | ![ Met ](https://card.godsunchained.com/?id=2723&q=4) | ![ Shadow](https://card.godsunchained.com/?id=2723&q=3) | ![ Gold ](https://card.godsunchained.com/?id=2723&q=2) | ![Diamond](https://card.godsunchained.com/?id=2723&q=1) | |-|-|-|-| ![hive divider green.png](https://files.peakd.com/file/peakd-hive/agrante/23swk8GpwFSgbf3ixzAXN9x6yqPuHChsqRHkVzv2HzfvktjSAF6XQSkxpGe4ZqfPEFnX5.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!