docsify-image-caption

docsify-image-caption

image caption plugin for docsify

Usage

Add JS script

<script src="https://cdn.jsdelivr.net/npm/docsify-image-caption@latest/dist/docsify-image-caption.min.js"></script>
<!--<script src="https://cdn.jsdelivr.net/gh/Joaxin/docsify-image-caption/dist/docsify-image-caption.js"></script>-->

Add CSS style

/* figure image */
figure {
  border: thin #c0c0c0 solid;
  padding: 5px;
  max-width: 800px;
  display: flex;
  flex-flow: column;
  margin: 5px auto !important;
}

figcaption {
  background-color: #222;
  color: #fff;
  font: italic medium sans-serif;
  padding: 3px;
  text-align: center;
}

Add Docsify settings(default):

window.$docsify = {
    imgCaption: {
        encode: false,
        ignore: ['img'],
    }
}

Attribute	Type	Description	Value
encode	boolean	encode image path with blank space	true or false
ignore	list	ignore image markdown with keywords list	list

Example

Firstly, Check Markdown Image Syntax From : https://www.markdownguide.org/basic-syntax/

Now we write markdown syntax like:

![w60 Set of 4 Alice in Wonderland Antique Book page Art Prints A4-Nursery - Childrens](../../../../_media/anime/Set of 4 Alice in Wonderland Antique Book page Art Prints A4-Nursery - Childrens.jpg "Alice in Wonderland")

this will be rendered as:

<figure style="zoom:60%;">
<img src="../../../../_media/anime/Set of 4 Alice in Wonderland Antique Book page Art Prints A4-Nursery - Childrens.jpg" width="100%" alt="Set of 4 Alice in Wonderland Antique Book page Art Prints A4-Nursery - Childrens" title="Alice in Wonderland" class="medium-zoom-image">
    <figcaption>Set of 4 Alice in Wonderland Antique Book page Art Prints A4-Nursery - Childrens</figcaption>
</figure>