Vue-markdown-wasm NPM

vue-markdown-wasm

Vue2 and 3 component for markdown-wasm.

Usage

<script setup>
import VueMarkdown from 'vue-markdown-wasm';

/** Demo text */
const input = ref(`# The quick brown fox jumps over the lazy dog.

[Lorem ipsum](https://www.lipsum.com/) dolor sit amet, **consectetur** adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.`);
</script>

<template>
  <vue-markdown v-model="input" />
</template>

See Vue Markdown Wasm Live Preview and source code.

CDN Usage

Load markdown-wasm and vue-demi separately. Please change the version accordingly.

<!-- Vue core -->
<script src="https://cdn.jsdelivr.net/npm/vue@3.3.4/dist/vue.global.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-demi@0.14.5/lib/index.iife.min.js"></script>
<!-- Markdown wasm -->
<script src="https://cdn.jsdelivr.net/npm/@logue/markdown-wasm@1.4.12/dist/markdown.iife.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-markdown-wasm@0.3.12/dist/index.iife.min.js"></script>
<script>
  const { createApp } = Vue;
  app.component(VueMarkdown).mount('#app');
</script>

Props

Props	Type	Default	Information
`tag`	`string`	article	Markdown wasm wrapping tag. Default is `article` because it may contain `h1` and `h2` tags.
`parse-flags`	`ParseFlags`	ParseFlags.DEFAULT	Flags that customize Markdown parsin
`format`	`<'html' \\| 'xhtml'>`	xhtml	Select output format
`bytes`	`boolean`	false	result as a Uint8Array
`allow-js-uri`	`boolean`	false	Allow "javascript:" in links
`on-code-block`	`Function`	undefined	Optional callback which if provided is called for each code block. langname holds the "language tag", if any, of the block.

ParseFlags

Flags	Description
`COLLAPSE_WHITESPACE`	In TEXT, collapse non-trivial whitespace into single ' '
`LATEX_MATH_SPANS`	Enable $ and $$ containing LaTeX equations.
`NO_HTML_BLOCKS`	Disable raw HTML blocks.
`NO_HTML_SPANS`	Disable raw HTML (inline).
`NO_INDENTED_CODE_BLOCKS`	Disable indented code blocks. (Only fenced code works.)
`PERMISSIVE_ATX_HEADERS`	Do not require space in ATX headers ( ###header )
`PERMISSIVE_EMAIL_AUTO_LINKS`	Recognize e-mails as links even without \<...>
`PERMISSIVE_URL_AUTO_LINKS`	Recognize URLs as links even without <...>
`PERMISSIVE_WWW_AUTOLINKS`	Enable WWW autolinks (without proto; just 'www.')
`STRIKETHROUGH`	Enable strikethrough extension.
`TABLES`	Enable tables extension.
`TASK_LISTS`	Enable task list extension.
`WIKI_LINKS`	Enable wiki links extension.
`UNDERLINE`	Enable underline extension (disables '_' for emphasis)

DEFAULT flag is shorthand for COLLAPSE_WHITESPACE | PERMISSIVE_ATX_HEADERS | PERMISSIVE_URL_AUTO_LINKS | STRIKETHROUGH | TABLES | TASK_LISTS
NO_HTML flag is shorthand for NO_HTML_BLOCKS | NO_HTML_SPANS