How to add captions (such as below images) but anywhere?

[mattpopovich]

Checklist

• I have read and accepted the contributing guidelines.

How did you create the site?

Generated from chirpy-starter

Description

I would like to add captions to things other than images, such as blocks of code or iframes.

Operations you have already tried

Looking at previous posts I've created, I used to add <my-caption>Caption text here</my-caption>. I'm not sure why that worked but I do remember it working. It no longer works and just renders as normal text.

Has this feature been removed? Changed?

Anything else?

No response

[kungfux]

I'm not sure about <my-caption> existence and I didn't find it in the code.

There are ways to do this using custom styles.

Make sure you copy assets\css\jekyll-theme-chirpy.scss from this repository to yours.

Option 1. Using tag in markdown

Modify assets\css\jekyll-theme-chirpy.scss to add styles as following

em {
  display: block;
  text-align: center;
  font-style: normal;
  font-size: 80%;
  padding: 0;
  color: #6d6c6c;
}

and then use in posts like

<em>This is my caption</em>

Option 2. By specifying a class with styles

Modify assets\css\jekyll-theme-chirpy.scss to add styles as following

.caption {
  display: block;
  text-align: center;
  font-style: normal;
  font-size: 80%;
  padding: 0;
  color: #6d6c6c;
}

and then use in posts like

This is my caption.
{: .caption }

[mattpopovich]

And if we generated our website via chirpy-starter, we should copy the file assets/css/jekyll-theme-chirpy.scss from jekyll-theme-chirpy to our repo, save it in the same location, then add our custom style? Is that the recommended way? It seems to be working for me - thanks for the help!

[kungfux]

That's right. I needed to mention that you need to copy that file. I have updated the answer accordingly and added an alternate option.