Summary extraction
Plugin for extracting content summaries using the <!-- more --> delimiter.
The comark/plugins/summary plugin extracts content before a <!-- more --> comment and stores it in tree.meta.summary. Useful for blog listings, article previews, RSS feeds, and anywhere you need a short excerpt of the full content.
Usage
import { parseMarkdown } from 'comark'
import summary from 'comark/plugins/summary'
const content = `# Article Title
This is the introduction that will become the summary.
<!-- more -->
This is the full article content.
`
const result = await parseMarkdown(content, {
plugins: [summary()]
})
console.log(result.meta.summary) // Node[]: nodes before <!-- more -->
console.log(result.nodes) // full contentWith framework components:
<script setup lang="ts">
import { Markdown } from '@comark/vue'
import summary from '@comark/vue/plugins/summary'
const plugins = [summary()]
</script>
<template>
<!-- renders only the summary portion -->
<Markdown :plugins="plugins" summary>{{ content }}</Markdown>
</template>import { parseMarkdown } from 'comark'
import { MarkdownDocument } from '@comark/react'
import summary from '@comark/react/plugins/summary'
const doc = await parseMarkdown(content, { plugins: [summary()] })
// renders only the summary portion
<MarkdownDocument value={{ ...doc, nodes: doc.meta.summary ?? doc.nodes }} />The
summary prop on the Vue <Markdown> component renders only the extracted summary nodes; without it, the full content is rendered and meta.summary is available separately. In React, read meta.summary from the parse result and render it with <MarkdownDocument>.API
summary(options?)
Returns a ComarkPlugin that extracts content before the delimiter.
Parameters:
options?- Optional configuration, see Options
Returns: ComarkPlugin
The extracted nodes are stored at tree.meta.summary as Node[]. If no delimiter is found in the content, meta.summary is not set.
Options
| Option | Type | Default | Description |
|---|---|---|---|
delimiter | string | '<!-- more -->' | HTML comment used to split summary from full content |
delimiter
The HTML comment string that marks the end of the summary. The extracted meta.summary nodes stop before the delimiter; the full content in nodes keeps the delimiter's comment node.
summary({ delimiter: '<!-- summary -->' })Examples
Blog listing
Render summaries in a listing page and link to the full article:
<script setup lang="ts">
import { Markdown } from '@comark/vue'
import summary from '@comark/vue/plugins/summary'
const plugins = [summary()]
</script>
<template>
<div class="articles">
<article v-for="article in articles" :key="article.slug">
<h2>{{ article.title }}</h2>
<Markdown :plugins="plugins" summary>{{ article.content }}</Markdown>
<a :href="`/articles/${article.slug}`">Read more →</a>
</article>
</div>
</template>import { parseMarkdown } from 'comark'
import { MarkdownDocument } from '@comark/react'
import summary from '@comark/react/plugins/summary'
const plugins = [summary()]
export async function ArticleList({ articles }) {
const docs = await Promise.all(
articles.map(article => parseMarkdown(article.content, { plugins }))
)
return (
<div className="articles">
{articles.map((article, i) => (
<article key={article.slug}>
<h2>{article.title}</h2>
<MarkdownDocument value={{ ...docs[i], nodes: docs[i].meta.summary ?? docs[i].nodes }} />
<a href={`/articles/${article.slug}`}>Read more →</a>
</article>
))}
</div>
)
}