---
title: "Punctuation"
description: "Example showing how to use Comark with the punctuation plugin for smart quotes, dashes, and symbols in Vue and Vite."
canonical_url: "https://comark.dev/examples/plugins/vue-vite-punctuation"
---
# Punctuation

> Example showing how to use Comark with the punctuation plugin for smart quotes, dashes, and symbols in Vue and Vite.

<code-explorer org="comarkdown" repo="comark@c78885ca7504b38afc7ced59aac1a3c6b3cc5425" path="examples/3.plugins/vue-vite-punctuation" defaultValue="src/App.vue"></code-explorer>

## Features

This example demonstrates the punctuation plugin in Vue:

- **Smart quotes**: `"text"` → “text”, `'text'` → ‘text’
- **Dashes**: `--` → – (en-dash), `---` → — (em-dash)
- **Ellipsis**: `...` → …
- **Symbols**: `(c)` → ©, `(r)` → ®, `(tm)` → ™, `+-` → ±

## Usage

```vue
<script setup lang="ts">
import { Markdown } from '@comark/vue'
import punctuation from '@comark/vue/plugins/punctuation'
</script>

<template>
  <Suspense>
    <Markdown :plugins="[punctuation()]">{{ markdown }}</Markdown>
  </Suspense>
</template>
```

## Learn more

- [Punctuation Plugin Documentation](https://comark.dev/plugins/built-in/punctuation)
- [Comark Documentation](https://comark.dev)


## Sitemap

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