Captions for other content

[flywire]

Allow captions on other content eg Tables.

[flywire]

Design table:

Content type	Default	Figure	Table	Other
Prefix	type
Numbering	false
Location	top	bottom
captionPrefixClass
captionClass
contentClass
id prefix
special process	false	stripTitle
Content tag	<div class="type">	<figure>	<table>
Caption tag	<figcaption>		<caption>
Prefix tag	<span>
Search process	<p> Type:	<figure>	<p>/<table>
Linked process		stripTitle	caption to line 2
id	_type-N

• shows defaults and differences from default
• settings shown in bold

---

1. all content types inherit the defaults
2. some content types inherit different defaults
3. extension defaults can be modified by options for all types or specific content types

[flywire]

Note default browser styling eg: https://html.spec.whatwg.org/multipage/rendering.html

blockquote, figure { margin-inline-start: 40px; margin-inline-end: 40px; }

[flywire]

https://github.com/Python-Markdown/markdown/issues/1003

[flywire]

Test files to use to tidy up process.

caption/docs/index.md

    # caption - tests

    A simple test of some content types. They need CSS for formatting.

    Listing: Markdown code

    ```markdown
    ![Alt text](/path/to/image.png "Captioned figure")

Instructions to add code colouring at: https://python-markdown.github.io/extensions/code_hilite/#step-2-add-css-classes

![gplv3_logo1](./docs/images/gplv3.png "Captioned figure")

[![gplv3_logo2](./docs/images/gplv3.png "Linked captioned figure")](https://www.gnu.org/licenses/gpl-3.0.en.html)

![gplv3_logo3](./docs/images/gplv3.png "Captioned figure resized"){: style="width:300px"}

[![gplv3_logo4](./docs/images/gplv3.png "Linked captioned figure resized"){: style="width:300px"}](https://www.gnu.org/licenses/gpl-3.0.en.html)

Table: Caption example

| Content     | Supported   |
| ----------- | -----------:|
| Figure      | Yes         |
| Table       | No          |
| Listing     | No          |

Target html file. Note CSS style sheet references at the start.

**Index.html**
```html
<link rel="stylesheet" href="docs/css/styles.css">
<link rel="stylesheet" href="docs/css/extra.css">
<h1>caption - tests</h1>
<p>A simple test of some content types. They need CSS for formatting.</p>
<div class="listing" id="_listing-1">
<figcaption><span>Listing&nbsp;1:</span> Markdown code</figcaption>
</div>
<div class="codehilite"><pre><span></span><code><span class="o">!</span><span class="p">[</span><span class="n">Alt</span> <span class="n">text</span><span class="p">](</span><span class="o">/</span><span class="n">path</span><span class="o">/</span><span class="n">to</span><span class="o">/</span><span class="n">image</span><span class="p">.</span><span class="n">png</span> <span class="s">&quot;Captioned figure&quot;</span><span class="p">)</span>
</code></pre></div>

<p>Instructions to add code colouring at:  https://python-markdown.github.io/extensions/code_hilite/#step-2-add-css-classes</p>
<figure id="_figure-1">
<img alt="gplv3_logo1" src="./docs/images/gplv3.png" title="Captioned figure" />
<figcaption><span>Figure&nbsp;1:</span> Captioned figure</figcaption>
</figure>
<figure id="_figure-2">
<a href="https://www.gnu.org/licenses/gpl-3.0.en.html"><img alt="gplv3_logo2" src="./docs/images/gplv3.png" title="Linked captioned figure" /></a>
<figcaption><span>Figure&nbsp;2:</span> Linked captioned figure</figcaption>
</figure>
<figure id="_figure-3">
<img alt="gplv3_logo3" src="./docs/images/gplv3.png" title="Captioned figure resized" />
<figcaption><span>Figure&nbsp;3:</span> Captioned figure resized</figcaption>
</figure>
<figure id="_figure-4">
<a href="https://www.gnu.org/licenses/gpl-3.0.en.html"><img alt="gplv3_logo4" src="./docs/images/gplv3.png" style="width:300px" title="Linked captioned figure resized" /></a>
<figcaption><span>Figure&nbsp;4:</span> Linked captioned figure resized</figcaption>
</figure>
<table id="_table-1">
<caption><span>Table&nbsp;1:</span> Caption example</caption>
<thead>
<tr>
<th>Content</th>
<th align="right">Supported</th>
</tr>
</thead>
<tbody>
<tr>
<td>Figure</td>
<td align="right">Yes</td>
</tr>
<tr>
<td>Table</td>
<td align="right">No</td>
</tr>
<tr>
<td>Listing</td>
<td align="right">No</td>
</tr>
</tbody>
</table>

caption/docs/css/extra.css

/* fix padding */

.listing,
.codehilite,
table,
table caption,
figure {
  background: lightgrey;
  padding-left: 10px;
  padding-right: 10px;
}

figure {
  padding: 10px;
  /* following lines remove figure indent */
  display: block;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
}

.listing,
table caption {
  padding-top: 10px;
}

.codehilite,
table {
  padding-bottom: 10px;
}

figure img {
  text-align: center;
}

caption,
figcaption {
  color: blue;
  font-style: italic;
  text-align: left;
}

caption span,
figcaption span {
  font-style: normal;
  font-weight: bold;
}

• add an image as caption/docs/images/gplv3.png

[hendrikp]

This was solved through the major-refactor PR and can be closed.