PersonaMarkdown
Like v-html but support markdown syntax
Usage
Simple Usage
preview
vue
<template>
<div v-p-md="'**Hello** _World_, I\'m using `Markdown`'" />
</template>
<script setup>
import { vPMd } from '@privyid/persona/directive'
</script>Simple MD Editor
preview
vue
<template>
<div class="flex flex-col w-full space-y-4">
<p-textarea auto-grow v-model="text" />
<div v-p-md="text" />
</div>
</template>
<script setup>
import { vPMd } from '@privyid/persona/directive'
</script>Inline Parsing
Add modifier .inline to enable inline parsing. This suit for inline element like <p> or <span>
js
/* default parsing */
'**strong** _em_' 👉 `<p><strong>strong</strong> <em>em</em></p>`
/* Inline parsing */
'**strong** _em_' 👉 `<strong>strong</strong> <em>em</em>`Check this for more information.
preview
vue
<template>
<span v-p-md.inline="'**Hello** _World_, I\'m using `Markdown`'" />
</template>
<script setup>
import { vPMd } from '@privyid/persona/directive'
</script>API
Modifiers
| Modifiers | Description |
|---|---|
inline | Enable inline parsing |
unsecure | Parsing without HTML Sanitize |