Core Plugins
Summary Extraction
Plugin for extracting content summaries using the <!-- more --> delimiter.
The comark/plugins/summary plugin automatically extracts content before the <!-- more --> comment as a summary. This is useful for blog listings, article previews, and other scenarios where you need a short excerpt of the full content.
Basic Usage
The summary plugin is included in comark core package and available under comark/plugins/summary path.
Registering the Plugin
parse.ts
import { parse } from 'comark'
import summary from 'comark/plugins/summary'
const result = await parse(content, {
plugins: [summary()]
})
With Custom Delimiter
By default, the plugin uses <!-- more --> as the delimiter, but you can customize it:
parse.ts
import summary from 'comark/plugins/summary'
const result = await parse(content, {
plugins: [summary('<!-- summary -->')]
})
Examples
Basic Summary Extraction
parse.ts
import { parse } from 'comark'
import summary from 'comark/plugins/summary'
const content = `# Article Title
This is the introduction paragraph that will be used as a summary.
<!-- more -->
This is the full article content that won't appear in the summary.
`
const result = await parse(content, {
plugins: [summary()]
})
console.log(result.meta.summary) // Contains nodes before <!-- more -->
console.log(result.nodes) // Contains full content
Accessing Summary in Parse Result
The summary is stored in the meta.summary property of the parsed result:
types.ts
interface ComarkTree {
nodes: ComarkNode[]
frontmatter: Record<string, any>
meta: {
summary?: ComarkNode[] // Available when using summary plugin
toc?: any
// ... other meta properties
}
}
Using with Vue Component
The Vue <Comark> component has built-in support for rendering summaries:
App.vue
<script setup lang="ts">
import { Comark } from '@comark/vue'
import summary from 'comark/plugins/summary'
const content = `# Article Title
This is the summary shown in listings.
<!-- more -->
This is the full article content.
`
const options = {
plugins: [summary()]
}
</script>
<template>
<!-- Only renders "This is the summary shown in listings." -->
<Comark :options="options" summary>{{ content }}</Comark>
</template>
Blog Listing Example
BlogListing.vue
<script setup lang="ts">
import { Comark } from '@comark/vue'
import summary from 'comark/plugins/summary'
const articles = [
{
title: 'First Post',
content: `# First Post
Introduction to my blog.
<!-- more -->
Full article content here...`
},
// ... more articles
]
const options = {
plugins: [summary()]
}
</script>
<template>
<div class="articles">
<article v-for="article in articles" :key="article.title">
<h2>{{ article.title }}</h2>
<Comark :options="options" summary>{{ article.content }}</Comark>
<a :href="`/articles/${article.slug}`">Read more →</a>
</article>
</div>
</template>
API Reference
summary(delimiter?: string): ComarkPlugin
Creates a summary extraction plugin.
Parameters:
delimiter(optional) - The HTML comment delimiter to split content. Default:'<!-- more -->'
Returns: A Comark plugin that extracts summary content.
Features:
- Automatically applies auto-unwrap to summary if enabled in parse options
- Stores summary in
tree.meta.summaryas an array ofComarkNode[] - Only processes content when the delimiter is present
- Preserves all markdown formatting in the summary
Use Cases
- Blog Post Previews - Show article introductions in listing pages
- Search Results - Display content snippets in search results
- RSS Feeds - Generate feed descriptions from content
- Social Media Cards - Extract preview text for Open Graph tags
- Email Newsletters - Create email-safe previews of full articles
Notes
- The delimiter comment (
<!-- more -->) is removed from both the summary and full content - Summary extraction happens during parsing, so there's no runtime performance impact
- The summary respects the
autoUnwrapoption from parse configuration - Works seamlessly with frontmatter, table of contents, and other plugins