rehype-enhanced-blockquotes

A rehype plugin to enhance blockquotes.

Install

npm i rehype-enhanced-blockquotes

Use

import rehypeStringify from 'rehype-stringify';
import remarkParse from 'remark-parse';
import remarkRehype from 'remark-rehype';
import rehypeEnhancedBlockquotes from 'rehype-rehype-enhanced-blockquotes';
import { unified } from 'unified';

const process = (markdown: string): string => {
  const file = unified()
    .use(remarkParse)
    .use(remarkRehype)
    .use(rehypeEnhancedBlockquotes)
    .use(rehypeStringify)
    .processSync(markdown);

  return String(file).trim();
};

Normal Usage

In the last line of Blockquote, write marker cite: and a following link. Then the <bockquote> will be wrapped in a <figure>, the link text will be convreted to <figcaption> and its quoted part will be in <cite>. Inline elements in link text are effective but not in quoted part. Any elements in quote body is still effective.

input:

> Quote.
> cite: [**John Doe**, "Cite Title", 1975](https://example.com)

> Invalid because of enphasis between double quotes.
> cite: [John Doe, "_Cite Title_", 1975](https://example.com)

output:

<figure>
  <blockquote cite="https://example.com">
    <p>Quote</p>
  </blockquote>
  <figcaption><strong>John Doe</strong>, <cite>Cite Title</cite>, 1975</figcaption>
</figure>

With Simplest Link

When the last link is written in simplest style, nor <figure> and <figcaption> won't generated. Just set cite attribute to original <blockquote>. If write in GFM, auto links are effective for this usage.

Input:

> Quote.
> cite: <https://example.com>

> In GFM, this is equal to above.
> cite: https://example.com

Output:

<blockquote cite="https://example.com">
  <p>Quote</p>
</blockquote>

Without URL

In case the source is not on web, can use # as URL. This will generate <figure> and <figcaption> and not set cite attribute.

Input:

> Quote.
> cite: [John Doe, "Cite", 1975](#)

Output:

<figure>
  <blockquote>
    <p>Quote</p>
  </blockquote>
  <figcaption><strong>John Doe</strong>, <cite>Cite Title</cite>, 1975</figcaption>
</figure>

Options

unified().use(rehypeEnhancedBlockquotes, options);

type Options = {
  captionAfter?: string;
  captionBefore?: string;
  captionClasses?: string[];
  citeAfter?: string;
  citeBefore?: string;
  citeClasses?: string[];
  figureClasses?: string[];
  marker?: string;
  quotes?: [string, string];
};

captionAfter

Text inserted the end of <figcaption>.

Default: ''

captionBefore

Text inserted the begining of <figcaption>. For example, use -- to get -- John Doe.

Default: ''

captionClasses

Array of HTML class name for <figcaption> elements.

default: undefined

citeAfter

Text inserted the end of <cite>. Useful for enclose cite with parentheses.

Default: ''

citeBefore

Text inserted the beginning of <cite>. Useful for enclose cite with parentheses.

Default: ''

citeClasses

Array of HTML class name for <cite> elements.

Default: undefined

figureClasses

Array of HTML class name for <figure> elements.

Default: undefined

marker

Text at the beginning of last line. The link following this text will be processed as cite. Space(s) between marker and link will be ignored.

Default: 'cite:'

quotes

Open and close quotes. Text inside these will be <cite> element.

Default: ['"', '"']