Caption - python extension

I’d appreciate any feedback on including the markdown, html and css. The latest branch extends captions from figures to tables, listings and just about any other content.


    # caption - tests
    A simple test of some content types. They need CSS for formatting.
    Listing: Markdown code
    ![Alt text](/path/to/image.png "Captioned figure")
    Instructions to add code colouring at:
    ![gplv3_logo1](./docs/images/gplv3.png "Captioned figure")
    [![gplv3_logo2](./docs/images/gplv3.png "Linked captioned figure")](
    ![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"}](
    Table: Caption example
    | Content     | Supported   |
    | ----------- | -----------:|
    | Figure      | Yes         |
    | Table       | Finalising |
    | Listing     | Finalising |

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


<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 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>

<p>Instructions to add code colouring at:</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 id="_figure-2">
<a href=""><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 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 id="_figure-4">
<a href=""><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>
<table id="_table-1">
<caption><span>Table&nbsp;1:</span> Caption example</caption>
<th align="right">Supported</th>
<td align="right">Yes</td>
<td align="right">No</td>
<td align="right">No</td>


/* fix padding */

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;

table caption {
  padding-top: 10px;

table {
  padding-bottom: 10px;

figure img {
  text-align: center;

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