Built-in
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 { parse } 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 parse(content, {
plugins: [summary()]
})
console.log(result.meta.summary) // ComarkNode[] — nodes before <!-- more -->
console.log(result.nodes) // full contentWith framework components:
<script setup lang="ts">
import { Comark } from '@comark/vue'
import summary from '@comark/vue/plugins/summary'
const plugins = [summary()]
</script>
<template>
<!-- renders only the summary portion -->
<Comark :plugins="plugins" summary>{{ content }}</Comark>
</template>import { Comark } from '@comark/react'
import summary from '@comark/react/plugins/summary'
<Comark plugins={[summary()]} summary>
{content}
</Comark>The
summary prop on <Comark> renders only the extracted summary nodes. Without it, the full content is rendered and meta.summary is available separately.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 ComarkNode[]. 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 delimiter itself is removed from both the summary and the full content.
summary({ delimiter: '<!-- summary -->' })Examples
Blog Listing
Render summaries in a listing page and link to the full article:
<script setup lang="ts">
import { Comark } 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>
<Comark :plugins="plugins" summary>{{ article.content }}</Comark>
<a :href="`/articles/${article.slug}`">Read more →</a>
</article>
</div>
</template>import { Comark } from '@comark/react'
import summary from '@comark/react/plugins/summary'
const plugins = [summary()]
export function ArticleList({ articles }) {
return (
<div className="articles">
{articles.map(article => (
<article key={article.slug}>
<h2>{article.title}</h2>
<Comark plugins={plugins} summary>{article.content}</Comark>
<a href={`/articles/${article.slug}`}>Read more →</a>
</article>
))}
</div>
)
}