Markdown

Like v-html but support markdown syntax

Usage

Simple Usage

preview

<template>
  <div v-p-md="'**Hello** _World_, I\'m using `Markdown`'" />
</template>

<script setup>
  import { vPMd } from '@privyid/persona/directive'
</script>

Simple MD Editor

# Hello World > This is markdown

preview

<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>

/* 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

<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
escape	Enable HTML Escape before parsing
unsecure	Parsing without HTML Sanitize