0.1.1 • Published 5 months ago
rehype-semantic-blockquote v0.1.1
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
0.1.1
5 months ago