Quick Tech Tip: Create Image Captions on Hashnode
How to add captions and align images in your Hashnode blog posts!
Note: This will not work with Hashnode's Neptune editor! This is utilizing Raw Markdown only.
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:
 |
| Figure 1: Caption example with bold, centered text. 😉 |
Here is the code for the image above:
|  |
|:--:|
| <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 lineThese symbols are used to create and align tables in extended markdown.
3. Finally, adjust your image alignment and format your caption:
|  |
|:--:|
| <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.
|
| Figure 2: Here is your center-aligned image and bold caption 😉 |
|
| Figure 3: Here is your right-aligned image. 😉 |
|
| Figure 4: Here is your center-aligned image with centered caption. 😉 |
|
| Figure 5: Here is your centered-aligned image with centered, highlighted caption. 😉 |