This remark plugin adds custom syntax to add a caption to elements which might benefit from a legend. It wraps the said element in a
figure node with
figcaption node as last child. It is particularly interesting for use with quotes, images, tables, code blocks.
It follows a "whitelist" approach: for each mdast node type for which you want to allow captioning you'll have to add a configuration property mapping a node type to its caption "trigger".
> Do it or do it not, there is no trySource: A little green man, with a saber larger than himself
This takes what follows
Source: until the end of the block containing
Source: and puts this inside a
figcaption mdast node. What precedes it becomes children of a
figure node, the last child of this
figure node being
rehype, it generates the corresponding HTML elements.
interface figure <: Parenttype: 'figure'data:hName: 'figure'
interface figcaption <: Parenttype: 'figcaption'data:hName: 'figcaption'
This plugin handles two different types of caption/legend nodes :
internalLegend: when the caption, after being parsed by
remark, is inside the captioned element or inside its wrapping paragraph:
externalLegend: when the caption, after being parsed by
remark, is outside the captioned element or after its wrapping paragraph:
npm install remark-caption
const unified =const remarkParse =const stringify =const remark2rehype =const remarkCaption =
By default, it features :
external =table: 'Table:'code: 'Code:'internal =blockquote: 'Source:'image: 'Figure:'
This enables you to deal with such a code:
```python a_highlighted_code('blah') ``` Code: My code *caption*
type: 'figure'data:hName: 'figure'children:type: 'code'language: 'python'value: '\na_highlighted_code(\'blah\')\n'type: 'figcaption'data:hName: 'figcaption'children:type: 'text'value: 'My code 'type: 'em'children:type: 'text'value: 'caption'
Tables are also supported, example:
head1| head2-----|------bla|blaTable: figcapt1
remark-rehype this generates a HTML tree encapsulated inside a