Markdown-it-table-references NPM

`markdown-it-table-references`

Table referencing for markdown-it.

Installation

yarn add markdown-it-table-references

npm install markdown-it-table-references

Example

# Hello World

| Name  | Client  |
| ----- | ------- |
| Alice | Mobile  |
| Bob   | Desktop |

.Client overview

<h1>Hello World</h1>
<figure id="client-overview">
  <table>
    <thead>
      <tr>
        <th>Name</th>
        <th>Client</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Alice</td>
        <td>Mobile</td>
      </tr>
      <tr>
        <td>Bob</td>
        <td>Desktop</td>
      </tr>
    </tbody>
  </table>
  <figcaption>
    <a href="#client-overview" class="anchor">§</a><a href="#client-overview" class="label">Table 1</a>: Client overview
  </figcaption>
</figure>
<h2 id="list-of-tables" class="list">List of Tables</h2>
<ol class="list">
  <li class="item"><a href="#client-overview" class="label">Table 1</a>: Client overview</li>
</ol>

Plain HTML figures and tables are supported too.

# Hello World

<figure id="client-overview">
  <table>
    <thead>
      <tr>
        <th>Name</th>
        <th>Client</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Alice</td>
        <td>Mobile</td>
      </tr>
      <tr>
        <td>Bob</td>
        <td>Desktop</td>
      </tr>
    </tbody>
  </table>
  <figcaption>Client overview</figcaption>
</figure>

<h1>Hello World</h1>
<figure id="client-overview">
  <table>
    <thead>
      <tr>
        <th>Name</th>
        <th>Client</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Alice</td>
        <td>Mobile</td>
      </tr>
      <tr>
        <td>Bob</td>
        <td>Desktop</td>
      </tr>
    </tbody>
  </table>
  <figcaption>
    <a href="#client-overview" class="anchor">§</a><a href="#client-overview" class="label">Table 1</a>: Client overview
  </figcaption>
</figure>
<h2 id="list-of-tables" class="list">List of Tables</h2>
<ol class="list">
  <li class="item"><a href="#client-overview" class="label">Table 1</a>: Client overview</li>
</ol>

Usage

const md = require("markdown-it")().use(require("markdown-it-table-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 tables (`env`).	`"tables"`
`wrap`	Wrap `<table>` in `<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 table label.	`true`
`content`	Anchor content.	`"§"`
`class`	Anchor class.	`"anchor"`

The label object can contain:

Name	Description	Default
`enable`	Insert table label before figure caption.	`true`
`text`	Table label text.	`"Table #"`
`placeholder`	Table number placeholder.	`"#"`
`class`	Table label class.	`"label"`

The list object can contain:

Name	Description	Default
`enable`	Append list of tables.	`true`
`class`	List of tables class.	`"list"`
`title`	List title.	`"List of Tables"`
`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 table label.	`true`
`title`	Insert table title.	`true`