---
title: "Summary extraction"
description: "Plugin for extracting content summaries using the <!-- more --> delimiter."
canonical_url: "https://comark.dev/plugins/built-in/summary"
---
# 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

~~~typescript
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 content
~~~

With framework components:

<code-group>
```vue [Vue]
<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>
```


```tsx [React]
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 }} />
```
</code-group>

<tip>
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>`.
</tip>

---

## API

### `summary(options?)`

Returns a `ComarkPlugin` that extracts content before the delimiter.

**Parameters:**

- `options?` - Optional configuration, see [Options](#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`](#options-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.

```typescript
summary({ delimiter: '<!-- summary -->' })
```

---

## Examples

### Blog listing

Render summaries in a listing page and link to the full article:

<code-group>
```vue [Vue]
<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>
```


```tsx [React]
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>
  )
}
```
</code-group>

---

- [Parse API](https://comark.dev/reference/parse)
- [Plugins](https://comark.dev/plugins)


## Sitemap

See the full [sitemap](https://comark.dev/sitemap.md) for all pages.