0.1.1 • Published 5 months ago

rehype-semantic-blockquote v0.1.1

Weekly downloads
-
License
MIT
Repository
github
Last release
5 months ago

rehype-semantic-blockquote

A Rehype plugin for transforming blockquotes into semantic figure elements with an associated quote author.

For example, if your markdown looks like this:

> Life is what happens when you're busy making other plans.

-- John Lennon

With this plugin, it will be transformed into a semantic HTML structure like this:

<figure>
  <blockquote>
    <p>Life is what happens when you're busy making other plans.</p>
  </blockquote>
  <figcaption>John Lennon</figcaption>
</figure>

Installation

npm install rehype-semantic-blockquote

Usage

import { unified } from 'unified'
import remarkParse from 'remark-parse'
import remarkRehype from 'remark-rehype'
import rehypeStringify from 'rehype-stringify'
import rehypeSemanticBlockquote from 'rehype-semantic-blockquote'

const input = '> Quote\n\n-- Author'

const file = await unified()
  .use(remarkParse)
  .use(remarkRehype)
  .use(rehypeSemanticBlockquote)
  .use(rehypeStringify)
  .process(input)

console.log(String(file))

// Outputs:
// <figure><blockquote><p>Quote</p></blockquote><figcaption>Author</figcaption></figure>

Options

You can pass an options object to customize the plugin behavior:

  • className: A string to add as a class on the element.

Example with a class:

.use(rehypeSemanticBlockquote { className: 'quote' })

This will produce:

<figure class="quote">
  <blockquote><p>Quote</p></blockquote>
  <figcaption>Author</figcaption>
</figure>

How It Works

  • The plugin scans the tree for blockquote nodes.
  • It looks for the next non-blank sibling. If that node is a paragraph containing a single text node starting with an author identifier (default: --, , , @), it extracts the author’s name.
  • The blockquote and the author are wrapped in a element with an optional class name. The author becomes a .

License

MIT