Follow

Follow
Quick Tech Tip: Create Image Captions on Hashnode

Quick Tech Tip: Create Image Captions on Hashnode

How to add captions and align images in your Hashnode blog posts!

Kylee Morgan | Communal Tech's photo
Kylee Morgan | Communal Tech
ยทNov 18, 2022ยท

3 min read

Note: This will not work with Hashnode's Neptune editor! This is utilizing Raw Markdown only.

kitten800400.jpg

Hashnode blog posts are written and formatted using Markdown, a lightweight markup language for formatting elements to plaintext text documents. There are official Markdown hacks to add image captions, but these hacks do not work on every writing platform.

While there have been numerous requests for uploaded imaging captioning in Hashnode (such as this one, this one, and this one), the official Hashnode Markdown Guide does not include directions for image captions. It only leads users to believe that captioning images using methods in official Markdown is impossible, but this is not true.

Image captioning is possible on Hashnode with by utilizing Extended Markdown Syntax, behold:

kitten800400.jpg
Figure 1: Caption example with bold, centered text. ๐Ÿ˜‰

Here is the code for the image above:

| ![kitten.jpg](https://cdn.hashnode.com/res/hashnode/image/upload/v123/abc.jpg) |
|:--:|
| <b><center>Figure 1: Caption example with bold, centered text. ๐Ÿ˜‰ </center></b> |

How to Add Captions to Image Uploads on Hashnode:

1. Upload your image:

It will look something like this in the editor:

![kitten.jpg](https://cdn.hashnode.com/res/hashnode/image/upload/v123/abc.jpg align="left")

2. Add the following the following characters to your image upload markdown:

| ![placekitten400600.jpg](https://cdn.hashnode.com/res/hashnode/image/upload/v1668757444773/U-L-_esbu.jpg align="left") |
|:--:|
| Here is your caption ๐Ÿ˜‰ |

You will notice the following text was added:

  • A | symbol at the beginning and end of the markdown image statement, with a space in between on each ends.

  • |:--:| on a new line

  • | <your caption> | on a new line

  • These symbols are used to create and align tables in extended markdown.

3. Finally, adjust your image alignment and format your caption:

| ![placekitten400600.jpg](https://cdn.hashnode.com/res/hashnode/image/upload/v1668757444773/U-L-_esbu.jpg) |
|:--:|
| <b> Here is your bold caption ๐Ÿ˜‰ </b>  |

You'll noticed by removing the align="left" statement in the markdown image statement, that the alignment defaults to left. You can align your images to the center or right by simply editing the align statement accordingly. Next, you can use a number of HTML tags to format your captions, but not all will work depending on compatibility with Markdown, Hashnode, and your browser.


kitten800400.jpg
Figure 2: Here is your center-aligned image and bold caption ๐Ÿ˜‰
kitten800400.jpg
Figure 3: Here is your right-aligned image. ๐Ÿ˜‰
kitten800400.jpg
Figure 4: Here is your center-aligned image with centered caption. ๐Ÿ˜‰
kitten800400.jpg
Figure 5: Here is your centered-aligned image with centered, highlighted caption. ๐Ÿ˜‰
ย 
Share this