markdown-it-figure-references

Figure referencing for markdown-it.

Installation

yarn add markdown-it-figure-references

or

npm install markdown-it-figure-references

Example

# Hello World

![Stormtroopocat](https://octodex.github.com/images/stormtroopocat.jpg "The Stormtroopocat")

<h1>Hello World</h1>
<p>
  <figure id="the-stormtroopocat">
    <img src="https://octodex.github.com/images/stormtroopocat.jpg" alt="Stormtroopocat" title="The Stormtroopocat" />
    <figcaption>
      <a href="#the-stormtroopocat" class="anchor">§</a>
      <a href="#the-stormtroopocat" class="label">Figure 1</a>: The Stormtroopocat
    </figcaption>
  </figure>
</p>
<h2 id="list-of-figures" class="list">List of Figures</h2>
<ol class="list">
  <li class="item"><a href="#the-stormtroopocat" class="label">Figure 1</a>: The Stormtroopocat</li>
</ol>

Plain HTML figures and images are supported too.

# Hello World

<figure id="the-stormtroopocat">
  <img src="https://octodex.github.com/images/stormtroopocat.jpg" alt="Stormtroopocat" title="The Stormtroopocat"/>
  <figcaption>The Stormtroopocat</figcaption>
</figure>

<h1>Hello World</h1>
<figure id="the-stormtroopocat">
  <img src="https://octodex.github.com/images/stormtroopocat.jpg" alt="Stormtroopocat" title="The Stormtroopocat" />
  <figcaption>
    <a href="#the-stormtroopocat" class="anchor">§</a><a href="#the-stormtroopocat" class="label">Figure 1</a>: The
    Stormtroopocat
  </figcaption>
</figure>
<h2 id="list-of-figures" class="list">List of Figures</h2>
<ol class="list">
  <li class="item"><a href="#the-stormtroopocat" class="label">Figure 1</a>: The Stormtroopocat</li>
</ol>

Usage

const md = require("markdown-it")().use(require("markdown-it-figure-references"), opts);

See a demo as JSFiddle.

The opts object can contain:

| Name | Description | Default | | -------- | ----------------------------------------------- | ----------- | | after | Rule name to insert new rules after. | false | | ns | Namespace for saving registered images (env). | "figures" | | wrap | Wrap <image> in a <figure> element. | true | | anchor | Anchor options. | see below | | label | Label options. | see below | | list | List options. | see below |

The anchor object can contain:

| Name | Description | Default | | --------- | ---------------------------------- | ---------- | | enable | Insert anchor before figure label. | true | | content | Anchor content. | "§" | | class | Anchor class. | "anchor" |

The label object can contain:

| Name | Description | Default | | ------------- | ------------------------------------------ | ------------ | | enable | Insert figure label before figure caption. | true | | text | Figure label text. | "Figure #" | | placeholder | Figure number placeholder. | "#" | | class | Figure label class. | "label" |

The list object can contain:

| Name | Description | Default | | -------- | ----------------------- | ------------------- | | enable | Append list of figures. | true | | class | List of figures class. | "list" | | title | List title. | "List of Figures" | | tag | HTML tag for list. | "ol" | | item | List item options | see below |

The item object can contain:

| Name | Description | Default | | ------- | --------------------------------- | -------- | | tag | HTML tag for list item. | "li" | | href | Add target id to list item label. | true | | class | List item class. | "item" | | label | Insert figure label. | true | | title | Insert figure title. | true |

License

GPL-3.0 © StudyATHome Internationally